Butler 26 styleguide update (#38)

* adjust base line height so it works seamlessly with the new mixing

* adjust link colors so they are legible.

* add in additional breakpoint to satisfy some existing requirements.

* add in a list--simple mixing, add in adjust font size mixin, add in trailer and leader mixins

* update normalize file

* create consistent layout classes that use zen grids 2

* remove and replace rhythm from the style guide scss file

STYLEGUIDE_TEMPLATE/source/code/sass/_init.scss

@@ -50,7 +50,7 @@ $legacy-support-for-ie8: true;
 // @see http://compass-style.org/reference/compass/typography/vertical_rhythm/
 
 $base-font-size: 15px; // The font size set on the root html element.
-$base-line-height: 12px; // This line-height determines the basic unit of vertical rhythm.
+$base-line-height: 18px; // This line-height determines the basic unit of vertical rhythm.
 
 // Modular Scale
 // Major Third: 16px @ 1:1.25
@@ -113,7 +113,7 @@ $text-color: $gray-dark;
 $background-color: $white;
 /* Link (a:) */
 $link-color: $gray-medium;
-$link-hover: $gray-light;
+$link-hover: $gray-dark;
 /* Blockquote*/
 $blockquote-color: $gray-medium;
 /* Figcaption */
@@ -153,6 +153,7 @@ $button-reset-text-hover: $gray-dark;
 ///////////////////////////////////////////////////////////
 
 // Breakpoint Variables
+$bp0: 350px;
 $bp1: 600px;
 $bp2: 900px;
 $bp3: 1100px;

STYLEGUIDE_TEMPLATE/source/code/sass/_mixins.scss

@@ -30,6 +30,13 @@
   text-transform: uppercase;
 }
 
+/* Unstyle a list */
+%list--simple {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 
 /* ==========================================================================
    Clearfix extend
@@ -89,3 +96,46 @@
     @extend %element-invisible-off;
   }
 }
+
+/* ==============================================================
+   Custom Vertical Rhythm Mixin
+
+   This mixin uses the new font size to determine font size and
+   line height based on the ratio determined from the base font
+   size. The line height mixin is optional, but available to allow
+   for minor adjustments.
+
+   1.12 and 1.24 is based on the percentages applied to the base html
+   in the normalize file.
+   ============================================================== */
+
+@mixin adjust-font-size-to($to-size, $line-height:1) {
+  font-size: $to-size;
+  line-height: (($to-size * $base-line-height)/$base-font-size) * $line-height;
+
+  @include breakpoint($bp2) {
+    font-size: $to-size * 1.12;
+    line-height: ((($to-size * $base-line-height)/$base-font-size) * $line-height) * 1.12;
+  }
+
+  @include breakpoint($bp3) {
+    font-size: $to-size * 1.24;
+    line-height: ((($to-size * $base-line-height)/$base-font-size) * $line-height) * 1.24;
+  }
+}
+
+/* ==============================================================
+   Vertical Rhythm Mixin
+
+   This mixin adds margin to the top or bottom of an element based
+   on the base font size (or an included font size adjustment), and
+   the base line height.
+   ============================================================== */
+
+@mixin leader($leader, $font-size:$base-font-size) {
+  margin-top: (($font-size)/$base-font-size) * ($leader * $base-line-height);
+}
+
+@mixin trailer($trailer, $font-size:$base-font-size) {
+  margin-bottom: (($font-size)/$base-font-size) * ($trailer * $base-line-height);
+}