Atomic Design

The patterns in this pattern library are built according to Atomic Design principles. Essentially this means that instead of building pages from the top down, we start with the smallest parts (e.g. buttons, text, input fields) and build from the bottom up.

Pattern Lab keeps track of the relationship between patterns. This makes it easy to predict how changes to one pattern will affect other patterns.

Each pattern is self-contained. CSS from one pattern should never affect another pattern. The same goes for JavaScript.

BEM/SUIT

We follow a BEM/SUIT-like naming convention. We have five types of classes. The first three are

• Block (Capitalized)
• Element (prefixed with the Block name)
• Modifier (prefixed with the Block name or Element name)

The naming convention we use for these looks like this: Block__element--modifier

Capitalizing the Block prevents the CSS from conflicting with class names in Origin.

We have two additional types that do not follow the BEM naming convention:

• State (prefixed with state-)
• Utility (prefixed with u-)

States are typically used together with a BEM class: .Block__element.state-open

but can sometimes be used on their own: .state-hidden

Utility classes are general helper classes and are used when modifiers would become too inpractical: .u-nowrap