Pattern Library First: An Approach for Managing CSS

A presentation at Smashing Conference in in Toronto, ON, Canada by Rachel Andrew

Organising CSS in a project can be tricky, especially if you want to create fallbacks for newer CSS such as Grid Layout, fallbacks which can rely on your CSS being in a particular order to take advantage of the cascade.

The solution is to develop a pattern library first, to create structured components which can then be compiled into a stylesheet before deployment. And, by making the Pattern Library your build environment — it remains the source of truth, never becoming separate from the CSS deployed on the site.

In this talk, I will be looking at some interesting Grid Layout tricks, in the context of a real-life pattern library built using Fractal. I’ll show you how to structure components, in order to create robust fallbacks for older browsers while fully taking advantage of things that would be impossible without Grid.


The following resources were mentioned during the presentation or are useful additional information.