robotballoon

<h1>Hello</h1>

robotballoon

<h1>Red 85</h1>
<h2>Red 20</h2>

robotballoon

// ----
// libsass (v3.2.5)
// ----


// Primary Colors
$AF-red:      #AC2641;
$AF-orange:   #D38E15;
$AF-gray:     #707012;
$AF-tan:      #D8C89E;

robotballoon

<div class="box"></div>

robotballoon

<h2>Search (BEM)</h2>
<div class="search">
  <input type="search" class="search__input" placeholder="search">
  <button class="search__btn">go</button>
</div>

<h2>Large Search with Traditional BEM Modifier</h2>
<div class="search search--large">
  <input class="search__input" type="search" placeholder="search">
  <button class="search__btn">go</button>

robotballoon

// ----
// libsass (v3.2.5)
// ----

// Breakpoints

$brkpoint-sm    : 1px;
$brkpoint-md    : 768px;
$brkpoint-lg    : 1100px;

robotballoon

// ----
// libsass (v3.2.5)
// ----

// Config Grid
$g-col-width    : 65px;
$g-gutter-width : 20px;
$g-col-count    : 12;
$g-cont-max-w   : 1050px;

robotballoon

<h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
      <h2 class="headline-secondary--grouped">Don't forget about the subtitle</h2>

robotballoon

<h1 class="headline-primary">Take a look at this amazing headline</h1>
      <h2 class="headline-secondary">Don't forget about the subtitle</h2>

robotballoon

<nav class="navbar" role="navigation">
  <ul class="nav">
    <li class="nav__item"><a href="#">Typography</a></li>
    <li class="nav__item"><a href="#">Buttons</a></li>
    <li class="nav__item"><a href="#">Forms</a></li>
    <li class="nav__item"><a href="#">Images</a></li>
    <li class="nav__item"><a href="#">Grid</a></li>
    <li class="nav__item--current"><a href="#">Navigation</a></li>
  </ul> 
</nav>