Utilities

Utilities give us a way to build elements in a more atomic, reusable way. We can separate common modifiers (like margin and individual typography styles) into their own single-purpose declarations that can be reused generically across any element.

Expect this section to grow in future versions of Enterprise.

Backgrounds

Application of backgrounds to certain elements may affect spacing or child element color. As such, it's being housed here.

.has-background-primary
Background for most content.
.has-background-secondary
Background mainly reserved for personalized content.

.clearfix

Clear floats by adding .clearfix to the parent element. Based on Nicolas Gallagher's micro clearfix hack.

Inline Titles

For titles or headings where direct child elements would ideally appear inline instead of as block elements. Can be used in cases where children are different types of elements (headings, spans, etc).

Main Title

Followed by a subtitle

Order #: 393826749
 <header class="has-inline-titles">
   <h1>Main Title</h1>
   <h2 class="title-3">Followed by a subtitle</h2>
   <span>Order #: 393826749</span>
 </header>