Feo CSS is a tiny SCSS framework based on CUBE CSS from Andy Bell. In essence, it is a utility-enabled and utility-first framework.
Core principles
Compared to other frameworks, Feo CSS distinguishes itself by focusing on a few core principles:
- Custom properties: all configured design tokens are converted into CSS custom properties that can be changed in runtime. In addition, all utility classes point towards these custom properties, instead of using the SCSS variables during compile time.
- Layout driven: a lot of the issues we face are all about layout. And CSS is good in layout. Feo CSS offers several standardized layout solutions that can be altered using additional utility classes for these layouts. Many of the layouts are inspired by Every Layout.
- Browser defaults: browsers are implementing more and more default features. These are by default more accessible and usable for users, compared to solutions created by ourselves.
- Have a good starting point: Feo CSS is opinionated. It applies a minimal CSS reset and sets some default design tokens. The default tokens can be overwritten, the rest not.
What about CSS blocks/components/BEM?
With global styles (e.g. styles on h1 tags), layout and utility classes, most of your styling problems will be solved. Those parts that are not yet solved can be solved with blocks. Compare it to the good old BEM. In modern frameworks they often corresponding one-on-one with UI components (e.g. a React component).
From the CUBE CSS documentation: "A block is a skeletal component or organisational structure. To compare it to common user interface elements: it is a card element or a button element."
Blocks and child classes in blocks (e.g. .card .image) have a higher specificity compared to layout and utilities classes. Blocks will overwrite CSS properties. It is therefore advised to only apply styles not covered in utility classes, to avoid confusion.
As blocks tend to be very project/application/system specific, Feo CSS encourages you to write them yourself! Feo CSS can easily be combined with your own CSS. You can use all the CSS custom properties generated by Feo CSS in your blocks.
What does Feo CSS stand for?
Feo CSS stands for the idea to work from a single methodology, and build fluid UIs based on basic values ($feo-sizes and its fluid scaling).