Introduction > What is Feo?

Feo 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 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 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 is opinionated. It applies a minimal CSS reset, some default global styles 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 encourages you to write them yourself! Feo can easily be combined with your own CSS. You can use all the CSS custom properties generated by Feo in your blocks.

What does Feo stand for?

Nothing really. At one point my wife was gaming and a character on the screen that caught my eye was called 'Feo Ul'. However, I read it as 'Feo UI', and I liked it. Later it hit me that I was reading it wrong, but the name stuck with me.

How it works

Feo transforms all configured design tokens from SCSS variables to CSS custom properties. These CSS custom properties are used in all utilities classes that are generated based on the configured design tokens. Let's look at the example color configuration below.

scss// tokens.css
$feo-colors: (
    'black': #000,
    'white': #fff
);

$feo-sizes: (
    'default': 1rem
);

This generates in compile tile the following CSS custom properties.

css:root {
    --color-black: #000;
    --color-white: #000;
    --size-default: 1rem;
}

Based on the same design tokens, utility classes are generated in various places. These utility classes point towards the CSS custom properties, instead of directly using the corresponding value. The shown example results in at least the following utility classes.

css.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.p-default {
    padding: var(--size-default);
}