Utilities

Grids

Automatic Sizing

<div class="bff-grid">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Automatic Sizing - Column Padding

<div class="bff-grid bff-grid--pull-padded-medium">
	<div class="bff-col bff-p-horizontal--medium">1</div>
	<div class="bff-col bff-p-horizontal--medium">2</div>
	<div class="bff-col bff-p-horizontal--medium">3</div>
</div>

Manual Sizing

<div class="bff-grid bff-grid--pull-padded bff-wrap">
	<div class="bff-col bff-size--1-of-1 bff-p-horizontal--small bff-p-bottom--small">1</div>
	<div class="bff-col bff-size--1-of-2 bff-p-horizontal--small bff-p-bottom--small">2</div>
	<div class="bff-col bff-size--1-of-2 bff-p-horizontal--small bff-p-bottom--small">3</div>
	<div class="bff-col bff-size--3-of-4 bff-p-horizontal--small bff-p-bottom--small">4</div>
	<div class="bff-col bff-size--1-of-4 bff-p-horizontal--small bff-p-bottom--small">5</div>
	<div class="bff-col bff-size--1-of-6 bff-p-horizontal--small bff-p-bottom--small">6</div>
	<div class="bff-col bff-size--1-of-6 bff-p-horizontal--small bff-p-bottom--small">7</div>
	<div class="bff-col bff-size--1-of-6 bff-p-horizontal--small bff-p-bottom--small">8</div>
	<div class="bff-col bff-size--1-of-2 bff-p-horizontal--small bff-p-bottom--small">9</div>
</div>

Horizontal Alignment - Center

<div class="bff-grid bff-grid--align-center">
	<div class="bff-col bff-p-horizontal--small">1</div>
	<div class="bff-col bff-p-horizontal--small">2</div>
	<div class="bff-col bff-p-horizontal--small">3</div>
</div>

Horizontal Alignment - Space

<div class="bff-grid bff-grid--align-space">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Horizontal Alignment - Spread

<div class="bff-grid bff-grid--align-spread">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Horizontal Alignment - End

<div class="bff-grid bff-grid--align-end">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Vertical Alignment - Start

<div class="bff-grid bff-grid--vertical-align-start">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Vertical Alignment - Center

<div class="bff-grid bff-grid--vertical-align-center">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Vertical Alignment - End

<div class="bff-grid bff-grid--vertical-align-end">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Vertical Stretch

<div class="bff-grid bff-grid--vertical-align-stretch">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Vertical Alignment - Item

<div class="bff-grid bff-grid--align-spread">
	<div class="bff-col">1</div>
	<div class="bff-col">2</div>
	<div class="bff-col">3</div>
</div>

Align Item - Center

<div class="bff-grid bff-grid--vertical-align-center bff-grid--align-center">
	<div class="bff-col"></div>
</div>

Align Item - Bump

<div class="bff-grid">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div class="bff-col--bump-left">4</div>
	<div>5</div>
</div>

Order

<div class="bff-grid">
	<div class="bff-large-order-3">1</div>
	<div class="bff-large-order-2">2</div>
	<div class="bff-large-order-1">3</div>
</div>

Frame

If you want your application to fill 100% of the viewport use .bff-grid--frame. It will hide the overflow, and should only be used on the highest level container.

<div class="bff-grid--frame"></div>

Direction - Vertical

<div class="bff-grid bff-grid--vertical">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

Usage

Spacing

Margins

<div class="bff-m-top--none"></div>
<div class="bff-m-top--xxx-small"></div>
<div class="bff-m-top--xx-small"></div>
<div class="bff-m-top--x-small"></div>
<div class="bff-m-top--small"></div>
<div class="bff-m-top--medium"></div>
<div class="bff-m-top--large"></div>
<div class="bff-m-top--x-large"></div>
<div class="bff-m-top--xx-large"></div>
<div class="bff-m-right--none"></div>
<div class="bff-m-right--xxx-small"></div>
<div class="bff-m-right--xx-small"></div>
<div class="bff-m-right--x-small"></div>
<div class="bff-m-right--small"></div>
<div class="bff-m-right--medium"></div>
<div class="bff-m-right--large"></div>
<div class="bff-m-right--x-large"></div>
<div class="bff-m-right--xx-large"></div>
<div class="bff-m-bottom--none"></div>
<div class="bff-m-bottom--xxx-small"></div>
<div class="bff-m-bottom--xx-small"></div>
<div class="bff-m-bottom--x-small"></div>
<div class="bff-m-bottom--small"></div>
<div class="bff-m-bottom--medium"></div>
<div class="bff-m-bottom--large"></div>
<div class="bff-m-bottom--x-large"></div>
<div class="bff-m-bottom--xx-large"></div>
<div class="bff-m-left--none"></div>
<div class="bff-m-left--xxx-small"></div>
<div class="bff-m-left--xx-small"></div>
<div class="bff-m-left--x-small"></div>
<div class="bff-m-left--small"></div>
<div class="bff-m-left--medium"></div>
<div class="bff-m-left--large"></div>
<div class="bff-m-left--x-large"></div>
<div class="bff-m-left--xx-large"></div>
<div class="bff-m-horizontal--none"></div>
<div class="bff-m-horizontal--xxx-small"></div>
<div class="bff-m-horizontal--xx-small"></div>
<div class="bff-m-horizontal--x-small"></div>
<div class="bff-m-horizontal--small"></div>
<div class="bff-m-horizontal--medium"></div>
<div class="bff-m-horizontal--large"></div>
<div class="bff-m-horizontal--x-large"></div>
<div class="bff-m-horizontal--xx-large"></div>
<div class="bff-m-vertical--none"></div>
<div class="bff-m-vertical--xxx-small"></div>
<div class="bff-m-vertical--xx-small"></div>
<div class="bff-m-vertical--x-small"></div>
<div class="bff-m-vertical--small"></div>
<div class="bff-m-vertical--medium"></div>
<div class="bff-m-vertical--large"></div>
<div class="bff-m-vertical--x-large"></div>
<div class="bff-m-vertical--xx-large"></div>
<div class="bff-m-around--none"></div>
<div class="bff-m-around--xxx-small"></div>
<div class="bff-m-around--xx-small"></div>
<div class="bff-m-around--x-small"></div>
<div class="bff-m-around--small"></div>
<div class="bff-m-around--medium"></div>
<div class="bff-m-around--large"></div>
<div class="bff-m-around--x-large"></div>
<div class="bff-m-around--xx-large"></div>

Padding

<div class="bff-p-top--none"></div>
<div class="bff-p-top--xxx-small"></div>
<div class="bff-p-top--xx-small"></div>
<div class="bff-p-top--x-small"></div>
<div class="bff-p-top--small"></div>
<div class="bff-p-top--medium"></div>
<div class="bff-p-top--large"></div>
<div class="bff-p-top--x-large"></div>
<div class="bff-p-top--xx-large"></div>
<div class="bff-p-right--none"></div>
<div class="bff-p-right--xxx-small"></div>
<div class="bff-p-right--xx-small"></div>
<div class="bff-p-right--x-small"></div>
<div class="bff-p-right--small"></div>
<div class="bff-p-right--medium"></div>
<div class="bff-p-right--large"></div>
<div class="bff-p-right--x-large"></div>
<div class="bff-p-right--xx-large"></div>
<div class="bff-p-bottom--none"></div>
<div class="bff-p-bottom--xxx-small"></div>
<div class="bff-p-bottom--xx-small"></div>
<div class="bff-p-bottom--x-small"></div>
<div class="bff-p-bottom--small"></div>
<div class="bff-p-bottom--medium"></div>
<div class="bff-p-bottom--large"></div>
<div class="bff-p-bottom--x-large"></div>
<div class="bff-p-bottom--xx-large"></div>
<div class="bff-p-left--none"></div>
<div class="bff-p-left--xxx-small"></div>
<div class="bff-p-left--xx-small"></div>
<div class="bff-p-left--x-small"></div>
<div class="bff-p-left--small"></div>
<div class="bff-p-left--medium"></div>
<div class="bff-p-left--large"></div>
<div class="bff-p-left--x-large"></div>
<div class="bff-p-left--xx-large"></div>
<div class="bff-p-horizontal--none"></div>
<div class="bff-p-horizontal--xxx-small"></div>
<div class="bff-p-horizontal--xx-small"></div>
<div class="bff-p-horizontal--x-small"></div>
<div class="bff-p-horizontal--small"></div>
<div class="bff-p-horizontal--medium"></div>
<div class="bff-p-horizontal--large"></div>
<div class="bff-p-horizontal--x-large"></div>
<div class="bff-p-horizontal--xx-large"></div>
<div class="bff-p-vertical--none"></div>
<div class="bff-p-vertical--xxx-small"></div>
<div class="bff-p-vertical--xx-small"></div>
<div class="bff-p-vertical--x-small"></div>
<div class="bff-p-vertical--small"></div>
<div class="bff-p-vertical--medium"></div>
<div class="bff-p-vertical--large"></div>
<div class="bff-p-vertical--x-large"></div>
<div class="bff-p-vertical--xx-large"></div>
<div class="bff-p-around--none"></div>
<div class="bff-p-around--xxx-small"></div>
<div class="bff-p-around--xx-small"></div>
<div class="bff-p-around--x-small"></div>
<div class="bff-p-around--small"></div>
<div class="bff-p-around--medium"></div>
<div class="bff-p-around--large"></div>
<div class="bff-p-around--x-large"></div>
<div class="bff-p-around--xx-large"></div>

Usage

Type

Body Text (Open Sans - Light - font-weight:300)

<span class="bff-text-body--x-small"></span>
<span class="bff-text-body--small"></span>
<span class="bff-text-body--default"></span>
<span class="bff-text-body--large"></span>
<span class="bff-text-body--x-large"></span>
<span class="bff-text-body--xx-large"></span>

Heading Text (Open Sans - Semibold - font-weight:600)

<h1 class="bff-text-heading--x-small"></h1>
<h1 class="bff-text-heading--small"></h1>
<h1 class="bff-text-heading--default"></h1>
<h1 class="bff-text-heading--large"></h1>
<h1 class="bff-text-heading--x-large"></h1>
<h1 class="bff-text-heading--xx-large"></h1>

Text Alignment

<div class="bff-text-align--left"></div>
<div class="bff-text-align--center"></div>
<div class="bff-text-align--right"></div>

Text Weights

<div class=".bff-text-body--light"></div>
<div class=".bff-text-body--normal"></div>
<div class=".bff-text-body--semibold"></div>

Text Colors

<div class="bff-text-color--booker">.bff-text-color--booker</div>
<div class="bff-text-color--frederick">.bff-text-color--frederick</div>
<div class="bff-text-color--success">.bff-text-color--success</div>
<div class="bff-text-color--danger">.bff-text-color--danger</div>
<div class="bff-text-color--warning">.bff-text-color--warning</div>
<div class="bff-text-color--info">.bff-text-color--info</div>

Usage

Visibility

<div class="bff-show"></div>
<div class="bff-show--inline"></div>
<div class="bff-show--inline-block"></div>
<div class="bff-hide"></div>
<div class="bff-visible"></div>
<div class="bff-hidden"></div>

Usage

Responsive

<span class="bff-x-small-show"></span>
<span class="bff-small-show"></span>
<span class="bff-medium-show"></span>
<span class="bff-large-show"></span>
<span class="bff-x-large-show"></span>
<span class="bff-x-small-show-only"></span>
<span class="bff-small-show-only"></span>
<span class="bff-medium-show-only"></span>
<span class="bff-large-show-only"></span>
<span class="bff-x-large-show-only"></span>
<span class="bff-max-x-small-hide"></span>
<span class="bff-max-small-hide"></span>
<span class="bff-max-medium-hide"></span>
<span class="bff-max-large-hide"></span>
<span class="bff-max-x-small-show"></span>
<span class="bff-max-small-show"></span>
<span class="bff-max-medium-show"></span>
<span class="bff-max-large-show"></span>

Usage

Atoms

Buttons

Button - Sizes

<button type="button" class="bff-button bff-button--small">Small</button>
<button type="button" class="bff-button">Default</button>
<button type="button" class="bff-button bff-button--large">Large</button>
<button type="button" class="bff-button bff-button--x-large">X-Large</button>

Button - Minimum Width Sizes

<button type="button" class="bff-button bff-button-min-size--small">Small</button>
<button type="button" class="bff-button bff-button-min-size--medium">Medium</button>
<button type="button" class="bff-button bff-button-min-size--large">Large</button>

Button - Colors

<button type="button" class="bff-button bff-button--booker">Booker</button>
<button type="button" class="bff-button bff-button--frederick">Frederick</button>
<button type="button" class="bff-button bff-button--success">Success</button>
<button type="button" class="bff-button bff-button--danger">Danger</button>
<button type="button" class="bff-button bff-button--warning">Warning</button>
<button type="button" class="bff-button bff-button--info">Info</button>
<button type="button" class="bff-button bff-button--disabled">Disabled</button>
<button type="button" class="bff-button bff-button--booker-outline">Booker</button>
<button type="button" class="bff-button bff-button--frederick-outline">Frederick</button>
<button type="button" class="bff-button bff-button--success-outline">Success</button>
<button type="button" class="bff-button bff-button--danger-outline">Danger</button>
<button type="button" class="bff-button bff-button--warning-outline">Warning</button>
<button type="button" class="bff-button bff-button--info-outline">Info</button>
<button type="button" class="bff-button bff-button--white-outline">White</button>

Usage

Square Buttons

Button - Sizes

<button type="button" class="bff-square-button bff-square-button--small"><span class="bff-icon--cog bff-icon--small"></span></button>
<button type="button" class="bff-square-button"><span class="bff-icon--cog"></span></button>
<button type="button" class="bff-square-button bff-square-button--large"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--x-large"><span class="bff-icon--cog bff-icon--x-large"></span></button>

Button - Colors

<button type="button" class=bff-square-button bff-square-button--booker"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--frederick"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--success"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--danger"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--warning"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--info"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--disabled"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--booker-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--frederick-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--success-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--danger-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--warning-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--info-outline"><span class="bff-icon--cog bff-icon--large"></span></button>
<button type="button" class="bff-square-button bff-square-button--white-outline"><span class="bff-icon--cog bff-icon--large"></span></button>

Usage

Checkboxes

Checkbox - States

<div class="bff-form-element__control">
	<label class="bff-checkbox">
		<input type="checkbox" />
		<span class="bff-checkbox--faux"></span>
		<span class="bff-form-element__label">Checkbox Off</span>
	</label>
</div>

<div class="bff-form-element__control">
	<label class="bff-checkbox">
		<input type="checkbox" checked />
		<span class="bff-checkbox--faux"></span>
		<span class="bff-form-element__label">Checkbox On</span>
	</label>
</div>

<div class="bff-form-element__control">
	<label class="bff-checkbox">
		<input type="checkbox" disabled />
		<span class="bff-checkbox--faux"></span>
		<span class="bff-form-element__label">Checkbox Disabled</span>
	</label>
</div>

Checkbox - Required/Error

<div class="bff-form-element__control bff-has-error">
	<label class="bff-checkbox">
		<abbr class="bff-required">*</abbr>
		<input type="checkbox" />
		<span class="bff-checkbox--faux"></span>
		<span class="bff-form-element__label">Checkbox Required/Error</span>
	</label>
	<div class="bff-form-element__help">This field is required</div>
</div>

Usage

Dropdowns

<div class="bff-dropdown-trigger bff-dropdown-trigger--click bff-is-open">
  <button class="bff-button">
		Dropdown
    <span class="bff-dropdown__caret bff-icon--chevron-down"></span>
  </button>
  <div class="bff-dropdown bff-dropdown--left bff-dropdown--small">
    <ul class="bff-dropdown__list bff-dropdown--length-with-icon-5">
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--cog bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 1</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--home bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 2</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--pen bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 3</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder" disabled>
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--feather bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 4</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--lock bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 5</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--key bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 6</div>
          </div>
        </a>
      </li>
      <li class="bff-dropdown__item">
        <a href="#placeholder">
          <div class="bff-grid bff-grid--vertical-align-center bff-truncate">
          	<div class="bff-dropdown__icon-container"><span class="bff-icon--star bff-m-right--small"></span></div>
          	<div class="bff-truncate">Item 7</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

Usage

Text Inputs

Text Input - Default

<div class="bff-form-element">
	<label class="bff-form-element__label" >Input Label</label>
	<div class="bff-form-element__control">
		<input class="bff-input" type="text" placeholder="Placeholder Text" />
	</div>
</div>

Text Input - Error/Required

<div class="bff-form-element is-required bff-has-error">
	<label class="bff-form-element__label">
	<abbr class="bff-required">*</abbr> Input Label</label>
	<div class="bff-form-element__control">
		<input class="bff-input" type="text" placeholder="Placeholder Text" required="" />
	</div>
	<div class="bff-form-element__help">This field is required</div>
</div>

Text Input - Disabled

<div class="bff-form-element">
	<label class="bff-form-element__label">Input Label</label>
	<div class="bff-form-element__control">
		<input class="bff-input" type="text" placeholder="Placeholder Text" disabled="" />
	</div>
</div>

Text Input - Read Only

<div class="bff-form-element">
	<span class="bff-form-element__label">Input Label</span>
	<div class="bff-form-element__control bff-has-divider--bottom">
		<span class="bff-form-element__static">Read Only</span>
	</div>
</div>

Text Input - With Icon Inside

<div class="bff-form-element">
	  <label class="bff-form-element__label">Input Label</label>
	  <div class="bff-form-element__control bff-input-has-icon bff-input-has-icon--left-right">
	  	<span class="bff-input__icon bff-input__icon--left bff-icon--user bff-icon--small"></span>
	    <input class="bff-input" placeholder="Placeholder Text" />
	    <span class="bff-input__icon bff-input__icon--right bff-icon--magnifier bff-icon--small"></span>
	  </div>
	</div>

Text Input - With Icon Outside

<div class="bff-form-element">
	<label class="bff-form-element__label" >Input Label</label>
	<div class="bff-form-element__control bff-input-has-fixed-addon">
		<span class="bff-form-element__addon">$</span>
		<input class="bff-input" type="text" placeholder="Placeholder Text" />
		<span class="bff-form-element__addon">%</span>
	</div>
</div>

Textarea

<div class="bff-form-element">
    <label class="bff-form-element__label">Textarea Label</label>
    <div class="bff-form-element__control">
      <textarea class="bff-textarea"></textarea>
    </div>
  </div>

Usage

Labels

Labels - Sizes

<span class="bff-label bff-label--small">Small</span>
<span class="bff-label">Default</span>

Labels - Colors

<span class="bff-label bff-label--success">Success</span>
<span class="bff-label bff-label--danger">Danger</span>
<span class="bff-label bff-label--warning">Warning</span>
<span class="bff-label bff-label--info">Info</span>
<span class="bff-label bff-label--lavender">Lavender</span>

Usage

Loader

Loader - Default

<div class="bff-loader">
	<div class="bff-loader__dot-a"></div>
	<div class="bff-loader__dot-b"></div>
</div>

Loader - White

<div class="bff-loader  bff-loader--white">
	<div class="bff-loader__dot-a"></div>
	<div class="bff-loader__dot-b"></div>
</div>

Usage

Radios

Radio - Default

<fieldset class="bff-form-element">
  <legend class="bff-form-element__legend bff-form-element__label">Radio Group Label</legend>
  <div class="bff-form-element__control">
    <span class="bff-radio">
      <label class="bff-radio__label">
      	<input type="radio" name="radio-group-1" />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Radio Off</span>
      </label>
    </span>
    <span class="bff-radio">
      <label class="bff-radio__label">
      	<input type="radio" name="radio-group-1" checked />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Radio On</span>
      </label>
    </span>
  </div>
</fieldset>

Radio - Error/Required

<fieldset class="bff-form-element bff-has-error">
  <legend class="bff-form-element__legend bff-form-element__label">
    <abbr class="bff-required" >*</abbr> Radio Group Label</legend>
  <div class="bff-form-element__control">
    <span class="bff-radio">
      <label class="bff-radio__label">
      <input type="radio" name="radio-group-2" checked />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Radio Label One</span>
      </label>
    </span>
    <span class="bff-radio">	     
      <label class="bff-radio__label">
      <input type="radio" name="radio-group-2" />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Radio Label Two</span>
      </label>
    </span>
  </div>
  <div id="error_01" class="bff-form-element__help">This field is required</div>
</fieldset>

Radio - Disabled

<fieldset class="bff-form-element">
  <legend class="bff-form-element__legend bff-form-element__label">Radio Group Label</legend>
  <div class="bff-form-element__control">
    <span class="bff-radio">
      <label class="bff-radio__label">
      	<input type="radio" name="radio-group-3" disabled= />
        <span class="bff-radio--faux" ></span>
        <span class="bff-form-element__label">Radio Off</span>
      </label>
    </span>
    <span class="bff-radio">
      <label class="bff-radio__label">
      	<input type="radio" name="radio-group-3" checked disabled />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Radio On</span>
      </label>
    </span>
  </div>
</fieldset>

Usage

Toggle

Toggle - Default

<div class="bff-form-element__control">
  <label class="bff-checkbox--toggle bff-grid bff-col--x-small-center">
    <input name="checkbox" type="checkbox" />
    <span class="bff-checkbox--faux" data-check-on="On" data-check-off="Off"></span>
    <span class="bff-form-element__label"> Toggle Off</span>
  </label>
</div>
<div class="bff-form-element__control">
  <label class="bff-checkbox--toggle bff-grid bff-grid--vertical-align-center">
  <input name="checkbox" type="checkbox" checked />
    <span class="bff-checkbox--faux" data-check-on="On" data-check-off="Off"></span>
    <span class="bff-form-element__label">Toggle On</span>
  </label>
</div>

Toggle - Disabled

<div class="bff-form-element__control">
  <label class="bff-checkbox--toggle bff-grid bff-grid--vertical-align-center">
    <input name="checkbox" type="checkbox" disabled="" />
    <span class="bff-checkbox--faux" data-check-on="On" data-check-off="Off"></span>
    <span class="bff-form-element__label">Toggle Disabled</span>
  </label>
</div>

Usage

Tool Tip

Tool Tip

<div class="bff-tool-tip-trigger bff-tool-tip-trigger--hover bff-tool-tip-trigger--is-open">
	<span class="bff-icon--notification-circle"></span>
	<div class="bff-tool-tip bff-tool-tip--right" style="">Surprise! Information.</div>
</div>

Usage

Molecules

Button Group

<div class="bff-button-group">
  <button class="bff-button"> Left </button>
  <button class="bff-button"> Middle </button>
  <button class="bff-button"> Right </button>
</div>

Usage

Forms

Compound Form

<fieldset class="bff-form bff-form--compound">
  <legend class="bff-form-element__label bff-text-title--caps">Address</legend>
  <div class="bff-form-element__row">
    <div class="bff-form-element bff-size--1-of-1">
      <label class="bff-form-element__label">Street</label>
      <input class="bff-input" type="text" />
    </div>
  </div>
  <div class="bff-form-element__row">
    <div class="bff-form-element bff-size--1-of-2">
      <label class="bff-form-element__label" >City</label>
      <input class="bff-input" type="text" />
    </div>
    <div class="bff-form-element bff-size--1-of-2">
      <label class="bff-form-element__label">State</label>
      <input class="bff-input" type="text" />
    </div>
  </div>
  <div class="bff-form-element__row">
    <div class="bff-form-element bff-size--1-of-2">
      <label class="bff-form-element__label">ZIP Code</label>
      <input class="bff-input" type="text" />
    </div>
  </div>
</fieldset>

Inline Form

<form class="bff-form--inline">
  <div class="bff-form bff-form-element">
    <label class="bff-form-element__label">Name</label>
    <div class="bff-form-element__control">
      <input class="bff-input" type="text" />
    </div>
  </div>
  <div class="bff-form-element">
    <label class="bff-form-element__label">Email</label>
    <div class="bff-form-element__control">
      <input class="bff-input" type="text" />
    </div>
  </div>
  <div class="bff-form-element">
    <button type="button" class="bff-button bff-button--frederick">Send</button>
  </div>
</form>

Stacked Form

<div class="bff-form bff-form--stacked">
  <div class="bff-form-element">
    <label class="bff-form-element__label">Text Input</label>
    <div class="bff-form-element__control">
      <input class="bff-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="bff-form-element">
    <label class="bff-form-element__label">Textarea Label</label>
    <div class="bff-form-element__control">
      <textarea class="bff-textarea"></textarea>
    </div>
  </div>
  <fieldset class="bff-form-element">
    <legend class="bff-form-element__legend bff-form-element__label">Checkbox Group label</legend>
    <div class="bff-form-element__control">
      <label class="bff-checkbox" >
        <input type="checkbox" />
        <span class="bff-checkbox--faux"></span>
        <span class="bff-form-element__label">Option 1</span>
      </label>
      <label class="bff-checkbox">
        <input type="checkbox" />
        <span class="bff-checkbox--faux"></span>
        <span class="bff-form-element__label">Option 2</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="bff-form-element">
    <legend class="bff-form-element__legend bff-form-element__label">Radio Group label</legend>
    <div class="bff-form-element__control">
      <label class="bff-radio">
        <input type="radio" name="horizontal-radio-1" checked />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Option 1</span>
      </label>
      <label class="bff-radio">
        <input type="radio" name="horizontal-radio-1" />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Option 2</span>
      </label>
    </div>
  </fieldset>
  <div class="bff-form-element">
  	<div class="bff-form-element__control">
			<button type="button" class="bff-button bff-button--frederick">Submit</button>
		</div>
  </div>
</div>

Horizontal Form

<div class="bff-form bff-form--horizontal">
  <div class="bff-form-element">
    <label class="bff-form-element__label">Text Input</label>
    <div class="bff-form-element__control">
      <input class="bff-input" type="text" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="bff-form-element">
    <label class="bff-form-element__label">Textarea Label</label>
    <div class="bff-form-element__control">
      <textarea class="bff-textarea"></textarea>
    </div>
  </div>
  <fieldset class="bff-form-element">
    <legend class="bff-form-element__legend bff-form-element__label">Checkbox Group label</legend>
    <div class="bff-form-element__control">
      <label class="bff-checkbox" >
        <input type="checkbox" />
        <span class="bff-checkbox--faux"></span>
        <span class="bff-form-element__label">Option 1</span>
      </label>
      <label class="bff-checkbox">
        <input type="checkbox" />
        <span class="bff-checkbox--faux"></span>
        <span class="bff-form-element__label">Option 2</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="bff-form-element">
    <legend class="bff-form-element__legend bff-form-element__label">Radio Group label</legend>
    <div class="bff-form-element__control">
      <label class="bff-radio">
        <input type="radio" name="horizontal-radio-2" checked />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Option 1</span>
      </label>
      <label class="bff-radio" >
        <input type="radio" name="horizontal-radio-2" />
        <span class="bff-radio--faux"></span>
        <span class="bff-form-element__label">Option 2</span>
      </label>
    </div>
  </fieldset>
  <div class="bff-form-element">
  	<div class="bff-form-element__control">
			<button type="button" class="bff-button bff-button--frederick">Submit</button>
		</div>
  </div>
</div>

Usage

Notifications

Notification - Banner

<div class="bff-notify__container">
  <div class="bff-notify">
    <button type="button" class="bff-square-button bff-notify__close">
      <span class="bff-icon--cross2"></span>
    </button>
    <div class="bff-notify__content">
      <h2 class="bff-text-body--default">Base Banner</h2> 
    </div>
  </div>
</div>

Notification - Toast

<div class="bff-notify__container">
  <div class="bff-notify bff-notify--toast">
    <button type="button" class="bff-square-button bff-notify__close">
      <span class="bff-icon--cross2"></span>
    </button>
    <div class="bff-notify__content">
      <h2 class="bff-text-body--default">Base Toast</h2> 
    </div>
  </div>
</div>

Usage

Step - Wizard

Step - Wizard

<div class="bff-grid bff-nowrap bff-step-wizard">
	<div class="bff-col bff-size--1-of-1 bff-step-wizard__step bff-step-wizard__step--completed">
		<div class="bff-step-wizard__content bff-truncate">
			<h2 class="bff-step-wizard__title bff-truncate">Step 1</h2>
			<p class="bff-step-wizard__description bff-truncate">Description Line</p>
		</div>
	</div>
	<div class="bff-col bff-size--1-of-1 bff-step-wizard__step bff-step-wizard__step--selected">
		<div class="bff-step-wizard__content bff-truncate">
			<h2 class="bff-step-wizard__title bff-truncate">Step 2</h2>
			<p class="bff-step-wizard__description bff-truncate">Description Line</p>
		</div>
	</div>
	<div class="bff-col bff-size--1-of-1 bff-step-wizard__step">
		<div class="bff-step-wizard__content bff-truncate">
			<h2 class="bff-step-wizard__title bff-truncate">Step 3</h2>
			<p class="bff-step-wizard__description bff-truncate">Description Line</p>
		</div>
	</div>
	<div class="bff-col bff-size--1-of-1 bff-step-wizard__step">
		<div class="bff-step-wizard__content bff-truncate">
			<h2 class="bff-step-wizard__title bff-truncate">Step 4</h2>
			<p class="bff-step-wizard__description bff-truncate">Description Line</p>
		</div>
	</div>
</div>

Usage

Organisms

Tables

Table - Default

<table class="bff-table bff-size--1-of-1">
  <thead>
    <tr class="bff-text-heading--label">
      <th>
        <span class="bff-truncate">#</span>
      </th>
      <th>
        <div class="bff-truncate">First Name</div>
      </th>
      <th>
        <div class="bff-truncate">Last Name</div>
      </th>
      <th>
        <div class="bff-truncate">Email</div>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="bff-truncate">1</div>
      </td>
      <td>
        <div class="bff-truncate">Emelia</div>
      </td>
      <td>
        <div class="bff-truncate">Rempel</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">emelia.rempel@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="bff-truncate">2</div>
      </td>
      <td>
        <div class="bff-truncate">Matt</div>
      </td>
      <td>
        <div class="bff-truncate">Koepp</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">mkoepp41@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
     <tr>
      <td>
        <div class="bff-truncate">3</div>
      </td>
      <td>
        <div class="bff-truncate">Donny</div>
      </td>
      <td>
        <div class="bff-truncate">Gerhold</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">donny_gerhold72@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
  </tbody>
</table>

Table

<table class="bff-table bff-table--bordered bff-table--cell-buffer bff-table--striped bff-table--compact bff-size--1-of-1">
  <thead>
    <tr class="bff-text-heading--label">
      <th>
        <span class="bff-truncate">#</span>
      </th>
      <th>
        <div class="bff-truncate">First Name</div>
      </th>
      <th>
        <div class="bff-truncate">Last Name</div>
      </th>
      <th>
        <div class="bff-truncate">Email</div>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="bff-truncate">1</div>
      </td>
      <td>
        <div class="bff-truncate">Emelia</div>
      </td>
      <td>
        <div class="bff-truncate">Rempel</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">emelia.rempel@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
    <tr>
      <td>
        <div class="bff-truncate">2</div>
      </td>
      <td>
        <div class="bff-truncate">Matt</div>
      </td>
      <td>
        <div class="bff-truncate">Koepp</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">mkoepp41@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
     <tr class="bff-is-selected">
      <td>
        <div class="bff-truncate">3</div>
      </td>
      <td>
        <div class="bff-truncate">Donny</div>
      </td>
      <td>
        <div class="bff-truncate">Gerhold</div>
      </td>
      <td>
        <div class="bff-truncate"><a href="#">donny_gerhold72@example.com</a></div>
      </td>
      <td>
      	<button type="button" class="bff-button bff-button--small">Small</button>
      </td>
    </tr>
  </tbody>
</table>

Usage

Modal

Modal

<div class="bff-modal bff-fade-in-open">
  <div class="bff-modal__container">
    <div class="bff-modal__header">
      <button type="button" class="bff-square-button bff-modal__close"><span class="bff-icon--cross2"></span></button>
      <h2 class="bff-text-header--medium bff-truncate">Modal Header</h2>
    </div>
    <div class="bff-modal__content bff-p-horizontal--large">
      <div>
        <p class="bff-m-around--none">Sample Text</p>
      </div>
    </div>
    <div class="bff-modal__footer">
      <button class="bff-button bff-button-min-size--medium">Cancel</button>
      <button class="bff-button bff-button--frederick bff-button-min-size--medium">Okay</button>
    </div>
  </div>
</div>
<div class="bff-backdrop bff-backdrop--open"></div>

Usage

Colors

Icons

The icon set is Linearicons.

<span class="bff-icon--home"></span>

Usage

SASS Variables