This is not a 1.0 release. Things are moving at a fast pace, please note you might have some refactoring to do using this code.

Badge

Badges are a way to display a small amount of text or an image within a nicely formatted box.

Extensions

Class Description
badge--small A small badge
badge--large A large badge
badge--pill A pill badge
badge--default A basic badge
badge--primary A badge for primary information
badge--success A badge for success information
badge--info A badge for sidenote information
badge--warning A badge for warning information
badge--danger A badge for destructive information
badge--inverse A basic badge
Small Large Pill Default Primary Success Info Warning Danger Inverse
<strong class="badge badge--small badge--default">Small</strong>
<strong class="badge badge--large badge--default">Large</strong>
<strong class="badge badge--pill badge--default">Pill</strong>
<strong class="badge badge--default">Default</strong>
<strong class="badge badge--primary">Primary</strong>
<strong class="badge badge--success">Success</strong>
<strong class="badge badge--info">Info</strong>
<strong class="badge badge--warning">Warning</strong>
<strong class="badge badge--danger">Danger</strong>
<strong class="badge badge--inverse">Inverse</strong>

Bare List

Bare Lists are unstyled lists.

  • One
  • Two
  • Three
  • Four
<ul class="bare-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Box

The box object allows you to separate different sections of content, and through extensions customize things like background colors and border styles.

Extensions

Class Description
box--rounded A box with rounded corners
box--default A basic box
box--primary A box for primary information
box--success A box for success information
box--info A box for sidenote information
box--warning A box for warning information
box--danger A box for destructive information
box--inverse A basic box

Rounded

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

Inverse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!

<div class="box box--rounded box--styleguide xs-p2">
  <h1 class="xs-mb1">Rounded</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--default xs-p2">
  <h1 class="xs-mb1">Default</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--primary xs-p2">
  <h1 class="xs-mb1">Primary</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--success xs-p2">
  <h1 class="xs-mb1">Success</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--info xs-p2">
  <h1 class="xs-mb1">Info</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--warning xs-p2">
  <h1 class="xs-mb1">Warning</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--danger xs-p2">
  <h1 class="xs-mb1">Danger</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>
<div class="box box--inverse xs-p2">
  <h1 class="xs-mb1">Inverse</h1>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    Commodi pariatur culpa earum!
    Qui autem totam cum porro minus iusto,
    sint consequatur odit voluptatem velit aliquam dolorum dolorem ut,
    repellendus hic!
  </p>
</div>

Button

The button object should be used for actions that will cause any significant change to data or interactions in your app.

Extensions

Class Description
button--small A small button
button--large A large button
button--default A basic button
button--primary A button for primary information
button--success A button for success information
button--info A button for sidenote information
button--warning A button for warning information
button--danger A button for destructive information
button--inverse A basic button
<button class="button button--small button--default">Small</button>
<button class="button button--large button--default">Large</button>
<button class="button button--pill button--default">Pill</button>
<button class="button button--default">Default</button>
<button class="button button--primary">Primary</button>
<button class="button button--success">Success</button>
<button class="button button--info">Info</button>
<button class="button button--warning">Warning</button>
<button class="button button--danger">Danger</button>
<button class="button button--inverse">Inverse</button>

Colors

Colors are set in the $colors map in your theme stylesheets. Here we are using colors from the default Fortitude theme, available in fortitude/theme/settings/colors

<div class="layout">
  <div class="layout__item sm-3of12">
    <ul class="colors">
      <li class="color color--black"></li>
      <li class="color color--gray-darker"></li>
      <li class="color color--gray-dark"></li>
    </ul>
  </div><div class="layout__item sm-3of12">
    <ul class="colors">
      <li class="color color--gray"></li>
      <li class="color color--gray-light"></li>
      <li class="color color--gray-lighter"></li>
    </ul>
  </div><div class="layout__item sm-3of12">
    <ul class="colors">
      <li class="color color--white"></li>
      <li class="color color--blue"></li>
      <li class="color color--green"></li>
    </ul>
  </div><div class="layout__item sm-3of12">
    <ul class="colors">
      <li class="color color--teal"></li>
      <li class="color color--yellow"></li>
      <li class="color color--red"></li>
    </ul>
  </div>
</div>

Inline List

The inline-list object is used for horizontal lists.

  • One
  • Two
  • Three
  • Four
<ul class="inline-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Inputs

The input object is used for forms

<div class="field xs-mb1">
  <label>
    Checkbox Input
    <input type="checkbox" class="checkbox-input" />
  </label>
</div>

<div class="field xs-mb1">
  <label>
    Radio Input
    <input type="radio" class="radio-input" />
  </label>
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Text Input
  </label>
  <input type="text" class="text-input" placeholder="Placeholder" />
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Textarea Input
  </label>
  <textarea class="textarea-input" placeholder="Placeholder"></textarea>
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Select Input
  </label>
  <select class="select-input" data-ft-select-input>
    <option value="" class="placeholder">Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>
<div class="field xs-mb1">
  <label class="xs-block">
    Range Input
  </label>
  <input type="range" class="range-input" />
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Color Input
  </label>
  <input type="color" class="color-input" />
</div>

Full Width Input

If you need a full width input there is the input--full class that can be applied to any input.

<div class="field xs-mb1">
  <label class="xs-block">
    Text Input
  </label>
  <input type="text" class="text-input input--full" placeholder="Placeholder" />
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Textarea Input
  </label>
  <textarea class="textarea-input input--full" placeholder="Placeholder"></textarea>
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Select Input
  </label>
  <select class="select-input input--full" data-ft-select-input>
    <option value="" class="placeholder">Select One</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>
<div class="field xs-mb1">
  <label class="xs-block">
    Range Input
  </label>
  <input type="range" class="range-input input--full" />
</div>

<div class="field xs-mb1">
  <label class="xs-block">
    Color Input
  </label>
  <input type="color" class="color-input input--full" />
</div>

Table

The table object is a set of simple extending classes that should be applied to table elements.

Class Description
table--full make table full width
table--fixed make all columns equal widths

Make sure to use the fortitude-table mixin when using tables to vertically align them in the vertical rhythm grid

.table--vertical-rhythm-example {
  $cell-height: 3rem;
  $border-width: 0.1rem;
  $border-style: "solid"; // this param is optional (default is solid)
  $line-height: 2rem; // this param is optional (default is $fortitude-base-line-height)
  $children: ("thead", "tbody", "tfoot"); // this param is optional (default is ("thead", "tbody", "tfoot"))
  // if you're curious, the children list is needed for compensation in the vertical rhyhtm grid
  // if you'd like this to default to something else change the
  // $fortitude-table-children variable in your `_overrides.scss` file.
  @include fortitude-table($cell-height, $border-width, $border-style, $line-height, $children);
}

Would output to:

.table--vertical-rhythm-example {
  border-style: solid;
  border-width: 0.1rem;
}

.table--vertical-rhythm-example th,
.table--vertical-rhythm-example td {
  border-style: solid;
  border-width: 0.1rem;
  padding: 0.4rem 0.4rem 0.5rem;
}

.table--vertical-rhythm-example tr:last-child td,
.table--vertical-rhythm-example tr:last-child th {
  padding: 0.4rem;
}

.table--vertical-rhythm-example thead + tbody tr:last-child td,
.table--vertical-rhythm-example thead + tbody tr:last-child th {
  padding: 0.4rem 0.4rem 0.5rem;
}

.table--vertical-rhythm-example tbody + tfoot tr:last-child td,
.table--vertical-rhythm-example tbody + tfoot tr:last-child th {
  padding: 0.4rem 0.4rem 0.5rem;
}

.table--vertical-rhythm-example thead + tbody + tfoot tr:last-child td,
.table--vertical-rhythm-example thead + tbody + tfoot tr:last-child th {
  padding: 0.4rem 0.4rem 0.5rem;
}
Column 1 Column 2
Column 1 Column 2
Column 1 Column 2
Column 1 Column 2
<table class="table--vertical-rhythm-example table--full table--fixed">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>

Tabs

The tabs__content object is used to encapsulate the content for individual tabs. See the javascript component for info on how to combine tabs , tabs__content and tabs-navigation to show and hide tabs.

Tabs are display: none by default
Tabs with the --is-shown modifier are display: block
<div class="tabs__content">
  Tabs are <code class="styleguide">display: none</code> by default
</div>

<div class="tabs__content tabs__content--is-shown">
  Tabs with the <code class="styleguide">--is-shown</code> modifier are <code class="styleguide">display: block</code>
</div>

Tabs Navigation

The tabs-navigation object is used for horizontal tab navigations. See the javascript component for info on how to combine tabs , tabs__content and tabs-navigation to show and hide tabs.

Default

<ul class="tabs-navigation">
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link xs-pr1">One</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link xs-pr1">Two</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link xs-pr1">Three</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link xs-pr1">Four</a>
  </li>
</ul>

Fixed

<ul class="tabs-navigation tabs-navigation--fixed">
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link">One</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link">Two</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link">Three</a>
  </li>
  <li class="tabs-navigation__item">
    <a href="javascript: void(0);" class="tabs-navigation__link">Four</a>
  </li>
</ul>

Tooltip

The tooltip Object is used for displaying supporting information on hover of the contained content.

Tooltips in Fortitude do not require any javascript - pure CSS!

<a href="javascript: void(0);" class="tooltip tooltip--top" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!">Top</a>
<a href="javascript: void(0);" class="tooltip tooltip--right" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!">Right</a>
<a href="javascript: void(0);" class="tooltip tooltip--bottom" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!">Bottom</a>
<a href="javascript: void(0);" class="tooltip tooltip--left" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur culpa earum! Qui autem totam cum porro minus iusto, sint consequatur odit voluptatem velit aliquam dolorum dolorem ut, repellendus hic!">Left</a>

Wings

The wings object is used to render text in between two horizontal lines.

Extensions

Class Description
wings--default A basic wings
wings--primary A wings for primary information
wings--success A wings for success information
wings--info A wings for sidenote information
wings--warning A wings for warning information
wings--danger A wings for destructive information
wings--inverse A basic wings

Default

Primary

Success

Info

Warning

Danger

Inverse

<div class="wings wings--default">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Default</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--primary">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Primary</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--success">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Success</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--info">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Info</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--warning">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Warning</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--danger">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Danger</h3>
  <div class="wings__wing"></div>
</div>

<div class="wings wings--inverse">
  <div class="wings__wing"></div>
  <h3 class="wings__text xs-prl2">Inverse</h3>
  <div class="wings__wing"></div>
</div>