RubyGems - zurb-foundation - Versions diffs - 4.2.3 → 4.3.0 - Mend

zurb-foundation 4.2.3 → 4.3.0

Files changed (125) hide show

data/CONTRIBUTING.md +1 -1
data/Gemfile.lock +1 -1
data/README.md +8 -0
data/docs/CHANGELOG.md +17 -0
data/docs/README.md +3 -1
data/docs/_sidebar-components.html.erb +2 -1
data/docs/_sidebar.html.erb +2 -1
data/docs/compile.rb +8 -1
data/docs/components/abide.html.erb +371 -0
data/docs/components/alert-boxes.html.erb +12 -9
data/docs/components/block-grid.html.erb +1 -1
data/docs/components/breadcrumbs.html.erb +7 -5
data/docs/components/button-groups.html.erb +4 -2
data/docs/components/buttons.html.erb +13 -9
data/docs/components/clearing.html.erb +2 -0
data/docs/components/dropdown-buttons.html.erb +59 -55
data/docs/components/dropdown.html.erb +34 -32
data/docs/components/flex-video.html.erb +4 -2
data/docs/components/forms.html.erb +16 -15
data/docs/components/global.html.erb +27 -4
data/docs/components/grid.html.erb +21 -3
data/docs/components/inline-lists.html.erb +8 -3
data/docs/components/joyride.html.erb +5 -3
data/docs/components/keystrokes.html.erb +4 -2
data/docs/components/kitchen-sink.html.erb +15 -40
data/docs/components/labels.html.erb +4 -2
data/docs/components/magellan.html.erb +4 -2
data/docs/components/orbit.html.erb +39 -27
data/docs/components/pagination.html.erb +10 -8
data/docs/components/panels.html.erb +7 -3
data/docs/components/pricing-tables.html.erb +12 -10
data/docs/components/progress-bars.html.erb +6 -4
data/docs/components/reveal.html.erb +7 -28
data/docs/components/section.html.erb +15 -13
data/docs/components/side-nav.html.erb +5 -3
data/docs/components/split-buttons.html.erb +45 -43
data/docs/components/sub-nav.html.erb +7 -5
data/docs/components/switch.html.erb +3 -1
data/docs/components/tables.html.erb +8 -6
data/docs/components/thumbnails.html.erb +2 -0
data/docs/components/tooltips.html.erb +6 -4
data/docs/components/top-bar.html.erb +9 -8
data/docs/components/type.html.erb +20 -18
data/docs/config.ru +2 -1
data/docs/css/_footer.scss +420 -0
data/docs/css/_offcanvas.scss +140 -0
data/docs/css/docs.scss +10 -1
data/docs/fonts/ProximaNova-Reg-webfont.eot +0 -0
data/docs/fonts/ProximaNova-Reg-webfont.svg +244 -0
data/docs/fonts/ProximaNova-Reg-webfont.ttf +0 -0
data/docs/fonts/ProximaNova-Reg-webfont.woff +0 -0
data/docs/fonts/proximanovacond-bold-webfont.eot +0 -0
data/docs/fonts/proximanovacond-bold-webfont.svg +247 -0
data/docs/fonts/proximanovacond-bold-webfont.ttf +0 -0
data/docs/fonts/proximanovacond-bold-webfont.woff +0 -0
data/docs/img/demos/orbit/demo1.jpg +0 -0
data/docs/img/demos/orbit/demo2.jpg +0 -0
data/docs/img/demos/orbit/demo3.jpg +0 -0
data/docs/img/icons/footer-icons.png +0 -0
data/docs/img/icons/footer-top-icons.png +0 -0
data/docs/img/icons/social.png +0 -0
data/docs/img/offcanvas/footer-icons.png +0 -0
data/docs/img/offcanvas/menu-wht.png +0 -0
data/docs/img/offcanvas/search.png +0 -0
data/docs/img/offcanvas/zurb-logo.png +0 -0
data/docs/img/offcanvas/zurb-wht.png +0 -0
data/docs/js/docs.js +1 -0
data/docs/js/jquery.offcanvas.js +28 -0
data/docs/layout.html.erb +226 -42
data/docs/media-queries.html.erb +3 -3
data/docs/sass.html.erb +142 -142
data/docs/support.html.erb +1 -1
data/js/foundation/foundation.abide.js +194 -0
data/js/foundation/foundation.dropdown.js +8 -9
data/js/foundation/foundation.forms.js +11 -3
data/js/foundation/foundation.interchange.js +25 -16
data/js/foundation/foundation.joyride.js +9 -3
data/js/foundation/foundation.js +2 -3
data/js/foundation/foundation.magellan.js +3 -2
data/js/foundation/foundation.orbit.js +359 -344
data/js/foundation/foundation.reveal.js +1 -1
data/js/foundation/foundation.section.js +290 -311
data/js/foundation/foundation.tooltips.js +2 -2
data/js/foundation/foundation.topbar.js +20 -23
data/js/foundation/index.js +1 -0
data/js/vendor/jquery.js +103 -121
data/lib/foundation/generators/templates/application.html.slim +15 -8
data/lib/foundation/version.rb +1 -1
data/scss/foundation.scss +2 -5
data/scss/foundation/_variables.scss +326 -295
data/scss/foundation/components/_alert-boxes.scss +10 -10
data/scss/foundation/components/_block-grid.scss +1 -1
data/scss/foundation/components/_breadcrumbs.scss +8 -8
data/scss/foundation/components/_button-groups.scss +2 -2
data/scss/foundation/components/_buttons.scss +18 -18
data/scss/foundation/components/_custom-forms.scss +20 -14
data/scss/foundation/components/_dropdown-buttons.scss +9 -9
data/scss/foundation/components/_dropdown.scss +4 -4
data/scss/foundation/components/_flex-video.scss +3 -3
data/scss/foundation/components/_forms.scss +54 -24
data/scss/foundation/components/_global.scss +28 -5
data/scss/foundation/components/_grid-5.scss +214 -0
data/scss/foundation/components/_grid.scss +3 -3
data/scss/foundation/components/_inline-lists.scss +3 -3
data/scss/foundation/components/_joyride.scss +6 -6
data/scss/foundation/components/_keystrokes.scss +3 -3
data/scss/foundation/components/_labels.scss +3 -3
data/scss/foundation/components/_orbit.scss +34 -9
data/scss/foundation/components/_pagination.scss +8 -6
data/scss/foundation/components/_panels.scss +3 -3
data/scss/foundation/components/_pricing-tables.scss +10 -10
data/scss/foundation/components/_progress-bars.scss +3 -3
data/scss/foundation/components/_reveal.scss +7 -7
data/scss/foundation/components/_section.scss +252 -214
data/scss/foundation/components/_side-nav.scss +3 -3
data/scss/foundation/components/_split-buttons.scss +7 -7
data/scss/foundation/components/_sub-nav.scss +7 -7
data/scss/foundation/components/_switch.scss +4 -4
data/scss/foundation/components/_tables.scss +6 -6
data/scss/foundation/components/_tooltips.scss +4 -4
data/scss/foundation/components/_top-bar.scss +14 -10
data/scss/foundation/components/_type.scss +23 -23
data/templates/project/index.html +4 -4
data/templates/project/scss/app.scss +8 -0
metadata +29 -4

data/lib/foundation/generators/templates/application.html.slim CHANGED

@@ -1,10 +1,15 @@
 doctype html
-== "<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->"
-== "<!--[if lt IE 7 ]> <html class=\"ie6\" lang=\"en\"> <![endif]-->"
-== "<!--[if IE 7 ]>    <html class=\"ie7\" lang=\"en\"> <![endif]-->"
-== "<!--[if IE 8 ]>    <html class=\"ie8\" lang=\"en\"> <![endif]-->"
-== "<!--[if IE 9 ]>    <html class=\"ie9\" lang=\"en\"> <![endif]-->"
-== "<!--[if (gt IE 9)|!(IE)]><!--> <html lang=\"en\"> <!--<![endif]-->"
+/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
+/[if lt IE 7 ]
+  |<html class="ie6" lang="en">
+/[if IE 7 ]
+  |<html class="ie7" lang="en">
+/[if IE 8 ]
+  |<html class="ie8" lang="en">
+/[if IE 9 ]
+  |<html class="ie9" lang="en">
+/[if (gt IE 9)|!(IE)]
+  |<html lang="en">
 head
   meta charset="utf-8"
@@ -15,7 +20,7 @@ head
   / Set the viewport width to device width for mobile
   meta name="viewport" content="width=device-width, initial-scale=1.0"
-  title= content_for?(:title) ? yield(:title) : "Untitled"
+  title == content_for?(:title) ? yield(:title) : "Untitled"
   = stylesheet_link_tag "application"
   = javascript_include_tag "vendor/custom.modernizr"
@@ -25,4 +30,6 @@ body
   == yield
-  = javascript_include_tag "application"
+  == javascript_include_tag "application"
+|</html>

data/lib/foundation/version.rb CHANGED

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.2.3"
+  VERSION = "4.3.0"
 end

data/scss/foundation.scss CHANGED

@@ -13,7 +13,6 @@
   "foundation/components/type",
   "foundation/components/buttons",
   "foundation/components/forms",
-  "foundation/components/custom-forms",
   "foundation/components/button-groups",
   "foundation/components/dropdown-buttons",
   "foundation/components/split-buttons",
@@ -26,6 +25,7 @@
   "foundation/components/clearing",
   "foundation/components/alert-boxes",
   "foundation/components/breadcrumbs",
+  "foundation/components/custom-forms",
   "foundation/components/keystrokes",
   "foundation/components/labels",
   "foundation/components/inline-lists",
@@ -40,7 +40,4 @@
   "foundation/components/tables",
   "foundation/components/thumbs",
   "foundation/components/tooltips",
-  "foundation/components/dropdown";
+  "foundation/components/dropdown";

data/scss/foundation/_variables.scss CHANGED

@@ -14,11 +14,34 @@ $base-font-size: 100% !default;
 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
 // If you want your base font-size to be a different size and not have it effect grid size too,
 // set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
-$em-base: 16px !default;
+$em-base: 16 !default;
-// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
-@function emCalc($pxWidth) {
-  @return $pxWidth / $em-base * 1em;
+// It strips the unit of measure and returns it
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+// Converts "px" to "em" using the ($)em-base
+@function convert-to-em($value)  {
+  $value: strip-unit($value) / strip-unit($em-base) * 1em;
+  @if ($value == 0em) { $value: 0; } // Turn 0em into 0
+  @return $value;
+}
+// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#)
+// Just enter the number, no need to mention "px"
+@function emCalc($values...) {
+  $max: length($values); // Get the total number of parameters passed
+  // If there is only 1 parameter, then return it as an integer.
+  // This is done because a list can't be multiplied or divided even if it contains a single value
+  @if $max == 1 { @return convert-to-em(nth($values, 1)); }
+  $emValues: (); // This will eventually store the converted $values in a list
+  @for $i from 1 through $max {
+    $emValues: append($emValues, convert-to-em(nth($values, $i)));
+  }
+  @return $emValues;
 }
 // Change whether or not you include browser prefixes
@@ -114,18 +137,18 @@ $default-float: left;
 // Grid Variables
 //
-// $row-width: emCalc(1000px);
-// $column-gutter: emCalc(30px);
+// $row-width: emCalc(1000);
+// $column-gutter: emCalc(30);
 // $total-columns: 12;
 //
 // Block Grid Variables
 //
-// Maximum number of block grid elements per row
+// We use this to control the maximum number of block grid elements per row
 // $block-grid-elements: 12;
-// $block-grid-default-spacing: emCalc(20px);
+// $block-grid-default-spacing: emCalc(20);
 // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
@@ -135,7 +158,7 @@ $default-float: left;
 // Typography Variables
 //
-// Heading font styles
+// Control header font styles
 // $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 // $header-font-weight: bold;
@@ -146,16 +169,16 @@ $default-float: left;
 // $header-bottom-margin: .5em;
 // $header-text-rendering: optimizeLegibility;
-// Heading font sizes
+// Control header font sizes
-// $h1-font-size: emCalc(44px);
-// $h2-font-size: emCalc(37px);
-// $h3-font-size: emCalc(27px);
-// $h4-font-size: emCalc(23px);
-// $h5-font-size: emCalc(18px);
+// $h1-font-size: emCalc(44);
+// $h2-font-size: emCalc(37);
+// $h3-font-size: emCalc(27);
+// $h4-font-size: emCalc(23);
+// $h5-font-size: emCalc(18);
 // $h6-font-size: 1em;
-// Subheaders
+// Control how subheaders are styled.
 // $subheader-line-height: 1.4;
 // $subheader-font-color: lighten($header-font-color, 30%);
@@ -163,88 +186,88 @@ $default-float: left;
 // $subheader-top-margin: .2em;
 // $subheader-bottom-margin: .5em;
-// <small> styling
+// A general <small> styling
 // $small-font-size: 60%;
 // $small-font-color: lighten($header-font-color, 30%);
-// Paragraphs
+// Style paragraphs
 // $paragraph-font-family: inherit;
 // $paragraph-font-weight: normal;
 // $paragraph-font-size: 1em;
 // $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: emCalc(20px);
-// $paragraph-aside-font-size: emCalc(14px);
+// $paragraph-margin-bottom: emCalc(20);
+// $paragraph-aside-font-size: emCalc(14);
 // $paragraph-aside-line-height: 1.35;
 // $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
-// <code> tags
+// Style <code> tags
 // $code-color: darken($alert-color, 15%);
 // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
 // $code-font-weight: bold;
-// Anchors
+// Style anchors
 // $anchor-text-decoration: none;
 // $anchor-font-color: $primary-color;
 // $anchor-font-color-hover: darken($primary-color, 5%);
-// <hr> element
+// Style the <hr> element
 // $hr-border-width: 1px;
 // $hr-border-style: solid;
 // $hr-border-color: #ddd;
-// $hr-margin: emCalc(20px);
+// $hr-margin: emCalc(20);
-// Lists
+// Style lists
 // $list-style-position: outside;
-// $list-side-margin: emCalc(20px);
-// $list-nested-margin: emCalc(20px);
+// $list-side-margin: 0;
+// $list-nested-margin: emCalc(20);
 // $definition-list-header-weight: bold;
 // $definition-list-header-margin-bottom: .3em;
-// $definition-list-margin-bottom: emCalc(12px);
+// $definition-list-margin-bottom: emCalc(12);
-// Blockquotes
+// Style blockquotes
 // $blockquote-font-color: lighten($header-font-color, 30%);
-// $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
+// $blockquote-padding: emCalc(9, 20, 0, 19);
 // $blockquote-border: 1px solid #ddd;
-// $blockquote-cite-font-size: emCalc(13px);
+// $blockquote-cite-font-size: emCalc(13);
 // $blockquote-cite-font-color: lighten($header-font-color, 20%);
 // $blockquote-cite-link-color: $blockquote-cite-font-color;
-// Acronym
+// Acronym styles
 // $acronym-underline: 1px dotted #ddd;
-// Padding and margin
+// Control padding and margin
-// $microformat-padding: emCalc(10px) emCalc(12px);
-// $microformat-margin: 0 0 emCalc(20px) 0;
+// $microformat-padding: emCalc(10, 12);
+// $microformat-margin: emCalc(0, 0, 20, 0);
-// Border styles
+// Control the border styles
 // $microformat-border-width: 1px;
 // $microformat-border-style: solid;
 // $microformat-border-color: #ddd;
-// Full name font styles
+// Control full name font styles
 // $microformat-fullname-font-weight: bold;
-// $microformat-fullname-font-size: emCalc(15px);
+// $microformat-fullname-font-size: emCalc(15);
-// Summary font styles
+// Control the summary font styles
 // $microformat-summary-font-weight: bold;
-// <abbr> padding
-// $microformat-abbr-padding: 0 emCalc(1px);
+// Control abbr padding
+// $microformat-abbr-padding: emCalc(0, 1);
-// <abbr> font styles
+// Control abbr font styles
 // $microformat-abbr-font-weight: bold;
 // $microformat-abbr-font-decoration: none;
@@ -253,20 +276,20 @@ $default-float: left;
 // Form Variables
 //
-// Base for lots of form spacing and positioning styles
+// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: emCalc(16px);
+// $form-spacing: emCalc(16);
-// Labels
+// We use these to style the labels in different ways
 // $form-label-pointer: pointer;
-// $form-label-font-size: emCalc(14px);
+// $form-label-font-size: emCalc(14);
 // $form-label-font-weight: 500;
 // $form-label-font-color: lighten(#000, 30%);
-// $form-label-bottom-margin: emCalc(3px);
+// $form-label-bottom-margin: emCalc(3);
 // $input-font-family: inherit;
 // $input-font-color: rgba(0,0,0,0.75);
-// $input-font-size: emCalc(14px);
+// $input-font-size: emCalc(14);
 // $input-bg-color: #fff;
 // $input-focus-bg-color: darken(#fff, 2%);
 // $input-border-color: darken(#fff, 20%);
@@ -277,21 +300,21 @@ $default-float: left;
 // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 // $input-include-glowing-effect: true;
-// Fieldset border and spacing.
+// We use these to style the fieldset border and spacing.
 // $fieldset-border-style: solid;
 // $fieldset-border-width: 1px;
 // $fieldset-border-color: #ddd;
-// $fieldset-padding: emCalc(20px);
-// $fieldset-margin: emCalc(18px) 0;
+// $fieldset-padding: emCalc(20);
+// $fieldset-margin: emCalc(18, 0);
-// Legends
+// We use these to style the legends when you use them
 // $legend-bg: #fff;
 // $legend-font-weight: bold;
-// $legend-padding: 0 emCalc(3px);
+// $legend-padding: emCalc(0, 3);
-// Prefix and postfix input elements
+// We use these to style the prefix and postfix input elements
 // $input-prefix-bg: darken(#fff, 5%);
 // $input-prefix-border-color: darken(#fff, 20%);
@@ -301,16 +324,16 @@ $default-float: left;
 // $input-prefix-font-color: #333;
 // $input-prefix-font-color-alt: #fff;
-// Error states for inputs and labels
+// We use these to style the error states for inputs and labels
-// $input-error-message-padding: emCalc(6px) emCalc(4px);
-// $input-error-message-top: -($form-spacing) - emCalc(5px);
-// $input-error-message-font-size: emCalc(12px);
+// $input-error-message-padding: emCalc(6, 4);
+// $input-error-message-top: 0;
+// $input-error-message-font-size: emCalc(12);
 // $input-error-message-font-weight: bold;
 // $input-error-message-font-color: #fff;
 // $input-error-message-font-color-alt: #333;
-// Glowing effect of inputs when focused
+// We use this to style the glowing effect of inputs when focused
 // $glowing-effect-fade-time: 0.45s;
 // $glowing-effect-color: $input-focus-border-color;
@@ -319,45 +342,46 @@ $default-float: left;
 // Button Variables
 //
-// Padding for buttons.
+// We use these to build padding for buttons.
-// $button-tny: emCalc(7px);
-// $button-sml: emCalc(9px);
-// $button-med: emCalc(12px);
-// $button-lrg: emCalc(16px);
+// $button-med: emCalc(12);
+// $button-tny: emCalc(7);
+// $button-sml: emCalc(9);
+// $button-lrg: emCalc(16);
-// Display property.
+// We use this to control the display property.
 // $button-display: inline-block;
-// $button-margin-bottom: emCalc(20px);
+// $button-margin-bottom: emCalc(20);
-// Button text styles.
+// We use these to control button text styles.
 // $button-font-family: inherit;
 // $button-font-color: #fff;
 // $button-font-color-alt: #333;
-// $button-font-med: emCalc(16px);
-// $button-font-tny: emCalc(11px);
-// $button-font-sml: emCalc(13px);
-// $button-font-lrg: emCalc(20px);
+// $button-font-med: emCalc(16);
+// $button-font-tny: emCalc(11);
+// $button-font-sml: emCalc(13);
+// $button-font-lrg: emCalc(20);
 // $button-font-weight: bold;
 // $button-font-align: center;
-// Various hover effects.
+// We use these to control various hover effects.
 // $button-function-factor: 10%;
-// Button border styles.
+// We use these to control button border styles.
 // $button-border-width: 1px;
 // $button-border-style: solid;
 // $button-border-color: darken($primary-color, $button-function-factor);
-// Radius used throughout the core.
+// We use this to set the default radius used throughout the core.
 // $button-radius: $global-radius;
+// $button-round: $global-rounded;
-// Opacity for disabled buttons.
+// We use this to set default opacity for disabled buttons.
 // $button-disabled-opacity: 0.6;
@@ -367,127 +391,127 @@ $default-float: left;
 // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-// $button-bar-margin-opposite: emCalc(10px);
+// $button-bar-margin-opposite: emCalc(10);
 //
 // Dropdown Button Variables
 //
-// Color of the pip in dropdown buttons
+// We use these to set the color of the pip in dropdown buttons
 // $dropdown-button-pip-color: #fff;
 // $dropdown-button-pip-color-alt: #333;
-// Tiny dropdown buttons
+// We use these to style tiny dropdown buttons
 // $dropdown-button-padding-tny: $button-tny * 5;
 // $dropdown-button-pip-size-tny: $button-tny;
-// $dropdown-button-pip-right-tny: $button-tny * 2;
-// $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px);
+// $dropdown-button-pip-opposite-tny: $button-tny * 2;
+// $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1);
-// Small dropdown buttons
+// We use these to style small dropdown buttons
 // $dropdown-button-padding-sml: $button-sml * 5;
 // $dropdown-button-pip-size-sml: $button-sml;
-// $dropdown-button-pip-right-sml: $button-sml * 2;
-// $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px);
+// $dropdown-button-pip-opposite-sml: $button-sml * 2;
+// $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1);
-// Medium dropdown buttons
+// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-med * 4 + emCalc(3px);
-// $dropdown-button-pip-size-med: $button-med - emCalc(3px);
-// $dropdown-button-pip-right-med: $button-med * 2;
-// $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px);
+// $dropdown-button-padding-med: $button-med * 4 + emCalc(3);
+// $dropdown-button-pip-size-med: $button-med - emCalc(3);
+// $dropdown-button-pip-opposite-med: $button-med * 2;
+// $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2);
-// Large dropdown buttons
+// We use these to style large dropdown buttons
 // $dropdown-button-padding-lrg: $button-lrg * 4;
-// $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
-// $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
+// $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6);
+// $dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12);
+// $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3);
 //
 // Split Button Variables
 //
-// Shared styles for Split Buttons
+// We use these to control different shared styles for Split Buttons
 // $split-button-function-factor: 15%;
 // $split-button-pip-color: #fff;
 // $split-button-pip-color-alt: #333;
 // $split-button-active-bg-tint: rgba(0,0,0,0.1);
-// Tiny split buttons
+// We use these to control tiny split buttons
 // $split-button-padding-tny: $button-tny * 9;
 // $split-button-span-width-tny: $button-tny * 6.5;
 // $split-button-pip-size-tny: $button-tny;
 // $split-button-pip-top-tny: $button-tny * 2;
-// $split-button-pip-left-tny: emCalc(-5px);
+// $split-button-pip-default-float-tny: emCalc(-5);
-// Small split buttons
+// We use these to control small split buttons
 // $split-button-padding-sml: $button-sml * 7;
 // $split-button-span-width-sml: $button-sml * 5;
 // $split-button-pip-size-sml: $button-sml;
 // $split-button-pip-top-sml: $button-sml * 1.5;
-// $split-button-pip-left-sml: emCalc(-9px);
+// $split-button-pip-default-float-sml: emCalc(-9);
-// Medium split buttons
+// We use these to control medium split buttons
 // $split-button-padding-med: $button-med * 6.4;
 // $split-button-span-width-med: $button-med * 4;
-// $split-button-pip-size-med: $button-med - emCalc(3px);
+// $split-button-pip-size-med: $button-med - emCalc(3);
 // $split-button-pip-top-med: $button-med * 1.5;
-// $split-button-pip-left-med: emCalc(-9px);
+// $split-button-pip-default-float-med: emCalc(-9);
-// Large split buttons
+// We use these to control large split buttons
 // $split-button-padding-lrg: $button-lrg * 6;
 // $split-button-span-width-lrg: $button-lrg * 3.75;
-// $split-button-pip-size-lrg: $button-lrg - emCalc(6px);
-// $split-button-pip-top-lrg: $button-lrg + emCalc(5px);
-// $split-button-pip-left-lrg: emCalc(-9px);
+// $split-button-pip-size-lrg: $button-lrg - emCalc(6);
+// $split-button-pip-top-lrg: $button-lrg + emCalc(5);
+// $split-button-pip-default-float-lrg: emCalc(-9);
 //
-// Alert Variables
+// Alert Box Variables
 //
-// Alert padding
+// We use this to control alert padding.
-// $alert-padding-top: emCalc(11px);
+// $alert-padding-top: emCalc(11);
 // $alert-padding-default-float: $alert-padding-top;
-// $alert-padding-opposite-direction: $alert-padding-top + emCalc(10px);
-// $alert-padding-bottom: $alert-padding-top + emCalc(1px);
+// $alert-padding-opposite-direction: $alert-padding-top + emCalc(10);
+// $alert-padding-bottom: $alert-padding-top + emCalc(1);
-// Text style
+// We use these to control text style.
 // $alert-font-weight: bold;
-// $alert-font-size: emCalc(14px);
+// $alert-font-size: emCalc(14);
 // $alert-font-color: #fff;
 // $alert-font-color-alt: darken($secondary-color, 60%);
-// Hover effect
+// We use this for close hover effect.
 // $alert-function-factor: 10%;
-// Border Styles
+// We use these to control border styles.
 // $alert-border-style: solid;
 // $alert-border-width: 1px;
 // $alert-border-color: darken($primary-color, $alert-function-factor);
-// $alert-bottom-margin: emCalc(20px);
+// $alert-bottom-margin: emCalc(20);
-// Close Button style
+// We use these to style the close buttons
 // $alert-close-color: #333;
-// $alert-close-position: emCalc(5px);
-// $alert-close-font-size: emCalc(22px);
+// $alert-close-position: emCalc(5);
+// $alert-close-font-size: emCalc(22);
 // $alert-close-opacity: 0.3;
 // $alert-close-opacity-hover: 0.5;
 // $alert-close-padding: 5px 4px 4px;
-// Border radius
+// We use this to control border radius
 // $alert-radius: $global-radius;
@@ -496,16 +520,16 @@ $default-float: left;
 // Breadcrumb Variables
 //
-// Background color for the breadcrumb container.
+// We use this to set the background color for the breadcrumb container.
 // $crumb-bg: lighten($secondary-color, 5%);
-// Padding around the breadcrumbs.
+// We use these to set the padding around the breadcrumbs.
-// $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
-// $crumb-side-padding: emCalc(12px);
+// $crumb-padding: emCalc(9, 14, 9);
+// $crumb-side-padding: emCalc(12);
-// Border styles.
+// We use these to control border styles.
 // $crumb-function-factor: 10%;
 // $crumb-border-size: 1px;
@@ -513,16 +537,16 @@ $default-float: left;
 // $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
 // $crumb-radius: $global-radius;
-// Various text styles for breadcrumbs.
+// We use these to set various text styles for breadcrumbs.
-// $crumb-font-size: emCalc(11px);
+// $crumb-font-size: emCalc(11);
 // $crumb-font-color: $primary-color;
 // $crumb-font-color-current: #333;
 // $crumb-font-color-unavailable: #999;
 // $crumb-font-transform: uppercase;
 // $crumb-link-decor: underline;
-// Slash between breadcrumbs
+// We use these to control the slash between breadcrumbs
 // $crumb-slash-color: #aaa;
 // $crumb-slash: "/";
@@ -531,29 +555,29 @@ $default-float: left;
 // Clearing Variables
 //
-// Background colors for parts of Clearing.
+// We use these to set the background colors for parts of Clearing.
 // $clearing-bg: #111;
 // $clearing-caption-bg: $clearing-bg;
 // $clearing-carousel-bg: #111;
 // $clearing-img-bg: $clearing-bg;
-// Close button
+// We use these to style the close button
 // $clearing-close-color: #fff;
 // $clearing-close-size: 40px;
-// Style the arrows
+// We use these to style the arrows
 // $clearing-arrow-size: 16px;
 // $clearing-arrow-color: $clearing-close-color;
-// Style captions
+// We use these to style captions
 // $clearing-caption-font-color: #fff;
 // $clearing-caption-padding: 10px 30px;
-// Make the image and carousel height and style
+// We use these to make the image and carousel height and style
 // $clearing-active-img-height: 75%;
 // $clearing-carousel-height: 150px;
@@ -564,7 +588,7 @@ $default-float: left;
 // Custom Form Variables
 //
-// Basic form styles input styles
+// We use these to control the basic form styles input styles
 // $custom-form-border-color: #ccc;
 // $custom-form-border-size: 1px;
@@ -572,23 +596,23 @@ $default-float: left;
 // $custom-form-bg-disabled: #ddd;
 // $custom-form-input-size: 16px;
 // $custom-form-check-color: #222;
-// $custom-form-check-size: 14px;
+// $custom-form-check-size: 16px;
 // $custom-form-radio-size: 8px;
 // $custom-form-checkbox-radius: 0px;
-// Custom select form element.
+// We use these to style the custom select form element.
 // $custom-select-bg: #fff;
 // $custom-select-fade-to-color: #f3f3f3;
 // $custom-select-border-color: #ddd;
 // $custom-select-triangle-color: #aaa;
 // $custom-select-triangle-color-open: #222;
-// $custom-select-height: emCalc(13px) + ($form-spacing * 1.5);
-// $custom-select-margin-bottom: emCalc(20px);
+// $custom-select-height: emCalc(13) + ($form-spacing * 1.5);
+// $custom-select-margin-bottom: emCalc(20);
 // $custom-select-font-color-selected: #141414;
 // $custom-select-disabled-color: #888;
-// Custom select dropdown element.
+// We use these to control the style of the custom select dropdown element.
 // $custom-dropdown-height: 200px;
 // $custom-dropdown-bg: #fff;
@@ -596,68 +620,71 @@ $default-float: left;
 // $custom-dropdown-border-width: 1px;
 // $custom-dropdown-border-style: solid;
 // $custom-dropdown-font-color: #555;
-// $custom-dropdown-font-size: emCalc(14px);
+// $custom-dropdown-font-size: emCalc(14);
 // $custom-dropdown-color-selected: #eeeeee;
 // $custom-dropdown-font-color-selected: #000;
 // $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
-// $custom-dropdown-offset-top: none;
-// $custom-dropdown-list-padding: emCalc(4px);
-// $custom-dropdown-left-padding: emCalc(6px);
-// $custom-dropdown-right-padding: emCalc(38px);
-// $custom-dropdown-list-item-min-height: emCalc(24px);
+// $custom-dropdown-offset-top: auto;
+// $custom-dropdown-list-padding: emCalc(4);
+// $custom-dropdown-default-float-padding: emCalc(6);
+// $custom-dropdown-opposite-padding: emCalc(38);
+// $custom-dropdown-list-item-min-height: emCalc(24);
+// $custom-dropdown-width-small: 134px;
+// $custom-dropdown-width-medium: 254px;
+// $custom-dropdown-width-large: 434px;
 //
 // Dropdown Variables
 //
-// Height and width styles.
+// We use these to controls height and width styles.
 // $f-dropdown-max-width: 200px;
 // $f-dropdown-height: auto;
 // $f-dropdown-max-height: none;
 // $f-dropdown-margin-top: 2px;
-// Background color
+// We use this to control the background color
 // $f-dropdown-bg: #fff;
-// Border styles for dropdowns.
+// We use this to set the border styles for dropdowns.
 // $f-dropdown-border-style: solid;
 // $f-dropdown-border-width: 1px;
 // $f-dropdown-border-color: darken(#fff, 20%);
-// Triangle pip.
+// We use these to style the triangle pip.
 // $f-dropdown-triangle-size: 6px;
 // $f-dropdown-triangle-color: #fff;
 // $f-dropdown-triangle-side-offset: 10px;
-// List elements.
+// We use these to control styles for the list elements.
 // $f-dropdown-list-style: none;
 // $f-dropdown-font-color: #555;
-// $f-dropdown-font-size: emCalc(14px);
-// $f-dropdown-list-padding: emCalc(5px) emCalc(10px);
-// $f-dropdown-line-height: emCalc(18px);
+// $f-dropdown-font-size: emCalc(14);
+// $f-dropdown-list-padding: emCalc(5, 10);
+// $f-dropdown-line-height: emCalc(18);
 // $f-dropdown-list-hover-bg: #eeeeee;
-// $dropdown-mobile-left: 0;
+// $dropdown-mobile-default-float: 0;
-// When the dropdown has custom content.
+// We use this to control the styles for when the dropdown has custom content.
-// $f-dropdown-content-padding: emCalc(20px);
+// $f-dropdown-content-padding: emCalc(20);
 //
 // Flex Video Variables
 //
-// Video container padding and margins
+// We use these to control video container padding and margins
-// $flex-video-padding-top: emCalc(25px);
+// $flex-video-padding-top: emCalc(25);
 // $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: emCalc(16px);
+// $flex-video-margin-bottom: emCalc(16);
-// Widescreen bottom padding
+// We use this to control widescreen bottom padding
 // $flex-video-widescreen-padding-bottom: 57.25%;
@@ -665,21 +692,24 @@ $default-float: left;
 // Inline List Variables
 //
-// Margins and padding of the inline list.
+// We use this to control the margins and padding of the inline list.
+// $inline-list-top-margin: 0;
+// $inline-list-opposite-margin: 0;
+// $inline-list-bottom-margin: emCalc(17);
+// $inline-list-default-float-margin: emCalc(-22);
-// $inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
-// $inline-list-margin: 0 0;
 // $inline-list-padding: 0;
-// Overflow of the inline list.
+// We use this to control the overflow of the inline list.
 // $inline-list-overflow: hidden;
-// List items
+// We use this to control the list items
 // $inline-list-display: block;
-// Elments within list items
+// We use this to control any elments within list items
 // $inline-list-children-display: block;
@@ -687,38 +717,38 @@ $default-float: left;
 // Joyride Variables
 //
-// Joyride styles
+// Controlling default Joyride styles
 // $joyride-tip-bg: rgb(0,0,0);
 // $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
+// $joyride-tip-padding: emCalc(18, 20, 24);
 // $joyride-tip-border: solid 1px #555;
 // $joyride-tip-radius: 4px;
 // $joyride-tip-position-offset: 22px;
-// Tip font styles
+// Here, we're setting the tip dont styles
 // $joyride-tip-font-color: #fff;
-// $joyride-tip-font-size: emCalc(14px);
+// $joyride-tip-font-size: emCalc(14);
 // $joyride-tip-header-weight: bold;
-// Changes the nub size
+// This changes the nub size
 // $joyride-tip-nub-size: 14px;
-// Adjusts the styles for the timer when its enabled
+// This adjusts the styles for the timer when its enabled
 // $joyride-tip-timer-width: 50px;
 // $joyride-tip-timer-height: 3px;
 // $joyride-tip-timer-color: #666;
-// Changes up the styles for the close button
+// This changes up the styles for the close button
 // $joyride-tip-close-color: #777;
 // $joyride-tip-close-size: 30px;
 // $joyride-tip-close-weight: normal;
-// When Joyride is filling the screen, style for the bg
+// When Joyride is filling the screen, we use this style for the bg
 // $joyride-screenfill: rgba(0,0,0,0.5);
@@ -726,19 +756,19 @@ $default-float: left;
 // Keystroke Variables
 //
-// Text styles.
+// We use these to control text styles.
 // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: emCalc(15px);
+// $keystroke-font-size: emCalc(14);
 // $keystroke-font-color: #222;
 // $keystroke-font-color-alt: #fff;
 // $keystroke-function-factor: 7%;
-// Keystroke padding.
+// We use this to control keystroke padding.
-// $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
+// $keystroke-padding: emCalc(2, 4, 0);
-// Background and border styles.
+// We use these to control background and border styles.
 // $keystroke-bg: darken(#fff, $keystroke-function-factor);
 // $keystroke-border-style: solid;
@@ -750,14 +780,14 @@ $default-float: left;
 // Label Variables
 //
-// Style the labels
+// We use these to style the labels
-// $label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
+// $label-padding: emCalc(3, 10, 4);
 // $label-radius: $global-radius;
 // We use these to style the label text
-// $label-font-sizing: emCalc(14px);
+// $label-font-sizing: emCalc(14);
 // $label-font-weight: bold;
 // $label-font-color: #333;
 // $label-font-color-alt: #fff;
@@ -766,8 +796,6 @@ $default-float: left;
 // Magellan Variables
 //
-// Basic visual styles
 // $magellan-bg: #fff;
 // $magellan-padding: 10px;
@@ -775,29 +803,29 @@ $default-float: left;
 // Orbit Settings
 //
-// Caption styles
+// We use these to control the caption styles
 // $orbit-container-bg: #f5f5f5;
 // $orbit-caption-bg-old: rgb(0,0,0);
 // $orbit-caption-bg: rgba(0,0,0,0.6);
 // $orbit-caption-font-color: #fff;
-// Left/right nav styles
+// We use these to control the left/right nav styles
 // $orbit-nav-bg-old: rgb(0,0,0);
 // $orbit-nav-bg: rgba(0,0,0,0.6);
-// Timer styles
+// We use these to control the timer styles
 // $orbit-timer-bg-old: rgb(0,0,0);
 // $orbit-timer-bg: rgba(0,0,0,0.6);
-// Bullet nav styles
+// We use these to control the bullet nav styles
 // $orbit-bullet-nav-color: #999;
-// $orbit-bullet-nav-color-active: #222;
+// $orbit-bullet-nav-color-active: #555;
-// Slide numbers
+// We use thes to controls the style of slide numbers
 // $orbit-slide-number-bg: rgba(0,0,0,0);
 // $orbit-slide-number-font-color: #fff;
@@ -806,149 +834,150 @@ $default-float: left;
 // Graceful Loading Wrapper and preloader
 // $wrapper-class: "slideshow-wrapper";
-// $preloader-class: "preloader" ;
+// $preloader-class: "preloader";
 //
 // Pagination Variables
 //
-// Pagination container
+// We use these to control the pagination container
-// $pagination-height: emCalc(24px);
-// $pagination-margin: emCalc(-5px);
+// $pagination-height: emCalc(24);
+// $pagination-margin: emCalc(-5);
-// List-item properties
+// We use these to set the list-item properties
 // $pagination-li-float: $default-float;
-// $pagination-li-height: emCalc(24px);
+// $pagination-li-height: emCalc(24);
 // $pagination-li-font-color: #222;
-// $pagination-li-font-size: emCalc(14px);
-// $pagination-li-margin: emCalc(5px);
+// $pagination-li-font-size: emCalc(14);
+// $pagination-li-margin: emCalc(5);
-// Pagination anchor links
+// We use these for the pagination anchor links
-// $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
+// $pagination-link-pad: emCalc(1, 7, 1);
 // $pagination-link-font-color: #999;
 // $pagination-link-active-bg: darken(#fff, 10%);
-// Disabled anchor links
+// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: $cursor-default-value;
+// $pagination-link-unavailable-cursor: default;
 // $pagination-link-unavailable-font-color: #999;
 // $pagination-link-unavailable-bg-active: transparent;
-// Currently selected anchor links
+// We use these for currently selected anchor links
 // $pagination-link-current-background: $primary-color;
 // $pagination-link-current-font-color: #fff;
 // $pagination-link-current-font-weight: bold;
-// $pagination-link-current-cursor: $cursor-default-value;
+// $pagination-link-current-cursor: default;
 // $pagination-link-current-active-bg: $primary-color;
 //
 // Panel Variables
 //
-// Background and border styles
+// We use these to control the background and border styles
 // $panel-bg: darken(#fff, 5%);
 // $panel-border-style: solid;
 // $panel-border-size: 1px;
-// Control how much we darken things on hover
+// We use this % to control how much we darken things on hover
 // $panel-function-factor: 10%;
 // $panel-border-color: darken($panel-bg, $panel-function-factor);
-// Inner padding and bottom margin
+// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: emCalc(20px);
-// $panel-padding: emCalc(20px);
+// $panel-margin-bottom: emCalc(20);
+// $panel-padding: emCalc(20);
-// Font colors
+// We use these to set default font colors
 // $panel-font-color: #333;
 // $panel-font-color-alt: #fff;
-// $panel-header-adjust: true; // Set to false to keep default header styles
+// $panel-header-adjust: true;
 //
 // Pricing Table Variables
 //
-// Border color
+// We use this to control the border color
 // $price-table-border: solid 1px #ddd;
-// Bottom margin of the pricing table
+// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: emCalc(20px);
+// $price-table-margin-bottom: emCalc(20);
-// Control the title styles
+// We use these to control the title styles
 // $price-title-bg: #ddd;
-// $price-title-padding: emCalc(15px) emCalc(20px);
+// $price-title-padding: emCalc(15, 20);
 // $price-title-align: center;
 // $price-title-color: #333;
 // $price-title-weight: bold;
-// $price-title-size: emCalc(16px);
+// $price-title-size: emCalc(16);
-// Control the price styles
+// We use these to control the price styles
 // $price-money-bg: #eee;
-// $price-money-padding: emCalc(15px) emCalc(20px);
+// $price-money-padding: emCalc(15, 20);
 // $price-money-align: center;
 // $price-money-color: #333;
 // $price-money-weight: normal;
-// $price-money-size: emCalc(20px);
+// $price-money-size: emCalc(20);
-// Description styles
+// We use these to control the description styles
 // $price-bg: #fff;
 // $price-desc-color: #777;
-// $price-desc-padding: emCalc(15px);
+// $price-desc-padding: emCalc(15);
 // $price-desc-align: center;
-// $price-desc-font-size: emCalc(12px);
+// $price-desc-font-size: emCalc(12);
 // $price-desc-weight: normal;
 // $price-desc-line-height: 1.4;
 // $price-desc-bottom-border: dotted 1px #ddd;
-// List item styles
+// We use these to control the list item styles
 // $price-item-color: #333;
-// $price-item-padding: emCalc(15px);
+// $price-item-padding: emCalc(15);
 // $price-item-align: center;
-// $price-item-font-size: emCalc(14px);
+// $price-item-font-size: emCalc(14);
 // $price-item-weight: normal;
 // $price-item-bottom-border: dotted 1px #ddd;
-// CTA area styles
+// We use these to control the CTA area styles
 // $price-cta-bg: #f5f5f5;
 // $price-cta-align: center;
-// $price-cta-padding: emCalc(20px) emCalc(20px) 0;
+// $price-cta-padding: emCalc(20, 20, 0);
 //
 // Progress Bar Variables
 //
-// Progress bar height
+// We use this to se the prog bar height
-// $progress-bar-height: emCalc(25px);
+// $progress-bar-height: emCalc(25);
 // $progress-bar-color: transparent;
-// Border styles
+// We use these to control the border styles
 // $progress-bar-border-color: darken(#fff, 20%);
 // $progress-bar-border-size: 1px;
 // $progress-bar-border-style: solid;
 // $progress-bar-border-radius: $global-radius;
-// Margin & padding
+// We use these to control the margin & padding
-// $progress-bar-pad: emCalc(2px);
-// $progress-bar-margin-bottom: emCalc(10px);
+// $progress-bar-pad: emCalc(2);
+// $progress-bar-margin-bottom: emCalc(10);
-// Meter colors
+// We use these to set the meter colors
 // $progress-meter-color: $primary-color;
 // $progress-meter-secondary-color: $secondary-color;
@@ -959,28 +988,28 @@ $default-float: left;
 // Reveal Variables
 //
-// Reveal overlay.
+// We use these to control the style of the reveal overlay.
 // $reveal-overlay-bg: rgba(#000, .45);
 // $reveal-overlay-bg-old: #000;
-// Modal itself.
+// We use these to control the style of the modal itself.
 // $reveal-modal-bg: #fff;
 // $reveal-position-top: 50px;
 // $reveal-default-width: 80%;
-// $reveal-modal-padding: emCalc(20px);
+// $reveal-modal-padding: emCalc(20);
 // $reveal-box-shadow: 0 0 10px rgba(#000,.4);
-// Reveal close button
+// We use these to style the reveal close button
-// $reveal-close-font-size: emCalc(22px);
-// $reveal-close-top: emCalc(8px);
-// $reveal-close-side: emCalc(11px);
+// $reveal-close-font-size: emCalc(22);
+// $reveal-close-top: emCalc(8);
+// $reveal-close-side: emCalc(11);
 // $reveal-close-color: #aaa;
 // $reveal-close-weight: bold;
-// Modal border
+// We use these to control the modal border
 // $reveal-border-style: solid;
 // $reveal-border-width: 1px;
@@ -993,21 +1022,22 @@ $default-float: left;
 // Section Variables
 //
-// Padding and hover factor
+// We use these to set padding and hover factor
-// $section-title-padding: emCalc(15px);
-// $section-content-padding: emCalc(15px);
+// $section-title-padding: emCalc(15);
+// $section-content-padding: emCalc(15);
 // $section-function-factor: 10%;
-// Titles
+// These style the titles
 // $section-title-color: #333;
+// $section-title-color-active: #333;
 // $section-title-bg: #efefef;
 // $section-title-bg-active: darken($section-title-bg, $section-function-factor);
 // $section-title-bg-active-tabs: #fff;
-// $section-title-bg-hover: darken($section-title-bg, $section-function-factor/2);
+// $section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2);
-// Border size
+// Want to control border size, here ya go!
 // $section-border-size: 1px;
 // $section-border-style: solid;
@@ -1015,40 +1045,41 @@ $default-float: left;
 // Font controls
-// $section-font-size: emCalc(14px);
+// $section-font-size: emCalc(14);
 // Control the color of the background and some size options
 // $section-content-bg: #fff;
-// $section-vertical-nav-min-width: emCalc(200px);
-// $section-vertical-tabs-title-width: emCalc(200px);
-// $section-bottom-margin: emCalc(20px);
+// $section-vertical-nav-min-width: emCalc(200);
+// $section-vertical-tabs-title-width: emCalc(200);
+// $section-bottom-margin: emCalc(20);
 // $title-selector: ".title";
 // $content-selector: ".content";
+// $active-region-selector: ".active";
 //
 // Side Nav Variables
 //
-// Padding
+// We use this to control padding.
-// $side-nav-padding: emCalc(14px) 0;
+// $side-nav-padding: emCalc(14, 0);
-// List styles
+// We use these to control list styles.
 // $side-nav-list-type: none;
 // $side-nav-list-position: inside;
-// $side-nav-list-margin: 0 0 emCalc(7px) 0;
+// $side-nav-list-margin: emCalc(0, 0, 7, 0);
-// Link styles
+// We use these to control link styles.
 // $side-nav-link-color: $primary-color;
 // $side-nav-link-color-active: lighten(#000, 30%);
-// $side-nav-font-size: emCalc(14px);
+// $side-nav-font-size: emCalc(14);
 // $side-nav-font-weight: bold;
-// Border styles
+// We use these to control border styles
 // $side-nav-divider-size: 1px;
 // $side-nav-divider-style: solid;
@@ -1058,47 +1089,47 @@ $default-float: left;
 // Sub Nav Variables
 //
-// Margin and padding
+// We use these to control margin and padding
-// $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
-// $sub-nav-list-padding-top: emCalc(4px);
+// $sub-nav-list-margin: emCalc(-4, 0, 18);
+// $sub-nav-list-padding-top: emCalc(4);
-// Definition
+// We use this to control the definition
-// $sub-nav-font-size: emCalc(14px);
+// $sub-nav-font-size: emCalc(14);
 // $sub-nav-font-color: #999;
 // $sub-nav-font-weight: normal;
 // $sub-nav-text-decoration: none;
 // $sub-nav-border-radius: 1000px;
-// Active item styles
+// We use these to control the active item styles
 // $sub-nav-active-font-weight: bold;
 // $sub-nav-active-bg: $primary-color;
 // $sub-nav-active-color: #fff;
-// $sub-nav-active-padding: emCalc(3px) emCalc(9px);
-// $sub-nav-active-cursor: $cursor-default-value;
+// $sub-nav-active-padding: emCalc(3, 9);
+// $sub-nav-active-cursor: default;
 //
 // Switch Variables
 //
-// Border styles and background colors for the switch container
+// Controlling border styles and background colors for the switch container
 // $switch-border-color: darken(#fff, 20%);
 // $switch-border-style: solid;
 // $switch-border-width: 1px;
 // $switch-bg: #fff;
-// Switch heights for our default classes
+// We use these to control the switch heights for our default classes
 // $switch-height-tny: 22px;
 // $switch-height-sml: 28px;
 // $switch-height-med: 36px;
 // $switch-height-lrg: 44px;
-// $switch-bottom-margin: emCalc(20px);
+// $switch-bottom-margin: emCalc(20);
-// Font sizes for our classes.
+// We use these to control default font sizes for our classes.
 // $switch-font-size-tny: 11px;
 // $switch-font-size-sml: 12px;
@@ -1106,7 +1137,7 @@ $default-float: left;
 // $switch-font-size-lrg: 17px;
 // $switch-label-side-padding: 6px;
-// Switch-paddle
+// We use these to style the switch-paddle
 // $switch-paddle-bg: #fff;
 // $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
@@ -1126,42 +1157,42 @@ $default-float: left;
 // Table Variables
 //
-// Background color for the table and even rows
+// These control the background color for the table and even rows
 // $table-bg: #fff;
 // $table-even-row-bg: #f9f9f9;
-// Table cell border style
+// These control the table cell border style
 // $table-border-style: solid;
 // $table-border-size: 1px;
 // $table-border-color: #ddd;
-// Table head styles
+// These control the table head styles
 // $table-head-bg: #f5f5f5;
-// $table-head-font-size: emCalc(14px);
+// $table-head-font-size: emCalc(14);
 // $table-head-font-color: #222;
 // $table-head-font-weight: bold;
-// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
+// $table-head-padding: emCalc(8, 10, 10);
-// Row padding and font styles
+// These control the row padding and font styles
-// $table-row-padding: emCalc(9px) emCalc(10px);
-// $table-row-font-size: emCalc(14px);
+// $table-row-padding: emCalc(9, 10);
+// $table-row-font-size: emCalc(14);
 // $table-row-font-color: #222;
-// $table-line-height: emCalc(18px);
+// $table-line-height: emCalc(18);
-// Display and margin of tables
+// These are for controlling the display and margin of tables
 // $table-display: table-cell;
-// $table-margin-bottom: emCalc(20px);
+// $table-margin-bottom: emCalc(20);
 //
 // Image Thumbnail Variables
 //
-// Border styles
+// We use these to control border styles
 // $thumb-border-style: solid;
 // $thumb-border-width: 4px;
@@ -1185,16 +1216,16 @@ $default-float: left;
 // $has-tip-font-color-hover: $primary-color;
 // $has-tip-cursor-type: help;
-// $tooltip-padding: emCalc(8px);
+// $tooltip-padding: emCalc(8);
 // $tooltip-bg: #000;
-// $tooltip-font-size: emCalc(15px);
+// $tooltip-font-size: emCalc(15);
 // $tooltip-font-weight: bold;
 // $tooltip-font-color: #fff;
 // $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: emCalc(10px);
+// $tooltip-close-font-size: emCalc(10);
 // $tooltip-close-font-weight: normal;
 // $tooltip-close-font-color: #888;
-// $tooltip-font-size-sml: emCalc(14px);
+// $tooltip-font-size-sml: emCalc(14);
 // $tooltip-radius: $global-radius;
 // $tooltip-pip-size: 5px;
@@ -1204,12 +1235,12 @@ $default-float: left;
 // Background color for the top bar
-// $topbar-bg: #111 !default;
+// $topbar-bg: #111;
 // Height and margin
 // $topbar-height: 45px;
-// $topbar-margin-bottom: emCalc(30px);
+// $topbar-margin-bottom: emCalc(30);
 // Control Input height for top bar
@@ -1218,7 +1249,7 @@ $default-float: left;
 // Controlling the styles for the title in the top bar
 // $topbar-title-weight: bold;
-// $topbar-title-font-size: emCalc(17px);
+// $topbar-title-font-size: emCalc(17);
 // Style the top bar dropdown elements
@@ -1235,7 +1266,7 @@ $default-float: left;
 // $topbar-link-color-hover: #fff;
 // $topbar-link-color-active: #fff;
 // $topbar-link-weight: bold;
-// $topbar-link-font-size: emCalc(13px);
+// $topbar-link-font-size: emCalc(13);
 // $topbar-link-hover-lightness: -30%; // Darken by 30%
 // $topbar-link-bg-hover: darken($topbar-bg, 3%);
 // $topbar-link-bg-active: darken($topbar-bg, 3%);
@@ -1243,12 +1274,12 @@ $default-float: left;
 // $topbar-dropdown-label-color: #555;
 // $topbar-dropdown-label-text-transform: uppercase;
 // $topbar-dropdown-label-font-weight: bold;
-// $topbar-dropdown-label-font-size: emCalc(10px);
+// $topbar-dropdown-label-font-size: emCalc(10);
 // Top menu icon styles
 // $topbar-menu-link-transform: uppercase;
-// $topbar-menu-link-font-size: emCalc(13px);
+// $topbar-menu-link-font-size: emCalc(13);
 // $topbar-menu-link-weight: bold;
 // $topbar-menu-link-color: #fff;
 // $topbar-menu-icon-color: #fff;
@@ -1258,7 +1289,7 @@ $default-float: left;
 // Transitions and breakpoint styles
 // $topbar-transition-speed: 300ms;
-// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
+// $topbar-breakpoint: emCalc(940); // Change to 9999px for always mobile layout
 // $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
 // Divider Styles