Organising Sass modules into quarks, atoms and molecules
Switch branches/tags
Nothing to show
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
atoms More documentation fixes Aug 30, 2013
molecules More documentation fixes Aug 30, 2013
quarks Organised components Aug 30, 2013
utilities Organised components Aug 30, 2013
.gitignore Organised components Aug 30, 2013
LICENSE fixed license Nov 15, 2014
control-panel.scss control panel fix Aug 30, 2013
readme.mdown added warning to readme.mdown Nov 15, 2014


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.

⚠️ This framework is not production ready. ⚠️

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.


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.


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


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.


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.