Layout
The framework uses a CSS grid to create the default page layout on the body. It features default CSS variables that you can customize, such as the maximum content width, which is set at 1280px. Since it uses a grid, it includes gaps and columns.
Also, the grid template as two content zone available as full and content that you can use as you wish.
But as every website can be different, these value can be changed !
@use '@natachah/vanilla-frontend/scss/base/layout'Device Breakpoint Viewport
| Device | Breakpoint | Columns | Max-width |
|---|---|---|---|
| Mobile | < 720px | 1 | 100% |
| Tablet | < 1024px | 6 | 100% |
| Laptop | < 1440px | 12 | 1280px |
| Desktop | > 1440px | 12 | 1280px |
<body data-preload>
<header></header>
<main></main>
<footer></footer>
</body>@use '@natachah/vanilla-frontend/scss/base/layout';--layout-width
--layout-gap-block
--layout-gap-inline
--layout-columns
--subgrid-gap-block
--subgrid-gap-inlineTIP
The --subgrid-gap-* are used for the direct child as <header>, <main> and <footer>. It set by default the gap block at 0 and take the layout inline gap.
Container
The default layout include a .container and a .container-full.
The classic container is centered into the page layout and the full container take the full length of the page. It's perfect if you need to set a background color to a section.
<section class="container"></section>
<section class="container-full"></section>Subgrid
You can re-use the layout grid into a container with the class .subgrid. Then you can use the grid-column CSS property to manage the space.
<section class="container subgrid"></section>
<section class="container-full subgrid"></section>--subgrid-gap-block
--subgrid-gap-inline