Always using the variables ensures design consistency.
The following aspects are controlled by variables:
- Sizes - Margins, Paddings and Fonts
- Colors - Backgrounds, Fonts and Borders
- Generals - Various aspects that should be standardised
Concepts
Variables
Globals
HTML elements are globally modified to work with the general design out of the box. This simplifies building interfaces, but also limits freedom in how you can customize these elements.
Some Globals have variants in how they can be used. See "Variants" concept for more information.
Helpers
A set of tiny css classes which only does one thing. They are often based on variables and will ensure design consistency.
It is encouraged to use helpers instead of building custom CSS components for simplier interfaces. Doing so removes a lot of unnecessary CSS which would otherwise become tedious to maintain long term.
The naming standard of helpers are based on the variable names and css attribute names.
Almost everything in this documentation is built with these helpers. Looking in the source code gives you an idea of what you can do.
Examples: padding-large, padding-top-large, font-contrast-high
Variants
Anything coded with SCSS might have variations on that something. We call such variations "-variant" with a dash prefix.
Variants are used in both globals and helpers. The same syntax should also be used in custom built SCSS components.
Always add variants to follow the main class to make it clear what they are variants of. If they are variants of a Global, they go first in the class order.
<button> Creates a normal button.
<button class='-small'> Creates a small button.
<button class='-primary -small'> Creates a small button with high visibility.
Do <button class='-primary -small margin-top-large'>
Do not <button class='-primary margin-top-large -small'>