Flow and rhythm in CSS with Stalfos

— 3 minute read

Something I’ve tried to improve in my CSS work is the implementation of consistent flow and rhythm, while keeping the footprint as low as possible.

It’s really useful to have these sort of components available to you when you are working with pattern / component libraries and style guides to build out your UI views.

I’ve been using the lobotomised owl technique for quite some time now. This is a wildcard selector that adds space between direct child elements and their siblings. It looks something like this:

> * + * { 
    margin-top: 20px; 

This is great because it only adds space to every direct sibling of an element. This means that the first element won’t have any space added to it, which prevents the use of tricks such as a negative margin applied to the parent to reduce over-spacing. It also means that the margin setting won’t leak into deeper child elements such an <li>.

A new component is born permalink

Inspired by tachyons, I’ve been trying to abstract often repeated CSS into utility components. In Stalfos, this methodology has been applied to the chunk, breathe and size components already.

I decided to add a new one to the collection called flow. Let’s take a look at how it works.

Rhythm metrics permalink

A new metric unit powers flow. It’s called $rhythm. Like with some of the other units in Stalfos, it has the mini, double and treble modifiers too.

The power of maps and loops permalink

The component itself is pretty simple. Using Sass maps, the two directions and the spacing property are defined at the top. The component then proceeds to generate the spacing CSS by starting a loop.

Inside this loop, each size modifier is looped to generate the modified versions of each direction class. This will result in available selectors such as flow-vertical--double.

The component in practice permalink

In this Codepen example, the flow component is demonstrated with both directions and a couple of the size modifiers. Notice how most of the surrounding layout is powered by flow component too.

Hopefully this little component will help you in developing lightweight, component driven UI. Any feedback will be greatly appreciated too!

Update: Stalfos isn't maintained anymore, but my quest to solve vertical rhythm continues. I'm currently working with a CSS custom properties approach which I hope to write about soon.

Hi 👋, I’m Andy — an educator and web designer

I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.

Sign up for updates