Assembly.css

Classes and modifier classes

A double-hyphen in a class name (e.g. border--blue) indicates that the class is a modifier class. A modifier class extends the class whose name precedes the double-hyphen (e.g. border--blue modifies border; flex-child--grow modifies flex-child). And modifier classes should only ever be used in combination with the class they modify: modifier classes will not work well on their own.

6 pixel baseline grid

Every element in Assembly is designed according to a 6 pixel baseline grid, even buttons and form components. Baseline grids don't just make your site look and feel better: they also make development more convenient. All the pieces naturally fit together without fiddling with line height or vertical alignment.

No default styling for semantic elements

You should use <h3> for third-level headings, not because you want a certain style. Similarly, you should use <button> when a button is behaviorally and semantically appropriate, instead of href-less <a> tags or other elements with click handlers.

Assembly's reset allows you to use semantically appropriate HTML without battling browser-default styles. And its CSS rules are built to behave the same regardless of which element they're applied to. A heading style, or a button style, can be applied to any element by applying the appropriate classes.

Customizable icons

Assembly comes with more than 150 icons, intended to be used as inline SVGs. Inline SVGs are easy to resize and color.

Media queries are mobile-first

Mobile-first media queries lead to cleaner code because there are fewer overrides. Start with a simple mobile layout, then add complexity with additional media-constrained rules. Assembly uses the following media queries:

Classes that take affect within certain media queries always end with a -m<size> suffix, where "size" is m, l, or xl.

Utility classes have maximum specificity

Assembly uses !important on declarations whose effect directly corresponds to a class name.

For example, in the .bg-blue rule, the background-color declaration is !important. On the .pl20 rule, the padding-left declaration is !important. This ensures that such classes always behave the same. Whenever you see the class bg-blue on an element, that element should have a blue background, regardless of its context and the other rules that apply to it.

For dynamic styles, responsive classes (described above) provide some additional flexibility. But if you need even more, you should use custom CSS instead of a utility class.

More intuitive box model

The border-box box model allows for more intuitive styling than the default content-box model. For example, when you set a w360 class, your element will always be 360 pixels wide, regardless of its padding and borders.

is-active applies active states

Assembly uses the is-active state class to designate that an element is active and style it accordingly.

The is-active state on buttons and links darkens their color. And the *-on-active state classes (e.g. only color-red-on-active) only take effect when combined with the is-active class.

Focus outlines as needed

Assembly turns off focus outlines when you mousedown and turns them back on, universally, when you hit Tab. This means that only the keyboard users who need them will see nice, prominent focus outlines, while mouse users won't have the design disturbed unnecessarily.