Home
Feo.css is a small CSS library (<5kB) that gives you a good starting point on any project. It provides you with sensible defaults for standard HTML elements, and some CSS classes around layout patterns and simple utility classes. A solid CSS foundation and architecture speeds up everything. Feo.css provides that.
Did you know?
1. The name Feo means "front-end optimized". It also happens to mean "ugly" in Spanish. Happy coincidence, don't you think?
2. Everything on this site, is purely based on the library. Ok, almost everything (less than 100 lines of CSS required).
How to use it
Use the unpkg.com CDN directly in your head
of your HTML page:
<link rel="stylesheet" href="https://unpkg.com/feo-css/feo.min.css">
Import it in your (S)CSS:
@import "https://unpkg.com/feo-css/feo.min.css";
Or install it via NPM using your package manager of choice:
npm install feo-css
yarn add feo-css
Setup and architecture
The architecture of Feo.css follows the principles outlined here.
@layer global, layout, blocks, utilities;
The layers indicate the level of importance, meaning: try to solve things with HTML elements first (based on a simple reset & global css). If that is not enough, use generic layout patterns, and some utilities. In more complex settings, use components.
- Design tokens (part of the
global
layer) - Layout patterns
- Blocks
- Utility
Because Feo.css is build using @layer
, you can easily
extend and avoid cascading issues, by including your own CSS in
the proper layer.
Naming conventions
Feo.css has some particular naming conventions that are important to know and understand. In particular two naming patterns.
Design tokens
Tokens like sizing and breakpoints are considered to have a "baseline". The most common value for the design token. Those tokens always have a -0
as the post-fix in their naming (e.g. --token-size-0
). For each step higher, the number is increased (e.g. --token-size-2
). In case of lowering steps, we add a 0
to the token name (e.g. --token-size-000
). This convention is chosen as it is seen to be more readable compared to --token-size--1
(note the double dash).
Class utilities
Utility classes are classes that do one thing, and one thing well. Class utilities are classes that that allow you to control one aspect from a different CSS class, like a layout class. Class utilities on their own have no impact whatsoever, in contract to utility classes. Class utilities have a --
post-fix, to make them easily spottable (as in most cases they alter interal custom properties).