Tokens
Feo.css offers a limited set of design tokens, implemented in CSS Custom Properties (--*). These design tokens are used in the layout layer of Feo.css. To align with modern CSS frameworks, class utilities exist that apply the values of the design tokens to the API of the layout classes.
Sizing
Feo.css offers design tokens on sizing that can be used for spacing (e.g. margin and padding), font-sizes, or anything you can think of. The values are based on a combination of a few key principles:
- Opinionated.
- Fluid. Sizes based on screen size.
- Adjustable. You can just overwrite the custom property values.
- Extensible. Feo.css is build in a way that you can add new tokens or change the naming, and only have to add a very small amount of classes.
| Token name | Value at 320px | Value at 1240px |
|---|---|---|
--token-size-000 |
11.11px | 12.80px |
--token-size-00 |
13.33px | 16.00px |
--token-size-0 |
16.00px | 20.00px |
--token-size-1 |
19.20px | 25.00px |
--token-size-2 |
23.04px | 31.25px |
--token-size-3 |
27.65px | 39.06px |
--token-size-4 |
33.18px | 48.38px |
--token-size-5 |
39.81px | 61.04px |
Breakpoints
Tokens used as points that can be used, whenever your UI is
breaking. Scaling between the values is based on
1.33.
| Token name | Value |
|---|---|
--token-bp-000 |
11.31rem |
--token-bp-00 |
15.04rem |
--token-bp-0 |
20rem |
--token-bp-1 |
20rem |
--token-bp-2 |
26.6rem |
--token-bp-3 |
35.38rem |
--token-bp-4 |
47.05rem |
--token-bp-5 |
62.58rem |
Adding new design tokens
The design tokens of Feo.css can be easily adjusted, like any other (global) CSS custom property. Extension of the design tokens is also possible, but requires a little more work than just adding new tokens.
When you add new tokens to --token-size-*, you need to add the following classes as well, in the correct @layer:
.--gap-*inlayer(layout)for controlling gaps in may layout classes..m-*,.mt-*,.mb-*,.ml-*and.mr-*inlayer(utilities)for controlling margins..size-*inlayer(utilities)to control font-sizes.
If you add tokens to --token-bp-*, the following classes need to be adjusted.
.--threshold-*inlayer(layout)to control different aspects on dimensions of the layout container or children in layout classes..--maxw-*inlayer(utilities)to control themax-widthproperty.