hatefulcrawdad

// Grid Settings
$rowWidth: 1000px;
$columnGutter: 30px;
$totalColumns: 12;
$mobileTotalColumns: 4;

hatefulcrawdad

// Colors Settings
$mainColor: #2ba6cb;
$secondaryColor: #e9e9e9;
$alertColor: #c60f13;
$successColor: #5da423;
$txtColor: #222;
$highlightColor: #ffff99;
$black: #000;
$white: #fff;
$shinyEdge: rgba(#fff, .5);

hatefulcrawdad

// Button Settings
$buttonRadius: 3px;
$btnBase: 10px;
$tinyBtnBase: $btnBase - 5;
$smallBtnBase: $btnBase - 3;
$largeBtnBase: $btnBase + 5;

hatefulcrawdad

// Typography Settings

$headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$headerFontWeight: bold;
$headerFontColor: #222;
$bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$bodyFontWeight: normal;
$bodyFontColor: $txtColor;

...

hatefulcrawdad

// Form Settings
$formSpacing: 12px;

// Tab Settings
$tabHeight: 40px;

// Nav Bar Settings
$navBarHeight: 40px;
$navFlyoutBaseWidth: 250px;

hatefulcrawdad

<header>
  <aside></aside>
  <section>
    <article>
      <header></header>
      <div></div>
    </article>
  </section>
</header>

hatefulcrawdad

header { @include outerRow();
  aside { @include column(4); }
  section { @include column(8); 
    article { @include innerRow();
      header { @include column(2);
               mid-width: 0; }
      div { @include column(10); }
    }
  }
}

hatefulcrawdad

.element {
  @include font-size(18);
}

hatefulcrawdad

.element {
  font-size: ms(0); /* 0 = first in scale, 1,2,3 and so on... */
}

hatefulcrawdad

<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>