🎛️ Variables
Set up custom properties for colors, font sizes, and spacing. Ensure
that you follow the naming pattern used in this boilerplate. Variables
are defined in _variables.css.
Consider using flexible values instead of static ones. ⚠️ Please avoid using Pixels!
🎨 Basic styling
Utilize the cascade instead of working against it. Define basic
styling for the project in the _base.css file. This
includes overall line height, font-family, etc.
🥞 Everything is stacked
Minimize the use of margins. Margins should be applied through layout
classes. For vertical spacing, employ stack classes like
stack-m, stack-xl etc.
🧳 Utility classes are fine
If you want to use utility classes, that's fine. We already have two
in place: one is an sr-only class to hide text from
sighted users, and the other is a simple
uppercase utility to transform text to uppercase.
📐 Layout examples
Auto-Grid
Customization
--auto-grid-min-size: 16rem;
--auto-grid-max-columns: infinity; (--> no max columns)
--auto-grid-gap: 1rem;
--auto-grid-gap-vertical: (defaults to --auto-grid-gap)
Centerflex
Customization
--centerflex-threshold: 50rem;
--centerflex-gap: 1rem;
--centerflex-gap-vertical: (defaults to --centerflex-gap)
Cluster
Customization
--cluster-justification: flex-start;
--cluster-gap: 1rem;
--cluster-gap-vertical: (defaults to --cluster-gap)
One
Two
3
4
Fiiiiiive
Sechs
Grid switcher
Customization
--gs-columns-small: 1;
--gs-columns-medium: 2;
--gs-columns-large: 4;
--gs-bp-medium: 25rem;
--gs-bp-large: 50rem;
--gs-gap: 1rem;
--gs-gap-vertical: (defaults to --gs-gap)
Sidebar (sidebar-left and sidebar-right)
Customization
--sidebar-width: 20rem;
--sidebar-threshold: 50%;
--sidebar-gap: 1rem;
--sidebar-gap-vertical: (defaults to --sidebar-gap)
Linked Teaser – Code Example
This is the headline
This is the headline
👿 Never ever do this:
- Set HTML font size to 10px
- Put click-events on divs. A div is not a button!
- Icon-links without text
- Images without alt text. If you can not provide a good alt text, use an empty alt-attribute.
- When using BEM, use it corretly. Not sure what name to use? -> Use our Bem Cheat Sheet
- Hide focus-indicators.
-
Use a fixed unit for line-heights. Usually you want something like
line-height: 1.5;to set the line-height to 150%.