Here at Hired we have a homegrown CSS framework intended to empower creativity with low friction tooling. If you're new, these docs are designed to be read straight through.
All PRs/Issues on github are welcome. Check out our contribution guide and open a PR/issue about anything!
The purpose of 'Object Oriented CSS' is to create reusable components that ensure consistency among elements, wherever they may be used. Using the BEM naming methodology, Fortitude encourages you to break apart structural properties of a component from the stylistic properties.
Let's take a look at an example. The
.button class (in our rendition of Fortitude) contains the following:
transition: all .1s ease-in-out;
You'll notice there are no visual rules (like
border, etc.) defined on this base
Instead, it only contains the core structural scaffold for what all buttons will share.
.button--primary, however, is a different story. Using
we know that
.button--primary is a modifier of
.button, so it will contain the visual aspects of a
particular kind of button.
To render this type of button, we would add both the
.button--primary to our
element. This will give it both the structure of
.button, as well as the visual styling of
%button.button.button--primary My button
By George, we have a button!
You may be asking yourself, why are we adding all of these classes just to get a simple button?
We separate the visual aspects of a component in these modifying classes (like
that we can infinitely extend our primary
.button without continuing to repeat all the core building
blocks over and over again. In addition, if later on down the road we change a structural aspect of how
.button is layed out, we only need to change the one
With so many classes, we can rapidly prototype without ever writing CSS.
There is a learning curve to memorizing all of the helpers and components, but once fluent you can move very fast.
Over time we sculpt the scattered markup into more robust, reusable components.
Each page has its own sandbox with at least a few handy styles for DRYing up markup are declared.