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.

Heads up! This alert needs your attention, but it’s not super important. Basically just an FYI for you…

Well done! You successfully read this important alert message, award yourself a hug.

Alert! Alert! Something might be about to happen so you have to make some decisions now. Not critical decisions, but decisions nonetheless. For more details click our placeholder anchor.

Well done! You successfully read this important alert message.

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
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>

Navigation

The basic .nav pattern class throws elements inline, sets the project-defined $font-weight and $font-family values.

Home
Menu
Drinks
Meat

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu</a></li>
  <li class="active">Drinks</li>
  <li><a href="#">Meat</a></li>
</ul>

Optional section-specific classes target the element that represents the primary navigaton element, a specific section of your web page.

[role='navigation'] {

}

.nav--primary {

}

Breadcrumb

Indicate the current page location within the navigational hierarchy.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

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.

Example HTML

  <img class="img--left" src="/embrace/img/320px/embrace.jpeg" alt="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.

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.

Example HTML

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

Design Patterns

Example HTML

Button colours

Active state

Disabled state

Button sizing

Example HTML

Padded grids

Example HTML

Nested grids

Styled Lists

Underlined Lists

Unstyled Lists

Inline Lists

Example HTML

Rounded images

Example HTML

Circular images

Example HTML

Floated Images

Example HTML

Example HTML

Image sizing

Example HTML

Retina-squish

Example HTML