Design Patterns

These opt-in modules, the goto for custom styling requirements, need only be enabled if they suit your project. Want to style things? You should probably do that here :)

Alerts

Style user-feedback messages using one of the four contextual classes, .alert-success, .alert-info, .alert-warning or .alert-danger.

Optionally, you can also use the .alert-link class to create complementary link colors.

Example HTML

<div class="alert alert--info" role="alert">
  <p>
    <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. Basically just an FYI for you…
  </p>
</div>

Buttons

Use button classes on an <a>, <button>, or button-like <input> elements for consistent cross-browser styling.

Anchor
<div class="btn-group">
  <a class="btn" href="#" role="button">Anchor</a>
  <button class="btn" type="submit">Button</button>
  <input class="btn" type="button" value="Input">
  <input class="btn" type="submit" value="Submit">
</div>

Button colours

Use contextual button classes to quickly create buttons with meaning.

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn--info">Info</button>
<button type="button" class="btn btn--warning">Warning</button>
<button type="button" class="btn btn--success">Success</button>
<button type="button" class="btn btn--danger">Danger</button>

Active state

Buttons will appear pressed when active. For <button> elements, this is done via :active. For <a> elements, it’s done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state.

<button type="button" class="active btn">Default</button>
<button type="button" class="active btn btn--info">Info</button>
<button type="button" class="active btn btn--warning">Warning</button>
<button type="button" class="active btn btn--success">Success</button>
<button type="button" class="active btn btn--danger">Danger</button>

Disabled state

Make buttons look unclickable by reducing opacity and disabling pointer events. by adding a .disabled class to <a> buttons.

<button type="button" class="disabled btn">Default</button>
<button type="button" class="disabled btn btn--info">Info</button>
<button type="button" class="disabled btn btn--warning">Warning</button>
<button type="button" class="disabled btn btn--success">Success</button>
<button type="button" class="disabled btn btn--danger">Danger</button>

Button sizing

Need a bigger button on the odd occasion? Add .btn--lg, or . btn--sm and get proportionally scaled buttons, that don’t nuke your vertical rhythym, automagically.

<p>
  <button type="button" class="btn btn--sm">Small button</button>
</p>

<p>
  <button type="button" class="btn btn--lg">Large button</button>
</p>

You can make any button span the full width of its parent element by adding .btn btn--natural.

<button type="button" class="btn btn--lg btn--natural">Block level button</button>

Grid

Create complex, responsive, grid layouts effortlessly. Define a grid container with the .grid class and populate it with any number of .grid-item elements. Simples.

Define the width of your grid items in your CSS, to keep stylistic markup out of your html, or attach responsive width utility classes to your .grid-item elements. There is no need to define grid rows, or to clearfix anything, just grid-n’-go!

* The demo leans on the .alert class to provide styling. It’s not required so not included in the markup examples.

Example HTML

<div class="grid">

  <div class="grid-item one-half"></div>
  <div class="grid-item one-half"></div>

  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>

  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>

  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>

  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
</div>

Padded grids

Create horizontal gutters between your grid items with the add-on class .grid--padded.

Example HTML

<div class="grid grid--padded">
  <div class="grid-item one-half"></div>
  <div class="grid-item one-half"></div>

  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>

  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
</div>

Nested grids

Want more than six-columns in your regular grid? No problem, grids are nestable. Just nest a new .grid inside a .grid-item, as in this example where a nine-column grid is constructed using the width class .one-third.

<div class="grid">
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
    </div>
  </div>
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
    </div>
  </div>
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
    </div>
  </div>
</div>

Lists

Embrace’s default list styles can optionally be extended with these styling classes.

Styled Lists

Apply your projects default list style with the class .list--styled. Tweak, or expand upon, this class to fit your project. Add your own styles or modify these at /src/scss/patterns/lists.scss.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
<ul class="list--styled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>

Underlined Lists

An alternate list styling class is also provided with .list--underlined, which does what you would expect…

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
<ul class="list--underlined">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>

Unstyled Lists

Remove default list styles with .list--unstyled, and make your list not look like a list.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
<ol class="list--unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ol>

Inline Lists

Force list elements to display inline with .list--inline. Don’t use this class for navigation lists though, use .nav instead as it @extends .list--inline and additionaly provides finger-sized tap-targets and stuff.

  • Lorem
  • Ipsum
  • Dolor
  • Sit
<ul class="list--inline">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
</ul>

Headings

Apply the style of a semantic header element to any other element. Looks like a header visually, but carries none of the semantic value.

.h1

.h2

.h3

.h4

.h5

.h6

Example HTML

<p class="h1">.h1</p>
<p class="h2">.h2</p>
<p class="h3">.h3</p>
<p class="h4">.h4</p>
<p class="h5">.h5</p>
<p class="h6">.h6</p>

Images

Manipulate image positioning and appearance with these extensible classes.

Photo courtesy of freestocks.org and found via Unsplash.

Rounded images

Round the corners of an image with the project variable $radius-brand.

A warm embrace

Example HTML

<img class="img--rounded" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">

Circular images

Make square images circular. That’s it.

A warm embrace

Example HTML

<img class="img--circular" src="/embrace/img/320px/embrace-square.jpeg" alt="A warm embrace">

Floated Images

Float images to the left or right, extending the .float-left and .float-right utility classes, but adding sensible margins to prevent collisions with content. You may wish to .clearfix the parent element, feel free to do so.

A warm embrace

Example HTML

  <img class="img--left" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">
  
A warm embrace

Example HTML

  <img class="img--right" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">
  

Image sizing

Make images to cover the parent element to give a background image effect.

A warm embrace

Example HTML

<img class="img--cover" src="/embrace/img/640px/embrace.jpeg" alt="A warm embrace">

Retina-squish

Reduce an image size using width classes to ”retina-fy” your image by squishing it into a smaller container! Just wrap an image in any block-level element and resize it with Embrace’s width classes.

A warm embrace

Example HTML

<figure class="one-third">
  <img class="img--cover" src="/embrace/img/640px/embrace.jpeg" alt="A warm embrace">
</figure>