import { Meta } from '@storybook/blocks';

<Meta title="Base/Grids" />

# Layout

## Vertical rhythm

In order to set up consistent vertical space (vertical rhythm) and horizontal
spacing, the theme contains several variables in
`00-theme/00-base/00-config/00-variables/_vars-01-layout.scss`
You can tweak these if you need, but keep in mind they are part of a system
used throughout the whole site to make your life easier. If you just need 1
element to have a different amount of spacing (e.g. the homepage blocks and
rows), please just use another variable in those elements.

- `var(--gap-md)` is based on the line-height, because this will make space in
texts (eg paragraphs and lists). Therefor, it is based on the typography
sizing. It's the basis used in print design for ensuring readability and a nice
vertical rhythm.
- `var(--gap-xs)` `var(--gap-sm)`: these are 2 smaller variants of this, used
when less space is needed. E.g. with small titles or other smaller bits of text.
The reason these have a fixed size, is because you can't set a minimum margin
or padding size, so we had to settle for a fixed value instead. So you might
need to tweak these a bit based on how big your line-height is.
- `var(--gap-lg)`: The bigger gaps are still based on your typography.

## Horizontal space

There is a default gap size defined, that is also the fallback for the grid
system gaps between columns. Try to keep this value the same as in the designs.
The container padding is half of the columns gap.

## Positioning layers

That layout variables file also contains a map of z-indexes `$z-index` you can
use to keep overview of all the layers in your site. This is especially
important for the mobile menu and other overlays.
Use the mixin `@include z-index(myMapKey)` to set specific z-indexes.

!!!USE THE MIXIN AND THESE VARIABLES!!!

**Important!**

- Keep in mind that a z-index ONLY works on an element with a position
(relative/absolute/fixed/…).
- Remember that if you nest layers, their z-index is always RELATIVE to the
closest wrapper with a position.
- For these reasons, the `.container` and several other wrappers do not have a
default position: relative. We want to avoid having to override these in the
header.
- Resetting positioning on an element can always be done by giving it
`position: static`. This makes the element ignore position, z-index,
left/right/top/bottom.

## Breakpoints

Breakpoints are set and used in 3 places:

- **in the theme**\
`breakpoints.yml`-files: These are used for responsive image styles by Drupal.
- **in the Sass**\
  `00-theme/00-base/02-helpers/02-mixins/_mixins-00-breakpoints.scss`
  `00-theme/00-base/00-config/00-variables/_vars-breakpoints.scss`
  You get a lot of possible breakpoints here but the most important thing to
  remember, is that we work from the 'mobile first' principle.
  **Meaning**: most breakpoints go from smaller to bigger screens using
  'min-width'.
  **However**, there are exceptions: we have breakpoints to add styling
  specific for a certain breakpoint (e.g. bp-xs-only is only small phones)
  OR smaller than a max-width (e.g. bp-sm-only is for screens smaller than or
  equal to tablet).
  **Why do we have those exceptions?** Because sometimes a mobile design is
  very different from the bigger screens (e.g. mobile menu and navigation) and
  we don't want to have to undo a bunch of styling.

- **in the JS**\
  `00-base/06-scripts/00-helpers.js`
  There is a `self.screen` variable set up so you can check on which breakpoint
  you are. This is used by the JS that does the mobile menu navigation but can
  come in handy in other places as well.
  It relies on the `getBreakpoint` and `checkScreensize` functions, which refer to
  a pseudo-element set by CSS.

## Grid system

`00-theme/00-base/05-grid`
We have a grid system in place that uses flexbox.
