Base

Everything is built on top of normalize.css to help render elements consistently across browsers.

HTML5 doctype

We use HTML elements and CSS properties that require an HTML5 doctype – so be sure to include it as part of your core layout.

<!DOCTYPE html>
<html lang="en">
<!-- site content here -->
</html>

Viewport

Your base layout should also include a viewport meta element.

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Box Sizing

We also use border-box as the default box-sizing, which all elements inherit by default.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

This method allows us to inherit the box sizing on all elements, while still allowing us to override it for components that were originally built with the context-box in mind.

.component {
  /* We can override the default setting here  */
  /* which will cascade down to child elements */
  box-sizing: content-box;
}

Layouts

Container

Center page content with a .container class. This container will automatically take up the full width of the screen up to 1200px. The default width can be overwritten by the $container-width sass variable.

<div class="container">
  <!-- contents to be centered -->
</div>

Grid

The grid is a pretty standard 12 column responsive grid – you create a wrapper .grid with individual columns. Columns are placed using inline-block instead of floats which allows for a little bit cleaner markup and an easier way to handle certain layouts at smaller viewports.

Since we’re setting the box sizing to border-box, the grid sizes can include the gutters as part of the column instead of trying to perform complex margin calculations. The size of the gutters can be adjusted by changing the $grid-gutters sass variable.

.col-4

.col-8

.col-3

.col-9

.col-2

<div class="grid">
  <div class="col-4">.col-4</div>
  <div class="col-8">.col-8</div>
  <div class="col-3">.col-3</div>
  <div class="col-9">.col-9</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
</div>

Heads Up! To collapse white space between grid columns, the font-size for grids is set to 0, then reset back to 1rem for each individual columns. Font sizes will not inherit from parents outside of the grid, and will need to be adjusted for components inside each grid cell.

Column Alignment

Columns can be centered by adding a .center class to the column.

Centered

Columns

<div class="grid center">
  <div class="col-4">Centered</div>
  <div class="col-4">Columns</div>
</div>

You can also left or right align columns by adding a .left or .right class respectively.

.col-2

.col-3

<div class="grid right">
  <div class="col-2">.col-2</div>
  <div class="col-3">.col-3</div>
</div>

.col-2

.col-3

<div class="grid left">
  <div class="col-2">.col-2</div>
  <div class="col-3">.col-3</div>
</div>

You can also adjust the vertical alignment of grid columns with .top, .middle, or .bottom. By default grid columns will be aligned across the top of the grid rows.

Big column

Small column

<div class="grid middle">
  <div class="col-6"><h1>Big column</h1></div>
  <div class="col-6"><small>Small column</small></div>
</div>

Responsive Grids

Heads Up! You responsive layouts should ideally be based on the context of your content, and not the device. The classes provided below are simply helpers to quickly iterate.

Out of the box, responsive breakpoints are determined from the $responsive-breakpoints sass map.

// Default responsive breakpoints for grid and utilities
$responsive-breakpoints: (
  sm: 800px,
  md: 1000px,
  lg: 1200px
) !default;

Grids are built from the bottom up, starting out from small widths to larger widths – allowing you to size the grid columns differently based on your content.

	All sizes	Small size (≥ 800px)	Medium size (≥ 1000px)	Large size (≥ 1200px)
Class Prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`

The columns below will stack for sizes less than 800px, while turning into a 3-column layout for anything 800px and up.

col 1

col 2

col 3

<div class="grid">
  <div class="col-12 col-sm-4">col 1</div>
  <div class="col-12 col-sm-4">col 2</div>
  <div class="col-12 col-sm-4">col 3</div>
</div>

Typography

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

<h1>h1. Heading</h1> <!-- 24px -->
<h2>h2. Heading</h2> <!-- 20px -->
<h3>h3. Heading</h3> <!-- 16px -->
<h4>h4. Heading</h4> <!-- 14px -->
<h5>h5. Heading</h5> <!-- 12px -->
<h6>h6. Heading</h6> <!-- 12px -->

For headings, we’re using sass placeholders to set the appropriate font size for our headings. If you need to match a heading size with a particular element, you can do so by using @extend along with the placeholder name.

.my-element {
  @extend %h3;
}

Unordered Lists

A list where the order of the items doesn’t matter.

Bacon
Ham
Loin
Shoulder
- Pork Belly
- Spare Ribs
- Baby Back Ribs
Pork Chop

<ul>
  <li>Bacon</li>
  <li>Ham</li>
  <li>Loin</li>
  <li>Shoulder
    <ul>
      <li>Pork Belly</li>
      <li>Spare Ribs</li>
      <li>Baby Back Ribs</li>
    </ul>
  </li>
  <li>Pork Chop</li>
</ul>

Ordered Lists

A list where the order of the items does matter.

Bacon
Ham
Loin
Shoulder
1. Pork Belly
2. Spare Ribs
3. Baby Back Ribs
Pork Chop

<ol>
  <li>Bacon</li>
  <li>Ham</li>
  <li>Loin</li>
  <li>Shoulder
    <ol>
      <li>Pork Belly</li>
      <li>Spare Ribs</li>
      <li>Baby Back Ribs</li>
    </ol>
  </li>
  <li>Pork Chop</li>
</ol>

Styled Text

You can style inline text elements.

This text is ~~striked~~

This text is strong

This text is emphasized

This text is underlined

This text is small

<p>This text is <s>striked</s></p>
<p>This text is <strong>strong</strong></p>
<p>This text is <em>emphasized</em></p>
<p>This text is <u>underlined</u></p>
<p>This text is <small>small</small></p>

Buttons

Buttons are typically used for actions, while links are typically used for destinations.

Default Buttons

Standard buttons are easy – just use a .btn class! You can apply this class to both <button> and <a> elements and they will both appear exactly the same.

When using a <button> element, always specify the type. When using an <a> element, always include role="button" for accessibility.

Link Button

<button type="button" class="btn">Button Button</button>
<a class="btn" href="javascript:void(0)" role="button">Link Button</a>

Buttons come in two sizes, big and small. Just add a .btn-mini to use the smaller variation.

<button type="button" class="btn">Normal Button</button>
<button type="button" class="btn btn-mini">Small Button</button>

Secondary buttons can be used as a muted form of the normal button. Just add a .btn-secondary class to your button, and you’re good to go!

<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-mini btn-secondary">Small Secondary Button</button>

Primary

Primary buttons are used to indicate a primary action, such as a form save. Just add a .btn-primary class to your button, and you’re good to go!

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-mini btn-primary">Small Primary Button</button>

Success

Success buttons are used to indicate a positve action, such as choosing yes to a yes or no prompt. Just add a .btn-success class to your button, and you’re good to go!

<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-mini btn-success">Small Success Button</button>

Danger

Welcome to the danger zone. Danger buttons are red, indicating that the following action may do something potentially dangerous. Just add a .btn-danger.

<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-mini btn-danger">Small Danger Button</button>

Button Links

Button links allow you to place buttons that de-emphasize its button appearance, and look more like a link while still maintaining the same vertical text alignment with other buttons.

Button Link

<a href="javascript:void(0)" class="btn btn-link">Button Link</a>
<button type="button" class="btn">Normal Button</button>

Disabled

<button> elements can be disabled with the disabled attribute, and <a> elements with the .disabled class.

Link

<button type="button" class="btn" disabled>Button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-primary" disabled>Button</button>
<button type="button" class="btn btn-success" disabled>Button</button>
<button type="button" class="btn btn-danger" disabled>Button</button>
<a href="javascript:void(0)" class="btn-link btn disabled" role="button">Link</a>

Loader

<button> elements can also contain a loding icon when necessary

<button type="button" class="btn" disabled><div class="loader"></div></button>
<button type="button" class="btn btn-secondary" disabled><div class="loader"></div></button>
<button type="button" class="btn btn-primary" disabled><div class="loader"></div></button>
<button type="button" class="btn btn-success" disabled><div class="loader"></div></button>
<button type="button" class="btn btn-danger" disabled><div class="loader"></div></button>
<a href="javascript:void(0)" class="btn-link btn disabled" role="button"><div class="loader"></div></a>

Button Groups

Buttons can also be combined into button groups. Wrap them with a .btn-group class and your buttons will automatically be displayed with the correct spacing.

<div class="btn-group">
  <button class="btn">Button</button>
  <button class="btn">Button</button>
  <button class="btn">Button</button>
</div>

<div class="btn-group">
  <button class="btn btn-mini">Mini Button</button>
  <button class="btn btn-mini">Mini Button</button>
  <button class="btn btn-mini">Mini Button</button>
</div>

Button groups can also use all of the available button colors

<div class="btn-group">
  <button class="btn">Button</button>
  <button class="btn">Button</button>
  <button class="btn">Button</button>
</div>
<br/>
<div class="btn-group">
  <button class="btn btn-secondary">Button</button>
  <button class="btn btn-secondary">Button</button>
  <button class="btn btn-secondary">Button</button>
</div>
<br/>
<div class="btn-group">
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
</div>
<br/>
<div class="btn-group">
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
</div>
<br/>
<div class="btn-group">
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
</div>
<br/>
<div class="btn-group">
  <button class="btn btn-link">Button</button>
  <button class="btn btn-link">Button</button>
  <button class="btn btn-link">Button</button>
</div>

Block Buttons

You can make any button take up the full width of its container by adding a .btn-block class.

<button class="btn btn-block">Button</button>
<button class="btn btn-mini btn-block">Mini Button</button>

Tables

Since so many different components use tables for layout, we don’t want to override any default styles that may come with those components. The use of styled tables are opt-in by adding a .table class to any table.

Basic Table

Room Name	Color	Extension
Red Velvet	#ee264e	x0715
Banana Pudding	#efad1c	x0713
Key Lime	#b3ba5a	x0712
Cotton Candy	#a5dbd8	x0714

<table class="table">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Color</th>
      <th>Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red Velvet</td>
      <td>#ee264e</td>
      <td>x0715</td>
    </tr>
    ...
  </tbody>
</table>

Bordered

Need some borders around your table? Add .table-bordered.

Room Name	Color	Extension
Red Velvet	#ee264e	x0715
Banana Pudding	#efad1c	x0713
Key Lime	#b3ba5a	x0712
Cotton Candy	#a5dbd8	x0714

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Color</th>
      <th>Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red Velvet</td>
      <td>#ee264e</td>
      <td>x0715</td>
    </tr>
    ...
  </tbody>
</table>

Hover Rows

You can also enable hover state on table rows with a .table-hover class.

Room Name	Color	Extension
Red Velvet	#ee264e	x0715
Banana Pudding	#efad1c	x0713
Key Lime	#b3ba5a	x0712
Cotton Candy	#a5dbd8	x0714

<table class="table table-hover">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Color</th>
      <th>Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red Velvet</td>
      <td>#ee264e</td>
      <td>x0715</td>
    </tr>
    ...
  </tbody>
</table>

Condensed

Need to save some space? You can make tables more compact by adding .table-condensed.

Room Name	Color	Extension
Red Velvet	#ee264e	x0715
Banana Pudding	#efad1c	x0713
Key Lime	#b3ba5a	x0712
Cotton Candy	#a5dbd8	x0714

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Color</th>
      <th>Extension</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red Velvet</td>
      <td>#ee264e</td>
      <td>x0715</td>
    </tr>
    ...
  </tbody>
</table>

Forms

Example Form

By default, forms don’t have a standard layout. You will need to use one of the below layout patterns to organize your forms.

<form>
  <label>Name</label>
  <input type="text"/>
  <label>Phone Number</label>
  <input type="tel"/>
  <button type="submit" class="btn">Submit</button>
</form>

Form Styling

Form styling can be applied using the <form> tag or by using the <div class="form"> class instead.

NamePhone Number

<form>
  <label>Name</label>
  <input type="text"/>
  <label>Phone Number</label>
  <input type="tel"/>
  <button type="submit" class="btn">Submit</button>
</form>
<br/>
<div class="form">
  <label>Name</label>
  <input type="text"/>
  <label>Phone Number</label>
  <input type="tel"/>
  <button type="submit" class="btn">Submit</button>
</div>

Inputs

We style the most common text-based input fields, including text, password, email, number, tel, url, date, search, datetime, time, and date.

Inputs will only be styled with valid type attributes. You must include this!

<input type="text" placeholder="text input" />

Selects

Selects also have have some of their basic styles overwritten to match the style of inputs.

Note: We can’t style the select caret in IE9, so the native implementation will appear there.

<select>
  <option>Apple</option>
  <option>Banana</option>
  ...
</select>

Textarea

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate tempore commodi, minima quia reprehenderit. Saepe aperiam cum fugiat ullam, autem quasi minima ipsam quo, a nihil eum fugit, vel velit.

<textarea>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</textarea>

Input Sizing

Like buttons, there are two sizes of inputs. Just add .input-mini to use the smaller variation.

<input type="text" placeholder="text input"/>
<input type="text" placeholder=".input-mini" class="input-mini" />
<select>
  <option>Apple</option>
  <option>Banana</option>
  ...
</select>
<select class="input-mini">
  <option>Apple</option>
  <option>Banana</option>
  ...
</select>

You can also make form elements take up the full width of its container element with .input-block.

<input type="text" class="input-block"/>

Input Grouping

You can group inputs with text add-ons with .add-on, or buttons with .add-on-btn.

@ @

<div class="grid">
  <div class="col-4">
    <div class="input-group">
      <span class="add-on">@</span>
      <input type="text" placeholder="username" />
    </div>
  </div>
  <div class="col-4">
    <div class="input-group">
      <input type="text" />
      <span class="add-on">@</span>
    </div>
  </div>
  <div class="col-4">
    <div class="input-group">
      <span class="add-on">@</span>
      <input type="text" />
      <span class="add-on">@</span>
    </div>
  </div>
</div>
<br/>
<div class="grid">
  <div class="col-4">
    <div class="input-group">
      <span class="add-on-btn">
        <button type="button" class="btn">Go!</button>
      </span>
      <input type="text"/>
    </div>
  </div>
  <div class="col-4">
    <div class="input-group">
      <input type="text"/>
      <span class="add-on-btn">
        <button type="button" class="btn">Go!</button>
      </span>
    </div>
  </div>
  <div class="col-4">
    <div class="input-group">
      <span class="add-on-btn">
        <button type="button" class="btn">Go!</button>
      </span>
      <input type="text"/>
      <span class="add-on-btn">
        <button type="button" class="btn">Go!</button>
      </span>
    </div>
  </div>
</div>

Inline Forms

Layout your forms inline with .form-inline. This will ensure that a form is displayed inline.

<form class="form-inline">
  <label>Name</label>
  <input type="text"/>
  <label>
    <input type="checkbox" name="inline-check" /> Checked
  </label>
  <label>Phone Number</label>
  <input type="tel"/>
  <button type="submit" class="btn">Submit</button>
</form>

Horizontal Forms

Layout your forms horizontally with .form-horizontal. You can group form labels and controls with .control-group and contain checkboxes or radio buttons with a .controls element.

<form class="form-horizontal">
  <fieldset>
    <legend>You Must Answer These Questions Three</legend>
    <div class="control-group">
      <label for="name">Name</label>
      <div class="controls">
        <input id="name" type="text" />
      </div>
    </div>
    ...
          </select>
      </div>
    </div>
    <div class="control-group">
      <label for="quest">Favorite Colors</label>
      <div class="controls">
        <label>
          <input type="checkbox" name="color" /> Red
        </label>
        <label>
          <input type="checkbox" name="color" /> Blue
        </label>
        <label>
          <input type="checkbox" name="color" /> Green
        </label>
        <label>
          <input type="checkbox" name="color" /> Yellow
        </label>
      </div>
    </div>
    <!-- /... -->
    <div class="control-group">
      <label>Favorite Color</label>
      <div class="controls">
        <label>
          <input type="radio" name="color" /> Blue
        </label>
        ...
      </div>
    </div>
  </fieldset>
</form>

Grid Layout

For more complex layouts, we recommend you use the grid. Input widths will automatically take up the full width of the grid column.

<form>
  <fieldset>
    <legend>Address</legend>
    <div class="grid">
      <div class="col-4">
        <label>
          Address 1
          <input type="text" />
        </label>
      </div>
      <div class="col-4">
        <label>
          Address 2
          <input type="text" />
        </label>
      </div>
    </div>
    <div class="grid">
      <div class="col-3">
        <label>
          City
          <input type="text" />
        </label>
      </div>
      <div class="col-2">
        <label>
          State
          <select>
            ...
          </select>
        </label>
      </div>
      <div class="col-1">
        <label>
          Zip
          <input type="text"/>
        </label>
      </div>
      <div class="col-6">
        <label>
          <input type="checkbox"/> Default Address
        </label>
      </div>
    </div>
  </fieldset>
</form>

Utilities

There’s a handful of utility classes available for quick alignment, display, and more.

Floats

Float an item left or right with .pull-left or .pull-right. You can also optionally wrap them with a .cf, depending on your layout.

.pull-left .pull-right

<div class="cf">
  <code class="pull-left">.pull-left</code>
  <code class="pull-right">.pull-right</code>
</div>

Hiding elements

Elements can be hidden with a .hide class. This will hide the element for both visual and screen readers.

<p class="hide">You can't see me!</p>

If you need to hide an element for visual, but not for screen readers you can use .sr-only instead.

<p class="sr-only">Only screen readers can see me!</p>

Responsive Display Utilities

You can also hide and display elements responsively by using .hide-* or .display-* utility classes.

	All sizes	Small size (≥ 800px)	Medium size (≥ 1000px)	Large size (≥ 1200px)
Hide	`.hide`	`.hide-sm`	`.hide-md`	`.hide-lg`
Display Inline	`.display-inline`	`.display-sm-inline`	`.display-md-inline`	`.display-lg-inline`
Display Block	`.display-block`	`.display-sm-block`	`.display-md-block`	`.display-lg-block`
Display Inline-Block	`.display-inline-block`	`.display-sm-inline-block`	`.display-md-inline-block`	`.display-lg-inline-block`

Sticky

You can make any element sticky, with a .sticky class. The element will remain stuck to the viewport until the positioning specified exceeds its closest relative container.

Sticky Element

<div class="sticky-container">
  <span class="sticky">Sticky Element</span>
</div>

Text Alignment

Change the way text is aligned in an element with its respective class.

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>