Atomic Sass Framework

This is an outline of the framework that I discussed in The Other Interface. The aim is to decrease the complexity of making large design systems with Sass by scoping similar styles together.

:warning: This framework is not production ready. :warning:

It’s simply an example and isn’t intended to be used on live projects, although you’re certainly free to extend the ideas contained within and make them more awesome.

Control panel

Simply imports all of the utilities, quarks, atoms and molecules into a single stylesheet so that developers can quickly scan it and get a general overview of the system.

Utilities

The basic plumbing of the website; global classes, mixins and styles that can be used anywhere and at any time. For example if we need to use color variables throughout the site, then this is the directory that we would place that code.

Quarks

Styles reserved for default HTML elements only. Default paragraphs, links, lists and micros such as i and em. Style guide stuff.

Atoms

CSS objects that can be extended from and into other elements of the site. Think of these ase the default relationships that can be used again and again without bloating the codebase.

Molecules

Sometimes we need one-off structures, such as a banner or navigation element or footer, that we don’t intend to replicate. This is where we can combine multiple quarks and atoms, without interfering with any of our global styles.

Acknowledgements

• Harry Roberts + the Inuit.css framework
• Brad Frost + his article about atomic design
• Allen Tan + his thoughts from Contents Magazine
• Nicole Sullivan + her talk at Webstock called CSS tools for massive websites
• Nicholas Gallagher + his thoughts on idiomatic CSS