The Sticky Header & Footer
Why sticking The layout has the header and the footer elements that they do not scroll with the page. The sticking behavior is achieved by applying the CSS property “position: sticky” to these elements. By setting the values “top: 0” for the header and “bottom: 0” for the footer, the elements are positioned at the […]
Using universal border-box sizing. Every element will inherit the box-sizing from their parent. In case third-party components will have box-sizing: content-box, using the inherit keyword will make the conversion easier.
svg – use
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. Resources MDN
Detect window scrollbars
Flex – margin: auto
The CSS rule margin: auto; centers the flex children horizontally and vertically.
Media query – breakpoints
Creating breakpoints for @media query using @mixin scss.
The grid system – float and clearfix.
Grid Layout consists of 12 columns based on floats.
Snippet for gradient text.
using vw for font size
Setting font size in vw units using the cacl() function.
Centering vertically text using line-height See the Pen Vertical centring – text -line-height by majadc (@majadc) on CodePen. Centering vertically image using span element See the Pen Centering vertically using span by majadc (@majadc) on CodePen. Centering vertically image using flex box. See the Pen Centering vertically – flexbox by majadc (@majadc) on CodePen. Centering […]