• Notes Grid Layout on Main Page: CSS Snippet

    The grid layout used to create pined notes on the main page. m a j a d c c o m The grid tracks are created using an explicit grid. The auto-fill keyword ensures that the browser places as many columns as possible while respecting the minmax() value. This means that the grid columns won’t […]

    Read more

    Posted in Snippets

  • Position absolute within CSS Grid Layout

    You can use the CSS property position: absolute within a grid layout. First, you need to set the position: relative property on the grid container and then use position: absolute on its child element. Once an item is absolutely positioned, it no longer participates in the grid layout flow and doesn’t affect the placement of […]

    Read more

    Posted in CSS, Snippets

  • Position relative within CSS Grid Layout

    It is possible to use position relative with a CSS grid item. When you use the CSS property position: relative with a CSS grid item, it affects the position of the grid item relative to its normal position within the grid layout. By default, grid items are positioned according to the grid layout rules, which […]

    Read more

    Posted in CSS, Snippets

  • auto-fit and auto-fill

    Auto-fill and auto-fit are two values for the grid-template-columns and grid-template-rows properties in CSS grid layout. grid-template-columns and grid-template-rows properties are used to define the number and size of grid tracks (rows and columns) in a CSS grid layout. Both of these properties accept a list of values, where each value represents a track. You […]

    Read more

    Posted in CSS, Snippets

  • Grid Lines

    In CSS grid layout, the grid consists of tracks, which are formed by grid lines that create columns and rows. You can use these grid lines to position elements on the grid by addressing a specific cell using its row and column coordinates. You can refer to these coordinates using line numbers or by assigning […]

    Read more

    Posted in CSS, Snippets

  • The Sticky Header & Footer

    The page layout includes header and footer elements that do not scroll with the rest of the page. The “sticking” effect is achieved by applying the CSS property position: sticky to these elements. By setting the top: 0 value for the header and bottom: 0 for the footer, they are positioned at the top and […]

    Read more

    Posted in Snippets

  • box-sizing

    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.

    Read more

    Posted in CSS, Snippets

  • Detect window scrollbars

    Clean JavaScript to detect if the window has a scrollbars.

    Read more

    Posted in JavaScript, Snippets

  • Flex – margin: auto

    The CSS rule margin: auto; centers the flex children horizontally and vertically.

    Read more

    Posted in CSS, Snippets

  • Media query – breakpoints

    Creating breakpoints for @media query using @mixin scss.

    Read more

    Posted in Snippets