From a1f86e5bafac482d6100037c7e995497e9d27ca5 Mon Sep 17 00:00:00 2001
From: Anne Sturdivant <anne@opensourcery.com>
Date: Tue, 25 Feb 2014 16:06:31 -0800
Subject: [PATCH] added style toggles

---
 sass/partials/_layouts.scss    |  98 ++--
 sass/partials/_modules.scss    | 670 ++++++++++++-------------
 sass/partials/_states.scss     | 110 +++--
 sass/partials/_styleguide.scss | 868 ++++++++++++++++++---------------
 sass/partials/_variables.scss  |  87 ++++
 5 files changed, 1010 insertions(+), 823 deletions(-)

diff --git a/sass/partials/_layouts.scss b/sass/partials/_layouts.scss
index 268d2bc..52198a9 100644
--- a/sass/partials/_layouts.scss
+++ b/sass/partials/_layouts.scss
@@ -7,75 +7,85 @@
 // ** Regions ** //
 
 // * Header * //
-#header {
-  margin-bottom: rem-calc(18);
-  padding: rem-calc(18 0);
+@if $layout-header {
+  #header {
+    margin-bottom: rem-calc(18);
+    padding: rem-calc(18 0);
 
-  #site-name {
-    float: left;
-    margin-top: rem-calc(10);
+    #site-name {
+      float: left;
+      margin-top: rem-calc(10);
+    }
   }
 }
 
 // * Footer * //
-#footer {
-  margin-top: rem-calc(36);
-  padding: rem-calc(14 18 18);
+@if $layout-footer {
+  #footer {
+    margin-top: rem-calc(36);
+    padding: rem-calc(14 18 18);
+  }
 }
 
 
 // ** Blocks ** //
 
 // * Views Search * //
-#header .views-exposed-form {
-  .views-exposed-widget {
-    padding: 0 rem-calc(9) 0 0;
-  }
+@if $layout-header-block-views-search {
+  #header .views-exposed-form {
+    .views-exposed-widget {
+      padding: 0 rem-calc(9) 0 0;
+    }
 
-  .views-submit-button {
-    padding-right: 0;
+    .views-submit-button {
+      padding-right: 0;
 
-    .form-submit {
-      margin-top: rem-calc(32);
+      .form-submit {
+        margin-top: rem-calc(32);
+      }
     }
   }
 }
 
 // * User login * //
-#header #block-user-login {
-  .form-item-name,
-  .form-item-persistent-login {
-    clear: left;
-    float: left;
-    padding-right: rem-calc(9);
-  }
+@if $layout-header-block-user-login {
+  #header #block-user-login {
+    .form-item-name,
+    .form-item-persistent-login {
+      clear: left;
+      float: left;
+      padding-right: rem-calc(9);
+    }
 
-  .form-item-pass,
-  .form-actions {
-    clear: right;
-    float: right;
-  }
+    .form-item-pass,
+    .form-actions {
+      clear: right;
+      float: right;
+    }
 
-  .form-item-name,
-  .form-item-pass {
-    width: 50%;
-  }
+    .form-item-name,
+    .form-item-pass {
+      width: 50%;
+    }
 
-  .form-item-persistent-login,
-  .form-actions {
-    margin-bottom: rem-calc(9);
+    .form-item-persistent-login,
+    .form-actions {
+      margin-bottom: rem-calc(9);
+    }
   }
 }
 
 // * User menu * //
-#header #block-system-user-menu {
-  h2 {
-    float: right;
-    margin: rhythm(0.25, 30px) 0;
-  }
+@if $layout-header-block-user-menu {
+  #header #block-system-user-menu {
+    h2 {
+      float: right;
+      margin: rhythm(0.25, 30px) 0;
+    }
 
-  .content {
-    clear: right;
-    float: right;
+    .content {
+      clear: right;
+      float: right;
+    }
   }
 }
diff --git a/sass/partials/_modules.scss b/sass/partials/_modules.scss
index 6980643..f6c19ac 100644
--- a/sass/partials/_modules.scss
+++ b/sass/partials/_modules.scss
@@ -6,11 +6,13 @@
 
 // ** Breadcrumb ** //
 
-.breadcrumb {
-  @include crumb-container;
+@if $modules-breadcrumb {
+  .breadcrumb {
+    @include crumb-container;
 
-  a {
-    @include crumbs;
+    a {
+      @include crumbs;
+    }
   }
 }
 
@@ -19,123 +21,135 @@
 
 // * Main-nav * //
 // Superfish
-.sf-accordion-toggle a {
-  @include adjust-font-size-to(14px, 1.33333333333333);
-  @include block-glowing-effect(hover, 0.15s, scale-color($black, $lightness: 20%));
-  @include radius($global-radius);
-  @include single-transition(background-color);
-  background-color: $gray_3;
-  background-image: url(../vendor/alphecca/images/icons/menu-white.svg);
-  background-position: 9px 50%;
-  background-repeat: no-repeat;
-  background-size: 32px 32px;
-  color: $white;
-  display: block;
-  height: 50px;
-  padding: rem-calc(9 9 9 50);
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 100%;
-
-  &.sf-expanded {
-    @include radius(0);
-    @include side-radius(top);
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
+@if $modules-menus-main-nav-superfish {
+  .sf-accordion-toggle a {
+    @include adjust-font-size-to(14px, 1.33333333333333);
+    @include block-glowing-effect(hover, 0.15s, scale-color($black, $lightness: 20%));
     @include radius($global-radius);
-    background-color: $eigengrau;
+    @include single-transition(background-color);
+    background-color: $gray_3;
+    background-image: url(../vendor/alphecca/images/icons/menu-white.svg);
+    background-position: 9px 50%;
+    background-repeat: no-repeat;
+    background-size: 32px 32px;
+    color: $white;
+    display: block;
+    height: 50px;
+    padding: rem-calc(9 9 9 50);
+    text-decoration: none;
+    text-transform: uppercase;
+    width: 100%;
+
+    &.sf-expanded {
+      @include radius(0);
+      @include side-radius(top);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      @include radius($global-radius);
+      background-color: $eigengrau;
+    }
   }
-}
 
-ul.sf-menu {
-  @include sf-main-nav-dropdown;
+  ul.sf-menu {
+    @include sf-main-nav-dropdown;
+  }
 }
 
 // * Sub-nav * //
-#header ul.menu:not(.sf-menu),
-#footer ul.menu {
-  @include sub-nav();
+@if $modules-menus-sub-nav {
+  #header ul.menu:not(.sf-menu),
+  #footer ul.menu {
+    @include sub-nav();
+  }
 }
 
 // * Side-nav * //
-#main [class*="sidebar"] ul.menu,
-#main [class*="column"] ul.menu {
-  @include side-nav;
+@if $modules-menus-side-nav {
+  #main [class*="sidebar"] ul.menu,
+  #main [class*="column"] ul.menu {
+    @include side-nav;
+  }
 }
 
 
 // ** Tabs ** //
 
-ul.tabs {
-  @include sub-nav();
+@if $modules-tabs {
+  ul.tabs {
+    @include sub-nav();
+  }
 }
 
 
 // ** Pager ** //
 
-ul.pager {
-  @include pagination-container(true);
-  @include pagination(true, true);
+@if $modules-pager {
+  ul.pager {
+    @include pagination-container(true);
+    @include pagination(true, true);
+  }
 }
 
 
 // ** Comments ** //
 
-.comment {
-  @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset);
-  @include radius($global-radius);
-  background-color: tint($gray_8, 60%);
-  border: 1px solid $gray_8;
-  margin: rem-calc(24 0);
-  padding: rem-calc(9 32);
-  position: relative;
-
-  &:after, &:before {
-    border: solid transparent;
-    bottom: 100%;
-    content: " ";
-    height: 0;
-    left: 20%;
-    pointer-events: none;
-    position: absolute;
-    width: 0;
-  }
-  &:after {
-    border-color: rgba(239, 239, 239, 0);
-    border-bottom-color: tint($gray_8, 60%);
-    border-width: 20px;
-    margin-left: -20px;
-  }
-  &:before {
-    border-color: rgba(217, 217, 217, 0);
-    border-bottom-color: $gray_8;
-    border-width: 21px;
-    margin-left: -21px;
-  }
-
-  h3 {
-    border-bottom: 1px solid $gray_8;
-    margin-top: 0;
-  }
+@if $modules-comments {
+  .comment {
+    @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset);
+    @include radius($global-radius);
+    background-color: tint($gray_8, 60%);
+    border: 1px solid $gray_8;
+    margin: rem-calc(24 0);
+    padding: rem-calc(9 32);
+    position: relative;
 
-  footer {
-    @include clearfix;
+    &:after, &:before {
+      border: solid transparent;
+      bottom: 100%;
+      content: " ";
+      height: 0;
+      left: 20%;
+      pointer-events: none;
+      position: absolute;
+      width: 0;
+    }
+    &:after {
+      border-color: rgba(239, 239, 239, 0);
+      border-bottom-color: tint($gray_8, 60%);
+      border-width: 20px;
+      margin-left: -20px;
+    }
+    &:before {
+      border-color: rgba(217, 217, 217, 0);
+      border-bottom-color: $gray_8;
+      border-width: 21px;
+      margin-left: -21px;
+    }
 
-    .submitted {
-      float: left;
-      margin: 0 rem-calc(18) 0 0;
+    h3 {
+      border-bottom: 1px solid $gray_8;
+      margin-top: 0;
     }
 
-    .permalink {
-      background-image: url(../vendor/alphecca/images/icons/link.svg);
-      background-position: left 50%;
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-      float: right;
-      padding-left: rem-calc(24);
+    footer {
+      @include clearfix;
+
+      .submitted {
+        float: left;
+        margin: 0 rem-calc(18) 0 0;
+      }
+
+      .permalink {
+        background-image: url(../vendor/alphecca/images/icons/link.svg);
+        background-position: left 50%;
+        background-repeat: no-repeat;
+        background-size: 16px 16px;
+        float: right;
+        padding-left: rem-calc(24);
+      }
     }
   }
 }
@@ -143,296 +157,298 @@ ul.pager {
 
 // ** Orbit Slider ** //
 
-$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
-$orbit-timer-show-progress-bar: true !default;
+@if $modules-orbit-slider {
+  $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
+  $orbit-timer-show-progress-bar: true !default;
 
-@-webkit-keyframes rotate {
-  from { -webkit-transform: rotate(0deg); }
-  to { -webkit-transform: rotate(360deg); }
-}
-@-moz-keyframes rotate {
-  from { -moz-transform: rotate(0deg); }
-  to { -moz-transform: rotate(360deg); }
-}
-@-o-keyframes rotate {
-  from { -o-transform: rotate(0deg); }
-  to { -o-transform: rotate(360deg); }
-}
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+  @-webkit-keyframes rotate {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+  }
+  @-moz-keyframes rotate {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+  }
+  @-o-keyframes rotate {
+    from { -o-transform: rotate(0deg); }
+    to { -o-transform: rotate(360deg); }
+  }
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
 
-// Orbit Graceful Loading
-.slideshow-wrapper {
-  position: relative;
+  // Orbit Graceful Loading
+  .slideshow-wrapper {
+    position: relative;
 
-  ul {
-    // Prevent bullets showing before .orbit-container is loaded
-    list-style-type: none;
-    margin: 0;
+    ul {
+      // Prevent bullets showing before .orbit-container is loaded
+      list-style-type: none;
+      margin: 0;
 
-    // Hide all list items
-    li,
-    li .orbit-caption { display: none; }
+      // Hide all list items
+      li,
+      li .orbit-caption { display: none; }
 
-    // ...except for the first one
-    li:first-child { display: block; }
-  }
+      // ...except for the first one
+      li:first-child { display: block; }
+    }
 
-  .orbit-container {
-    background-color: transparent;
+    .orbit-container {
+      background-color: transparent;
 
-    // Show images when .orbit-container is loaded
-    li {
-      display: block;
+      // Show images when .orbit-container is loaded
+      li {
+        display: block;
 
-      .orbit-caption { display: block; }
+        .orbit-caption { display: block; }
+      }
     }
   }
-}
 
-// Orbit preloader
-.preloader {
-  @include radius(1000px);
-  -webkit-animation-name: rotate;
-  -webkit-animation-duration: 1.5s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
-  -moz-animation-name: rotate;
-  -moz-animation-duration: 1.5s;
-  -moz-animation-iteration-count: infinite;
-  -moz-animation-timing-function: linear;
-  -o-animation-name: rotate;
-  -o-animation-duration: 1.5s;
-  -o-animation-iteration-count: infinite;
-  -o-animation-timing-function: linear;
-  animation-name: rotate;
-  animation-duration: 1.5s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  border: solid 3px;
-  border-color: $gray_3 $white;
-  display: block;
-  left: 50%;
-  margin-top: -20px;
-  margin-left: -20px;
-  position: absolute;
-  height: 40px;
-  top: 50%;
-  width: 40px;
-}
-
-.orbit-container {
-  background: none;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
+  // Orbit preloader
+  .preloader {
+    @include radius(1000px);
+    -webkit-animation-name: rotate;
+    -webkit-animation-duration: 1.5s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    -moz-animation-name: rotate;
+    -moz-animation-duration: 1.5s;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    -o-animation-name: rotate;
+    -o-animation-duration: 1.5s;
+    -o-animation-iteration-count: infinite;
+    -o-animation-timing-function: linear;
+    animation-name: rotate;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    border: solid 3px;
+    border-color: $gray_3 $white;
+    display: block;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    position: absolute;
+    height: 40px;
+    top: 50%;
+    width: 40px;
+  }
 
-  .orbit-slides-container {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .orbit-container {
+    background: none;
+    overflow: hidden;
     position: relative;
+    width: 100%;
 
-    img { display: block; max-width: 100%; }
+    .orbit-slides-container {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
 
-    &>* {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      @if $text-direction == rtl {
-        margin-right: 100%;
-      }
-      @else {
-        margin-left: 100%;
-      }
+      img { display: block; max-width: 100%; }
 
-      &:first-child {
+      &>* {
+        position: absolute;
+        top: 0;
+        width: 100%;
         @if $text-direction == rtl {
-          margin-right: 0;
+          margin-right: 100%;
         }
         @else {
-          margin-left: 0;
+          margin-left: 100%;
         }
-      }
 
-      .orbit-caption {
-        @if $orbit-caption-position == "bottom" {
-          bottom: 0;
-          position: absolute;
-        } @else if $orbit-caption-position == "under" {
-          position: relative;
+        &:first-child {
+          @if $text-direction == rtl {
+            margin-right: 0;
+          }
+          @else {
+            margin-left: 0;
+          }
         }
 
-        @include adjust-font-size-to(14px);
-        background-color: rgba(51,51,51,0.8);
-        color: $white;
-        padding: rem-calc(9 14);
-        width: 100%;
+        .orbit-caption {
+          @if $orbit-caption-position == "bottom" {
+            bottom: 0;
+            position: absolute;
+          } @else if $orbit-caption-position == "under" {
+            position: relative;
+          }
+
+          @include adjust-font-size-to(14px);
+          background-color: rgba(51,51,51,0.8);
+          color: $white;
+          padding: rem-calc(9 14);
+          width: 100%;
+        }
       }
     }
-  }
 
-  .orbit-slide-number {
-    @include adjust-font-size-to(12px);
-    background: transparent;
-    color: $white;
-    #{$default-float}: 10px;
-    position: absolute;
-    top: 10px;
-    z-index: 10;
-
-    span { font-weight: 700; padding: rem-calc(5); }
-  }
+    .orbit-slide-number {
+      @include adjust-font-size-to(12px);
+      background: transparent;
+      color: $white;
+      #{$default-float}: 10px;
+      position: absolute;
+      top: 10px;
+      z-index: 10;
 
-  .orbit-timer {
-    height: 6px;
-    position: absolute;
-    #{$opposite-direction}: 10px;
-    top: 12px;
-    width: 100px;
-    z-index: 10;
-
-    .orbit-progress {
-      @if $orbit-timer-show-progress-bar {
-        background-color: rgba(255,255,255,0.3);
-        display: block;
-        height: 3px;
-        position: relative;
-        right: 20px;
-        top: 5px;
-        width: 0%;
-      }
+      span { font-weight: 700; padding: rem-calc(5); }
     }
 
-    // Play button
-    & > span {
-      border: solid 4px $white;
-      border-top: none;
-      border-bottom: none;
-      display: none;
-      height: 14px;
+    .orbit-timer {
+      height: 6px;
       position: absolute;
-      #{$opposite-direction}: 0;
-      top: 0px;
-      width: 11px;
-    }
+      #{$opposite-direction}: 10px;
+      top: 12px;
+      width: 100px;
+      z-index: 10;
+
+      .orbit-progress {
+        @if $orbit-timer-show-progress-bar {
+          background-color: rgba(255,255,255,0.3);
+          display: block;
+          height: 3px;
+          position: relative;
+          right: 20px;
+          top: 5px;
+          width: 0%;
+        }
+      }
 
-    // Pause button
-    &.paused {
+      // Play button
       & > span {
-        border: inset 8px;
-        border-right-style: solid;
-        border-color: transparent transparent transparent $white;
+        border: solid 4px $white;
+        border-top: none;
+        border-bottom: none;
+        display: none;
         height: 14px;
-        #{$opposite-direction}: -4px;
+        position: absolute;
+        #{$opposite-direction}: 0;
         top: 0px;
         width: 11px;
+      }
 
-        &.dark {
-          border-color: transparent transparent transparent $gray_6;
+      // Pause button
+      &.paused {
+        & > span {
+          border: inset 8px;
+          border-right-style: solid;
+          border-color: transparent transparent transparent $white;
+          height: 14px;
+          #{$opposite-direction}: -4px;
+          top: 0px;
+          width: 11px;
+
+          &.dark {
+            border-color: transparent transparent transparent $gray_6;
+          }
         }
       }
     }
-  }
 
-  &:hover .orbit-timer > span { display: block; }
+    &:hover .orbit-timer > span { display: block; }
 
-  // Let's get those controls to be right in the center on each side
-  .orbit-prev,
-  .orbit-next {
-    background-color: none;
-    color: $white;
-    height: 60px;
-    line-height: 50px;
-    margin-top: -25px;
-    position: absolute;
-    text-indent: -9999px !important;
-    top: 45%;
-    width: 36px;
-    z-index: 10;
+    // Let's get those controls to be right in the center on each side
+    .orbit-prev,
+    .orbit-next {
+      background-color: none;
+      color: $white;
+      height: 60px;
+      line-height: 50px;
+      margin-top: -25px;
+      position: absolute;
+      text-indent: -9999px !important;
+      top: 45%;
+      width: 36px;
+      z-index: 10;
+
+      &:hover,
+      &:focus {
+        background-color: rgba(0,0,0,0.3);
+      }
 
-    &:hover,
-    &:focus {
-      background-color: rgba(0,0,0,0.3);
+      & > span {
+        border: inset 10px;
+        display: block;
+        height: 0;
+        margin-top: -10px;
+        position: absolute;
+        top: 50%;
+        width: 0;
+      }
     }
+    .orbit-prev {
+      #{$default-float}: 0;
 
-    & > span {
-      border: inset 10px;
-      display: block;
-      height: 0;
-      margin-top: -10px;
-      position: absolute;
-      top: 50%;
-      width: 0;
-    }
-  }
-  .orbit-prev {
-    #{$default-float}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $white;
+        border-#{$opposite-direction}-style: solid;
+      }
 
-    & > span {
-      border-color: transparent;
-      border-#{$opposite-direction}-color: $white;
-      border-#{$opposite-direction}-style: solid;
+      &:hover > span,
+      &:focus > span {
+        border-#{$opposite-direction}-color: $white;
+      }
     }
+    .orbit-next {
+      #{$opposite-direction}: 0;
 
-    &:hover > span,
-    &:focus > span {
-      border-#{$opposite-direction}-color: $white;
-    }
-  }
-  .orbit-next {
-    #{$opposite-direction}: 0;
-
-    & > span {
-      border-color: transparent;
-      border-#{$default-float}-color: $white;
-      border-#{$default-float}-style: solid;
-      #{$default-float}: 50%;
-      margin-#{$default-float}: -4px;
-    }
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-color: $white;
+        border-#{$default-float}-style: solid;
+        #{$default-float}: 50%;
+        margin-#{$default-float}: -4px;
+      }
 
-    &:hover > span,
-    &:focus > span {
-      border-#{$default-float}-color: $white;
+      &:hover > span,
+      &:focus > span {
+        border-#{$default-float}-color: $white;
+      }
     }
   }
-}
-
-.orbit-bullets-container { text-align: center; }
 
-.orbit-bullets {
-  display: block;
-  float: none;
-  margin: 0 auto 30px auto;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  top: 10px;
+  .orbit-bullets-container { text-align: center; }
 
-  li {
-    @include radius(1000px);
-    background: $gray_6;
-    display: inline-block;
+  .orbit-bullets {
+    display: block;
     float: none;
-    height: rem-calc(9);
-    margin-#{$opposite-direction}: 6px;
-    width: rem-calc(9);
+    margin: 0 auto 30px auto;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    top: 10px;
 
-    &.active {
-      background: $gray_3;
-    }
+    li {
+      @include radius(1000px);
+      background: $gray_6;
+      display: inline-block;
+      float: none;
+      height: rem-calc(9);
+      margin-#{$opposite-direction}: 6px;
+      width: rem-calc(9);
+
+      &.active {
+        background: $gray_3;
+      }
 
-    &:last-child { margin-#{$opposite-direction}: 0; }
+      &:last-child { margin-#{$opposite-direction}: 0; }
+    }
   }
-}
 
-.touch {
-  .orbit-container {
-    .orbit-prev,
-    .orbit-next { display: none; }
-  }
+  .touch {
+    .orbit-container {
+      .orbit-prev,
+      .orbit-next { display: none; }
+    }
 
-  .orbit-bullets { display: none; }
+    .orbit-bullets { display: none; }
+  }
 }
diff --git a/sass/partials/_states.scss b/sass/partials/_states.scss
index b5bbc48..7a5e349 100644
--- a/sass/partials/_states.scss
+++ b/sass/partials/_states.scss
@@ -7,71 +7,79 @@
 // ** Styleguide ** //
 
 // * Headings & Anchors * //
-a:link {
-  h1, h2, h3, h4, h5, h6,
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    color: $anchor-font-color;
+@if $states-styleguide-headings-anchors {
+  a:link {
+    h1, h2, h3, h4, h5, h6,
+    h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+      color: $anchor-font-color;
+    }
   }
-}
-a:visited {
-  h1, h2, h3, h4, h5, h6,
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    color: $anchor-font-color-visited;
+  a:visited {
+    h1, h2, h3, h4, h5, h6,
+    h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+      color: $anchor-font-color-visited;
+    }
   }
-}
-a:hover,
-a:focus {
-  h1, h2, h3, h4, h5, h6,
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    color: $anchor-font-color-hover;
+  a:hover,
+  a:focus {
+    h1, h2, h3, h4, h5, h6,
+    h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+      color: $anchor-font-color-hover;
+    }
   }
-}
-a:active {
-  h1, h2, h3, h4, h5, h6,
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    color: $anchor-font-color-active;
+  a:active {
+    h1, h2, h3, h4, h5, h6,
+    h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+      color: $anchor-font-color-active;
+    }
   }
 }
 
 // * Unordered Lists * //
-ul {
-  &.square { @extend %square; }
-  &.circle { @extend %circle; }
-  &.disc { @extend %disc; }
-  &.no-bullet { @extend %no-bullet; }
+@if $states-styleguide-unordered-lists {
+  ul {
+    &.square { @extend %square; }
+    &.circle { @extend %circle; }
+    &.disc { @extend %disc; }
+    &.no-bullet { @extend %no-bullet; }
+  }
 }
 
 // * Feed icon * //
-.feed-icon img {
-  @include radius(0);
-  border: none;
-  padding: 0;
+@if $states-styleguide-feed-icon {
+  .feed-icon img {
+    @include radius(0);
+    border: none;
+    padding: 0;
+  }
 }
 
 
 // ** Layouts ** //
 
 // * Header * //
-#header {
-  .block {
-    @include breakpoint($medium) {
-      clear: right;
-      float: right;
-      margin-left: rem-calc(18);
+@if $states-layout-header-blocks {
+  #header {
+    .block {
+      @include breakpoint($medium) {
+        clear: right;
+        float: right;
+        margin-left: rem-calc(18);
+      }
     }
-  }
 
-  .block-superfish {
-    @include breakpoint($medium) {
-      clear: both;
-      float: none;
-      margin-left: 0;
+    .block-superfish {
+      @include breakpoint($medium) {
+        clear: both;
+        float: none;
+        margin-left: 0;
+      }
     }
-  }
 
-  #block-user-login {
-    @include breakpoint($xlarge) {
-      clear: none;
+    #block-user-login {
+      @include breakpoint($xlarge) {
+        clear: none;
+      }
     }
   }
 }
@@ -80,11 +88,15 @@ ul {
 // ** Modules ** //
 
 // * Secondary tabs * //
-ul.tabs.secondary {
-  @include sub-nav(false);
+@if $states-modules-secondary-tabs {
+  ul.tabs.secondary {
+    @include sub-nav(false);
+  }
 }
 
 // * Main-nav * //
-ul.sf-menu.sf-accordion {
-  @include sf-main-nav-accordion;
+@if $states-modules-main-nav-accordion {
+  ul.sf-menu.sf-accordion {
+    @include sf-main-nav-accordion;
+  }
 }
diff --git a/sass/partials/_styleguide.scss b/sass/partials/_styleguide.scss
index 84dfe6e..fbc862e 100644
--- a/sass/partials/_styleguide.scss
+++ b/sass/partials/_styleguide.scss
@@ -10,503 +10,555 @@
 // -- http://smacss.com/book/type-base
 
 // * Global Elements * //
-html,
-body {
-  font-size: $base-font-size;
-}
+@if $styleguide-global {
+  html,
+  body {
+    font-size: $base-font-size;
+  }
 
-body {
-  background: $body-bg;
-  color: $body-font-color;
-  cursor: $cursor-default-value;
-  font-family: $body-font-family;
-  font-style: $body-font-style;
-  font-weight: $body-font-weight;
-  line-height: $base-line-height;
-  margin: 0;
-  padding: 0;
-  position: relative;
+  body {
+    background: $body-bg;
+    color: $body-font-color;
+    cursor: $cursor-default-value;
+    font-family: $body-font-family;
+    font-style: $body-font-style;
+    font-weight: $body-font-weight;
+    line-height: $base-line-height;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
 }
 
 // * Anchors * //
-a {
-  &:link {
-    color: $anchor-font-color;
-    text-decoration: none;
-  }
-  &:visited {
-    color: $anchor-font-color-visited;
-    text-decoration: none;
-  }
-  &:hover,
-  &:focus {
-    color: $anchor-font-color-hover;
-    text-decoration: underline;
-  }
-  &:active {
-    color: $anchor-font-color-active;
+@if $styleguide-anchors {
+  a {
+    &:link {
+      color: $anchor-font-color;
+      text-decoration: none;
+    }
+    &:visited {
+      color: $anchor-font-color-visited;
+      text-decoration: none;
+    }
+    &:hover,
+    &:focus {
+      color: $anchor-font-color-hover;
+      text-decoration: underline;
+    }
+    &:active {
+      color: $anchor-font-color-active;
+    }
   }
 }
 
 // * Headings * //
-h1, h2, h3, h4, h5, h6 {
-  font-family: $OpenSans;
-  text-rendering: optimizeLegibility;
-}
-h1 {
-  @include adjust-font-size-to(36px);
-  @include boldheader(700, $eigengrau, "", "");
-  margin: rhythm(0.5, 36px) 0 rhythm(1, 36px) 0;
-}
-h2 {
-  @include adjust-font-size-to(30px);
-  @include quietheader(300, $gray, "", "");
-  margin: rhythm(1, 30px) 0;
-}
-h3 {
-  @include adjust-font-size-to(25px);
-  @include quietheader(300, $eigengrau, "", "");
-  margin: rhythm(1, 25px) 0;
-}
-h4 {
-  @include adjust-font-size-to(21px);
-  @include boldheader(400, $gray, "", "");
-  margin: rhythm(1, 21px) 0;
-}
-h5 {
-  @include adjust-font-size-to(18px);
-  @include quietheader(300, $eigengrau, italic, "");
-  margin: rhythm(1, 18px) 0;
-}
-h6 {
-  @include adjust-font-size-to(15px);
-  @include boldheader(700, $gray, "", uppercase);
-  margin: rhythm(1, 15px) 0;
+@if $styleguide-headings {
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $OpenSans;
+    text-rendering: optimizeLegibility;
+  }
+  h1 {
+    @include adjust-font-size-to(36px);
+    @include boldheader(700, $eigengrau, "", "");
+    margin: rhythm(0.5, 36px) 0 rhythm(1, 36px) 0;
+  }
+  h2 {
+    @include adjust-font-size-to(30px);
+    @include quietheader(300, $gray, "", "");
+    margin: rhythm(1, 30px) 0;
+  }
+  h3 {
+    @include adjust-font-size-to(25px);
+    @include quietheader(300, $eigengrau, "", "");
+    margin: rhythm(1, 25px) 0;
+  }
+  h4 {
+    @include adjust-font-size-to(21px);
+    @include boldheader(400, $gray, "", "");
+    margin: rhythm(1, 21px) 0;
+  }
+  h5 {
+    @include adjust-font-size-to(18px);
+    @include quietheader(300, $eigengrau, italic, "");
+    margin: rhythm(1, 18px) 0;
+  }
+  h6 {
+    @include adjust-font-size-to(15px);
+    @include boldheader(700, $gray, "", uppercase);
+    margin: rhythm(1, 15px) 0;
+  }
 }
 
 // * Images * //
-// Get rid of gap under images by making them display: inline-block; by default
-img {
-//  @include radius($global-radius);
-//  border: 1px solid $gray_8;
-  display: inline-block;
-//  padding: rem-calc(9);
-  vertical-align: middle;
-
-  a & {
-    border: none;
+@if $styleguide-images {
+  // Get rid of gap under images by making them display: inline-block; by default
+  img {
+  //  @include radius($global-radius);
+  //  border: 1px solid $gray_8;
+    display: inline-block;
+  //  padding: rem-calc(9);
+    vertical-align: middle;
+
+    a & {
+      border: none;
+    }
   }
 }
 
 // * Tables * //
-table {
-  @include table;
+@if $styleguide-tables {
+  table {
+    @include table;
+  }
 }
 
 // * Typography Defaults * //
-p {
-  margin: rem-calc(18 0);
-}
+@if $styleguide-typo-defaults {
+  p {
+    margin: rem-calc(18 0);
+  }
 
-hr {
-  border: solid $gray_8;
-  border-width: 1px 0 0;
-  clear: both;
-  height: 0;
-  margin: rem-calc(18 0);
-}
+  hr {
+    border: solid $gray_8;
+    border-width: 1px 0 0;
+    clear: both;
+    height: 0;
+    margin: rem-calc(18 0);
+  }
 
-em,
-i {
-  font-style: italic;
-  line-height: inherit;
-}
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
 
-strong,
-b {
-  font-weight: bold;
-  line-height: inherit;
-}
+  strong,
+  b {
+    font-weight: bold;
+    line-height: inherit;
+  }
 
-small {
-  color: $gray;
-  font-size: 60%;
-  line-height: inherit;
-}
+  small {
+    color: $gray;
+    font-size: 60%;
+    line-height: inherit;
+  }
 
-pre {
-  @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset);
-  background-color: tint($gray_8, 80%);
-  margin-bottom: rem-calc(18);
-  padding: rem-calc(14);
-}
+  pre {
+    @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset);
+    background-color: tint($gray_8, 80%);
+    margin-bottom: rem-calc(18);
+    padding: rem-calc(14);
+  }
 
-code {
-  color: $secondary-color;
-  font-family: $monospace;
-  font-size: 90%;
-}
+  code {
+    color: $secondary-color;
+    font-family: $monospace;
+    font-size: 90%;
+  }
 
-sup {
-  @include adjust-font-size-to(11px);
-  margin: rem-calc(3 0 -3);
-}
+  sup {
+    @include adjust-font-size-to(11px);
+    margin: rem-calc(3 0 -3);
+  }
 
-sub {
-  @include adjust-font-size-to(11px);
-  margin: rem-calc(-3 0 3);
+  sub {
+    @include adjust-font-size-to(11px);
+    margin: rem-calc(-3 0 3);
+  }
 }
 
 // * Lists * //
-:not(nav) ul,
-ol,
-dl {
-  list-style-position: outside;
-  margin-bottom: rem-calc(18);
+@if $styleguide-lists {
+  :not(nav) ul,
+  ol,
+  dl {
+    list-style-position: outside;
+    margin-bottom: rem-calc(18);
+  }
 }
 
 // * Unordered Lists * //
-ul {
-  margin-#{$default-float}: 1.1rem;
-  li {
-    ul,
-    ol {
-      font-size: 1rem; /* Override nested font-size change */
-      margin-#{$default-float}: rem-calc(18);
-      margin-bottom: 0;
+@if $styleguide-unordered-lists {
+  ul {
+    margin-#{$default-float}: 1.1rem;
+    li {
+      ul,
+      ol {
+        font-size: 1rem; /* Override nested font-size change */
+        margin-#{$default-float}: rem-calc(18);
+        margin-bottom: 0;
+      }
     }
   }
 }
 
 // * Ordered Lists * //
-ol {
-  margin-#{$default-float}: 1.4rem;
-  li {
-    ul,
-    ol {
-      margin-#{$default-float}: rem-calc(18);
-      margin-bottom: 0;
+@if $styleguide-ordered-lists {
+  ol {
+    margin-#{$default-float}: 1.4rem;
+    li {
+      ul,
+      ol {
+        margin-#{$default-float}: rem-calc(18);
+        margin-bottom: 0;
+      }
     }
   }
 }
 
 // * Definition Lists * //
-dl {
-  dt {
-    @include adjust-font-size-to(14px);
-    @include boldheader(700, $gray, "", uppercase);
-    margin-bottom: 0.3rem;
+@if $styleguide-definition-lists {
+  dl {
+    dt {
+      @include adjust-font-size-to(14px);
+      @include boldheader(700, $gray, "", uppercase);
+      margin-bottom: 0.3rem;
+    }
+    dd { margin-bottom: rem-calc(14); }
   }
-  dd { margin-bottom: rem-calc(14); }
 }
 
 // * Abbreviations * //
-abbr,
-acronym {
-  border-bottom: 1px dotted $gray_8;
-  color: $body-font-color;
-  cursor: $cursor-help-value;
-  font-size: 90%;
-  text-transform: uppercase;
-}
-abbr {
-  text-transform: none;
+@if $styleguide-abbreviations {
+  abbr,
+  acronym {
+    border-bottom: 1px dotted $gray_8;
+    color: $body-font-color;
+    cursor: $cursor-help-value;
+    font-size: 90%;
+    text-transform: uppercase;
+  }
+  abbr {
+    text-transform: none;
+  }
 }
 
 // * Blockquotes * //
-blockquote {
-  background-color: tint($gray_8, 80%);
-  border-#{$default-float}: 1px solid $gray_8;
-  margin: rem-calc(0 0 18);
-  padding: rem-calc(3 18);
-
-  cite {
-    color: $gray_6;
-    display: block;
-    font-size: rem-calc(14);
-    &:before {
-      content: "\2014 \0020";
-    }
-
-    a,
-    a:visited {
+@if $styleguide-blockquotes {
+  blockquote {
+    background-color: tint($gray_8, 80%);
+    border-#{$default-float}: 1px solid $gray_8;
+    margin: rem-calc(0 0 18);
+    padding: rem-calc(3 18);
+
+    cite {
       color: $gray_6;
+      display: block;
+      font-size: rem-calc(14);
+      &:before {
+        content: "\2014 \0020";
+      }
+
+      a,
+      a:visited {
+        color: $gray_6;
+      }
     }
   }
-}
-blockquote,
-blockquote p {
-  color: scale-color($gray_3, $lightness: 35%);
+  blockquote,
+  blockquote p {
+    color: scale-color($gray_3, $lightness: 35%);
+  }
 }
 
 
 // ** Forms ** //
 
-// * Standard Forms * //
-form { margin: 0 0 rem-calc(16); }
+@if $styleguide-forms {
+  // * Standard Forms * //
+  form { margin: 0 0 rem-calc(16); }
 
-// * Label Styles * //
-label {
-  @include form-label;
+  // * Label Styles * //
+  @if $styleguide-label-styles {
+    label {
+      @include form-label;
 
-  // Styles for required inputs
-  .form-required {
-    color: $red;
-  }
-}
-
-// * Select * //
-select {
-  @include radius($global-radius);
-  background:
-    $paperwhite
-    url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
-  background-position-x: 97%;
-  background-position-y: center;
-  border: 1px solid scale-color($white, $lightness: -20%);
-  font-size: rem-calc(14);
-  padding: rem-calc(16) / 2;
-  -webkit-appearance: none !important;
-
-  &:hover,
-  &:focus {
-    background:
-      scale-color($paperwhite, $lightness: -3%)
-      url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
-    background-position-x: 97%;
-    background-position-y: center;
-    border-color: scale-color($white, $lightness: -40%);
+      // Styles for required inputs
+      .form-required {
+        color: $red;
+      }
+    }
   }
-}
-
-// ::-ms-expand pseudo-element
-// http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx
-select::-ms-expand {
-  display: none;
-}
-
-// ???
-@-moz-document url-prefix() {
-  select { background: $paperwhite; }
-  select:hover, select:focus { background: scale-color($paperwhite, $lightness: -3%); }
-}
 
-// Attach elements to the beginning or end of an input
-.prefix,
-.postfix { @include prefix-postfix-base; }
-
-// Adjust padding, alignment and radius if pre/post element is a button
-.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
-.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
-.prefix.button.radius { @include radius(0); @include side-radius(left, $global-radius); }
-.postfix.button.radius { @include radius(0); @include side-radius(right, $global-radius); }
-.prefix.button.round { @include radius(0); @include side-radius(left, $global-rounded); }
-.postfix.button.round { @include radius(0); @include side-radius(right, $global-rounded); }
-
-// Separate prefix and postfix styles when on span or label so buttons keep their own
-span.prefix, label.prefix { @include prefix();
-  &.radius { @include radius(0); @include side-radius(left, $global-radius); }
-}
-span.postfix, label.postfix { @include postfix();
-  &.radius { @include radius(0); @include side-radius(right, $global-radius); }
-}
+  // * Select * //
+  @if $styleguide-select {
+    select {
+      @include radius($global-radius);
+      background:
+        $paperwhite
+        url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
+      background-position-x: 97%;
+      background-position-y: center;
+      border: 1px solid scale-color($white, $lightness: -20%);
+      font-size: rem-calc(14);
+      padding: rem-calc(16) / 2;
+      -webkit-appearance: none !important;
+
+      &:hover,
+      &:focus {
+        background:
+          scale-color($paperwhite, $lightness: -3%)
+          url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
+        background-position-x: 97%;
+        background-position-y: center;
+        border-color: scale-color($white, $lightness: -40%);
+      }
+    }
 
-// Input groups will automatically style first and last elements of the group
-.input-group {
-  &.radius {
-    &>*:first-child,  &>*:first-child * {
-      @include side-radius($default-float, $global-radius);
+    // ::-ms-expand pseudo-element
+    // http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx
+    select::-ms-expand {
+      display: none;
     }
-    &>*:last-child, &>*:last-child * {
-      @include side-radius($opposite-direction, $global-radius);
+
+    // ???
+    @-moz-document url-prefix() {
+      select { background: $paperwhite; }
+      select:hover, select:focus { background: scale-color($paperwhite, $lightness: -3%); }
     }
   }
-  &.round {
-    &>*:first-child,  &>*:first-child * {
-      @include side-radius($default-float, $global-rounded);
+
+  @if $styleguide-post-pre-fix {
+    // Attach elements to the beginning or end of an input
+    .prefix,
+    .postfix { @include prefix-postfix-base; }
+
+    // Adjust padding, alignment and radius if pre/post element is a button
+    .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
+    .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
+    .prefix.button.radius { @include radius(0); @include side-radius(left, $global-radius); }
+    .postfix.button.radius { @include radius(0); @include side-radius(right, $global-radius); }
+    .prefix.button.round { @include radius(0); @include side-radius(left, $global-rounded); }
+    .postfix.button.round { @include radius(0); @include side-radius(right, $global-rounded); }
+
+    // Separate prefix and postfix styles when on span or label so buttons keep their own
+    span.prefix, label.prefix { @include prefix();
+      &.radius { @include radius(0); @include side-radius(left, $global-radius); }
     }
-    &>*:last-child, &>*:last-child * {
-      @include side-radius($opposite-direction, $global-rounded);
+    span.postfix, label.postfix { @include postfix();
+      &.radius { @include radius(0); @include side-radius(right, $global-radius); }
     }
   }
-}
 
-// We use this to get basic styling on all basic form elements
-input[type="text"],
-input[type="password"],
-input[type="date"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="week"],
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="tel"],
-input[type="time"],
-input[type="url"],
-textarea {
-  @include form-element;
-  @if not $input-include-glowing-effect {
-      @include single-transition(all, 0.15s, linear);
-  }
-  -webkit-appearance: none;
-
-  // Error Handling
-  &.error {
-    @include form-error-color;
+  @if $styleguide-input-groups {
+    // Input groups will automatically style first and last elements of the group
+    .input-group {
+      &.radius {
+        &>*:first-child,  &>*:first-child * {
+          @include side-radius($default-float, $global-radius);
+        }
+        &>*:last-child, &>*:last-child * {
+          @include side-radius($opposite-direction, $global-radius);
+        }
+      }
+      &.round {
+        &>*:first-child,  &>*:first-child * {
+          @include side-radius($default-float, $global-rounded);
+        }
+        &>*:last-child, &>*:last-child * {
+          @include side-radius($opposite-direction, $global-rounded);
+        }
+      }
+    }
   }
-}
 
-// Add height value for select elements to match text input height
-select {
-  height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1));
-}
+  @if $styleguide-inputs {
+    // We use this to get basic styling on all basic form elements
+    input[type="text"],
+    input[type="password"],
+    input[type="date"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="month"],
+    input[type="week"],
+    input[type="email"],
+    input[type="number"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="time"],
+    input[type="url"],
+    textarea {
+      @include form-element;
+      @if not $input-include-glowing-effect {
+          @include single-transition(all, 0.15s, linear);
+      }
+      -webkit-appearance: none;
+
+      // Error Handling
+      &.error {
+        @include form-error-color;
+      }
+    }
 
-// Adjust margin for form elements below
-input[type="file"],
-input[type="checkbox"],
-input[type="radio"],
-select {
-  margin: 0 0 rem-calc(16) 0;
-}
+    // Add height value for select elements to match text input height
+    select {
+      height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1));
+    }
 
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  display: inline-block;
-  margin-#{$default-float}: rem-calc(16) * .5;
-  margin-#{$opposite-direction}: rem-calc(16);
-  margin-bottom: 0;
-  vertical-align: baseline;
-}
+    // Adjust margin for form elements below
+    input[type="file"],
+    input[type="checkbox"],
+    input[type="radio"],
+    select {
+      margin: 0 0 rem-calc(16) 0;
+    }
 
-// Normalize file input width
-input[type="file"] {
-  width: 100%;
-}
+    input[type="checkbox"] + label,
+    input[type="radio"] + label {
+      display: inline-block;
+      margin-#{$default-float}: rem-calc(16) * .5;
+      margin-#{$opposite-direction}: rem-calc(16);
+      margin-bottom: 0;
+      vertical-align: baseline;
+    }
+
+    // Normalize file input width
+    input[type="file"] {
+      width: 100%;
+    }
+  }
 
-// We add basic fieldset styling
-fieldset {
-  @include fieldset;
+  @if $styleguide-fieldset {
+    // We add basic fieldset styling
+    fieldset {
+      @include fieldset;
+    }
+  }
 }
 
 
 // ** Buttons ** //
 
-// Default styles
-.button, button,
-input[type="submit"], input[type="button"] {
-  @include button-base;
-  @include button-size;
-  @include button-style($radius:true);
+@if $styleguide-buttons {
+  // Default styles
+  .button, button,
+  input[type="submit"], input[type="button"] {
+    @include button-base;
+    @include button-size;
+    @include button-style($radius:true);
 
-  @include single-transition(background-color);
+    @include single-transition(background-color);
 
-  &.secondary { @include button-style($bg:$secondary-color); }
-  &.success   { @include button-style($bg:$success-color); }
-  &.alert     { @include button-style($bg:$alert-color); }
+    &.secondary { @include button-style($bg:$secondary-color); }
+    &.success   { @include button-style($bg:$success-color); }
+    &.alert     { @include button-style($bg:$alert-color); }
 
-  &.large  { @include button-size($padding:rem-calc(18)); }
-  &.small  { @include button-size($padding:rem-calc(14)); }
-  &.tiny   { @include button-size($padding:rem-calc(10)); }
-  &.expand { @include button-size($padding:null,$full-width:true); }
+    &.large  { @include button-size($padding:rem-calc(18)); }
+    &.small  { @include button-size($padding:rem-calc(14)); }
+    &.tiny   { @include button-size($padding:rem-calc(10)); }
+    &.expand { @include button-size($padding:null,$full-width:true); }
 
-  &.left-align  { text-align: left; text-indent: rem-calc(12); }
-  &.right-align { text-align: right; padding-right: rem-calc(12); }
+    &.left-align  { text-align: left; text-indent: rem-calc(12); }
+    &.right-align { text-align: right; padding-right: rem-calc(12); }
 
-  &.radius { @include button-style($bg:false, $radius:true); }
-  &.round  { @include button-style($bg:false, $radius:$global-rounded); }
+    &.radius { @include button-style($bg:false, $radius:true); }
+    &.round  { @include button-style($bg:false, $radius:$global-rounded); }
 
-  &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
-    &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
-    &.success { @include button-style($bg:$success-color, $disabled:true); }
-    &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+    &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
+      &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
+      &.success { @include button-style($bg:$success-color, $disabled:true); }
+      &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+    }
+  }
+  button, input[type="submit"], input[type="button"] {
+    @include button-size($padding:false, $is-input:rem-calc(12));
   }
-}
-button, input[type="submit"], input[type="button"] {
-  @include button-size($padding:false, $is-input:rem-calc(12));
 }
 
-// Button groups
-.button-group {
-  @include button-group-container;
+@if $styleguide-button-groups {
+  // Button groups
+  .button-group {
+    @include button-group-container;
 
-  @include button-group-style();
+    @include button-group-style();
 
-  // Override default button styles
-  .button, button,
-  input[type="submit"], input[type="button"] {
-    @include button-style($radius:0);
-  }
+    // Override default button styles
+    .button, button,
+    input[type="submit"], input[type="button"] {
+      @include button-style($radius:0);
+    }
 
-  &.radius { @include button-group-style($radius:$global-radius, $float:null); }
-  &.round { @include button-group-style($radius:$global-rounded, $float:null); }
-}
-.button-bar {
-  @include clearfix;
-  .button-group { @include button-group-container($styles:false, $float:true); }
+    &.radius { @include button-group-style($radius:$global-radius, $float:null); }
+    &.round { @include button-group-style($radius:$global-rounded, $float:null); }
+  }
+  .button-bar {
+    @include clearfix;
+    .button-group { @include button-group-container($styles:false, $float:true); }
+  }
 }
 
 
 // ** System ** //
 
 // * Messages * //
-div.messages {
-  @include radius($global-radius);
-  background-position: rem-calc(14) rem-calc(18);
-  background-repeat: no-repeat;
-  border: 1px solid;
-  margin: rem-calc(18 0);
-  padding: rem-calc(14 18 14 44);
-}
-div.status {
-  background-color: $pale-green;
-  background-image: url(../vendor/alphecca/images/icons/status.svg);
-  background-size: 16px 16px;
-  border-color: $light-green;
-  color: $green;
-}
-div.warning {
-  background-color: $pale-orange;
-  background-image: url(../vendor/alphecca/images/icons/warning.svg);
-  background-size: 16px 16px;
-  border-color: $light-orange;
-  color: $orange;
-}
-div.error {
-  background-color: $pale-red;
-  background-image: url(../vendor/alphecca/images/icons/error.svg);
-  background-size: 16px 16px;
-  border-color: $light-red;
-  color: $red;
+@if $styleguide-system-messages {
+  div.messages {
+    @include radius($global-radius);
+    background-position: rem-calc(14) rem-calc(18);
+    background-repeat: no-repeat;
+    border: 1px solid;
+    margin: rem-calc(18 0);
+    padding: rem-calc(14 18 14 44);
+  }
+  div.status {
+    background-color: $pale-green;
+    background-image: url(../vendor/alphecca/images/icons/status.svg);
+    background-size: 16px 16px;
+    border-color: $light-green;
+    color: $green;
+  }
+  div.warning {
+    background-color: $pale-orange;
+    background-image: url(../vendor/alphecca/images/icons/warning.svg);
+    background-size: 16px 16px;
+    border-color: $light-orange;
+    color: $orange;
+  }
+  div.error {
+    background-color: $pale-red;
+    background-image: url(../vendor/alphecca/images/icons/error.svg);
+    background-size: 16px 16px;
+    border-color: $light-red;
+    color: $red;
+  }
 }
 
 // * Inline Links * //
-ul.links.inline {
-  @include horizontal-list;
-  margin: rem-calc(18 0);
+@if $styleguide-system-inline-links {
+  ul.links.inline {
+    @include horizontal-list;
+    margin: rem-calc(18 0);
+  }
 }
 
 // * Description * //
-div.description {
-  color: $gray_3;
-  @include adjust-font-size-to(13px);
-  margin-bottom: rem-calc(9);
+@if $styleguide-system-description {
+  div.description {
+    color: $gray_3;
+    @include adjust-font-size-to(13px);
+    margin-bottom: rem-calc(9);
+  }
 }
 
 // * Forms * //
-#edit-cancel {
-  @include button($bg:$gray_8);
-  @include single-transition(background-color);
+@if $styleguide-system-forms {
+  #edit-cancel {
+    @include button($bg:$gray_8);
+    @include single-transition(background-color);
+  }
 }
 
 // * Tables * //
-.draggable {
-  a.tabledrag-handle {
-    height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1));
-
-    .handle {
-      @include box-sizing(content-box);
+@if $styleguide-system-tables {
+  .draggable {
+    a.tabledrag-handle {
+      height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1));
+
+      .handle {
+        @include box-sizing(content-box);
+      }
     }
   }
 }
@@ -515,27 +567,33 @@ div.description {
 // ** Regions ** //
 
 // * Header * //
-#header {
-  border-bottom: 1px solid $gray_8;
+@if $styleguide-regions-header {
+  #header {
+    border-bottom: 1px solid $gray_8;
+  }
 }
 
 // * Footer * //
-#footer {
-  @include border-top-right-radius($global-radius);
-  @include border-top-left-radius($global-radius);
-  background-color: tint($gray_8, 60%);
-  border: 1px solid $gray_8;
-  border-bottom: none;
+@if $styleguide-regions-footer {
+  #footer {
+    @include border-top-right-radius($global-radius);
+    @include border-top-left-radius($global-radius);
+    background-color: tint($gray_8, 60%);
+    border: 1px solid $gray_8;
+    border-bottom: none;
+  }
 }
 
 
 // ** Blocks ** //
 
 // * User login * //
-#header #block-user-login {
-  ul {
-    @include sub-nav(false);
-    clear: both;
+@if $styleguide-header-block-user-login {
+  #header #block-user-login {
+    ul {
+      @include sub-nav(false);
+      clear: both;
+    }
   }
 }
 
@@ -543,11 +601,15 @@ div.description {
 // ** Contrib ** //
 
 // * Chosen * //
-.chosen-container {
-  margin: 0 0 rem-calc(16) 0;
+@if $styleguide-contrib-chosen {
+  .chosen-container {
+    margin: 0 0 rem-calc(16) 0;
+  }
 }
 
 // * Vertical Tabs * //
-div.vertical-tabs {
-  background-color: $white;
+@if $styleguide-contrib-vertical-tabs {
+  div.vertical-tabs {
+    background-color: $white;
+  }
 }
diff --git a/sass/partials/_variables.scss b/sass/partials/_variables.scss
index 656cde3..b372b70 100644
--- a/sass/partials/_variables.scss
+++ b/sass/partials/_variables.scss
@@ -130,3 +130,90 @@ $cursor-text-value: text !default;
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 3px !default;
 $global-rounded: 1000px !default;
+
+
+////////////////////////
+// Toggle Alphecca Styles
+//
+// Override inclusion of Alphecca styles in your theme.
+////////////////////////
+
+// * Styleguide * //
+$styleguide-global: true !default;
+
+$styleguide-anchors: true !default;
+
+$styleguide-headings: true !default;
+
+$styleguide-images: true !default;
+
+$styleguide-tables: true !default;
+
+$styleguide-typo-defaults: true !default;
+
+$styleguide-lists: true !default;
+$styleguide-unordered-lists: true !default;
+$styleguide-ordered-lists: true !default;
+$styleguide-definition-lists: true !default;
+
+$styleguide-abbreviations: true !default;
+
+$styleguide-blockquotes: true !default;
+
+$styleguide-forms: true !default;
+$styleguide-label-styles: true !default;
+$styleguide-select: true !default;
+$styleguide-post-pre-fix: true !default;
+$styleguide-input-groups: true !default;
+$styleguide-inputs: true !default;
+$styleguide-fieldset: true !default;
+
+$styleguide-buttons: true !default;
+$styleguide-button-groups: true !default;
+
+$styleguide-system-messages: true !default;
+$styleguide-system-inline-links: true !default;
+$styleguide-system-description: true !default;
+$styleguide-system-forms: true !default;
+$styleguide-system-tables: true !default;
+
+$styleguide-regions-header: true !default;
+$styleguide-regions-footer: true !default;
+
+$styleguide-header-block-user-login: true !default;
+
+$styleguide-contrib-chosen: true !default;
+$styleguide-contrib-vertical-tabs: true !default;
+
+// * Layout * //
+$layout-header: true !default;
+$layout-footer: true !default;
+
+$layout-header-block-views-search: true !default;
+$layout-header-block-user-login: true !default;
+$layout-header-block-user-menu: true !default;
+
+// * Modules * //
+$modules-breadcrumb: true !default;
+
+$modules-menus-main-nav-superfish: true !default;
+$modules-menus-sub-nav: true !default;
+$modules-menus-side-nav: true !default;
+
+$modules-tabs: true !default;
+
+$modules-pager: true !default;
+
+$modules-comments: true !default;
+
+$modules-orbit-slider: true !default;
+
+// * States * //
+$states-styleguide-headings-anchors: true !default;
+$states-styleguide-unordered-lists: true !default;
+$states-styleguide-feed-icon: true !default;
+
+$states-layout-header-blocks: true !default;
+
+$states-modules-secondary-tabs: true !default;
+$states-modules-main-nav-accordion: true !default;