hatefulcrawdad

  // Normal Button Padding
  $btn-top-pad: 9px;
  $btn-rl-pad: 34px;
  $btn-bottom-pad: 11px;

  // Tiny Button Padding
  $btn-top-pad-tiny: 6px;
  $btn-rl-pad-tiny: 14px;
  $btn-bottom-pad-tiny: 8px;

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 cssTriangle(5px, #ff0000, [top, bottom, left, right]);
}

hatefulcrawdad

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