RubyGems - zurb-foundation - Versions diffs - 4.2.1 → 4.2.2 - Mend

zurb-foundation 4.2.1 → 4.2.2

Files changed (92) hide show

data/Gemfile.lock +2 -2
data/README.md +9 -1
data/composer.json +9 -0
data/docs/CHANGELOG.md +19 -5
data/docs/components/alert-boxes.html.erb +19 -19
data/docs/components/breadcrumbs.html.erb +15 -15
data/docs/components/buttons.html.erb +19 -19
data/docs/components/clearing.html.erb +13 -13
data/docs/components/dropdown-buttons.html.erb +13 -13
data/docs/components/dropdown.html.erb +18 -18
data/docs/components/flex-video.html.erb +3 -3
data/docs/components/forms.html.erb +39 -39
data/docs/components/grid.html.erb +1 -1
data/docs/components/inline-lists.html.erb +5 -5
data/docs/components/joyride.html.erb +18 -18
data/docs/components/keystrokes.html.erb +10 -10
data/docs/components/kitchen-sink.html.erb +1 -1
data/docs/components/labels.html.erb +2 -2
data/docs/components/pagination.html.erb +17 -17
data/docs/components/panels.html.erb +13 -10
data/docs/components/pricing-tables.html.erb +30 -30
data/docs/components/reveal.html.erb +14 -14
data/docs/components/section.html.erb +15 -15
data/docs/components/side-nav.html.erb +9 -9
data/docs/components/split-buttons.html.erb +23 -23
data/docs/components/sub-nav.html.erb +11 -11
data/docs/components/switch.html.erb +24 -24
data/docs/components/tables.html.erb +15 -15
data/docs/components/thumbnails.html.erb +5 -5
data/docs/components/tooltips.html.erb +18 -18
data/docs/components/top-bar.html.erb +39 -39
data/docs/components/type.html.erb +63 -63
data/docs/css/docs.scss +3 -1
data/docs/img/favicons/apple-touch-icon-114x114-precomposed.png +0 -0
data/docs/img/favicons/apple-touch-icon-144x144-precomposed.png +0 -0
data/docs/img/favicons/apple-touch-icon-72x72-precomposed.png +0 -0
data/docs/img/favicons/apple-touch-icon-precomposed.png +0 -0
data/docs/img/favicons/favicon.ico +0 -0
data/docs/layout.html.erb +10 -1
data/docs/sass.html.erb +258 -292
data/js/foundation/foundation.alerts.js +3 -3
data/js/foundation/foundation.clearing.js +5 -5
data/js/foundation/foundation.dropdown.js +1 -1
data/js/foundation/foundation.forms.js +23 -14
data/js/foundation/foundation.interchange.js +8 -8
data/js/foundation/foundation.joyride.js +2 -2
data/js/foundation/foundation.js +2 -2
data/js/foundation/foundation.magellan.js +4 -2
data/js/foundation/foundation.orbit.js +2 -2
data/js/foundation/foundation.placeholder.js +21 -1
data/js/foundation/foundation.reveal.js +3 -3
data/js/foundation/foundation.section.js +4 -3
data/js/foundation/foundation.tooltips.js +2 -2
data/js/foundation/foundation.topbar.js +8 -8
data/js/foundation/index.js +1 -1
data/js/vendor/jquery.js +4412 -4202
data/js/vendor/zepto.js +116 -0
data/lib/foundation/sprockets.rb +4 -0
data/lib/foundation/version.rb +1 -1
data/lib/zurb-foundation.rb +6 -2
data/scss/foundation/_variables.scss +56 -55
data/scss/foundation/components/_alert-boxes.scss +20 -20
data/scss/foundation/components/_block-grid.scss +1 -1
data/scss/foundation/components/_breadcrumbs.scss +15 -15
data/scss/foundation/components/_buttons.scss +23 -21
data/scss/foundation/components/_clearing.scss +14 -13
data/scss/foundation/components/_custom-forms.scss +35 -35
data/scss/foundation/components/_dropdown-buttons.scss +13 -13
data/scss/foundation/components/_dropdown.scss +19 -18
data/scss/foundation/components/_flex-video.scss +3 -3
data/scss/foundation/components/_forms.scss +40 -40
data/scss/foundation/components/_grid.scss +1 -1
data/scss/foundation/components/_inline-lists.scss +4 -4
data/scss/foundation/components/_joyride.scss +16 -16
data/scss/foundation/components/_keystrokes.scss +10 -10
data/scss/foundation/components/_labels.scss +3 -3
data/scss/foundation/components/_pagination.scss +17 -17
data/scss/foundation/components/_panels.scss +21 -18
data/scss/foundation/components/_pricing-tables.scss +30 -30
data/scss/foundation/components/_reveal.scss +14 -14
data/scss/foundation/components/_section.scss +16 -16
data/scss/foundation/components/_side-nav.scss +9 -9
data/scss/foundation/components/_split-buttons.scss +23 -23
data/scss/foundation/components/_sub-nav.scss +11 -11
data/scss/foundation/components/_switch.scss +23 -23
data/scss/foundation/components/_tables.scss +15 -15
data/scss/foundation/components/_thumbs.scss +5 -5
data/scss/foundation/components/_tooltips.scss +17 -17
data/scss/foundation/components/_top-bar.scss +37 -37
data/scss/foundation/components/_type.scss +63 -63
data/templates/upgrade/manifest.rb +2 -3
metadata +11 -4

@@ -7,7 +7,9 @@
 /* Coderay styles */
 .html, .css, .scss, .js { position: relative; }
-ul, ol, dl { list-style-position: inside; }
+.CodeRay {
+  ul, ol, dl { list-style-position: inside; }
+}
 .CodeRay:before {
   position: absolute;

data/docs/img/favicons/apple-touch-icon-114x114-precomposed.png ADDED

Binary file

data/docs/img/favicons/apple-touch-icon-144x144-precomposed.png ADDED

Binary file

data/docs/img/favicons/apple-touch-icon-72x72-precomposed.png ADDED

Binary file

data/docs/img/favicons/apple-touch-icon-precomposed.png ADDED

Binary file

data/docs/img/favicons/favicon.ico ADDED

Binary file

data/docs/layout.html.erb CHANGED

@@ -4,6 +4,15 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- For third-generation iPad with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicons/apple-touch-icon-144x144-precomposed.png">
+    <!-- For iPhone with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/apple-touch-icon-114x114-precomposed.png">
+    <!-- For first- and second-generation iPad: -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/apple-touch-icon-72x72-precomposed.png">
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link rel="apple-touch-icon-precomposed" href="img/favicons/apple-touch-icon-precomposed.png">
+    <link rel="icon" href="img/favicons/favicon.ico" type="image/x-icon">
     <title>Foundation Docs: <%= @page_title %></title>
     <link rel="stylesheet" href="<%= asset_path %>/normalize.css" />
     <link rel="stylesheet" href="<%= asset_path %>/docs.css" />
@@ -116,7 +125,7 @@
         .foundation()
         .foundation('joyride', 'start');
       <% else %>
-        .foundation(null, null, null, null, true);
+        .foundation();
       <% end %>
       // For Kitchen Sink Page

data/docs/sass.html.erb CHANGED

@@ -233,29 +233,29 @@ bundle exec compass create . -r zurb-foundation --using foundation
 <%= code_example '
 /* Foundation Variables */
-The default font-size is set to 100% of the browser style sheet (usually 16px)
-for compatibility with browser-based text zoom or user-set defaults.
+/* The default font-size is set to 100% of the browser style sheet (usually 16px) */
+/* for compatibility with browser-based text zoom or user-set defaults. */
 $base-font-size: 100% !default;
 $base-line-height is 24px while $base-font-size is 16px
 $base-line-height: 150%;
-This is the default html and body font-size for the base em value.
+/* This is the default html and body font-size for the base em value. */
-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;)
+/* 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;
-Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
+/* Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) */
 @function emCalc($pxWidth) {
   @return $pxWidth / $em-base * 1em;
 }
-Change whether or not you include browser prefixes
+/* Change whether or not you include browser prefixes */
 $experimental: true !default;
-Various global styles
+/* Various global styles */
 $default-float: left;
@@ -265,33 +265,33 @@ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 $body-font-weight: normal;
 $body-font-style: normal;
-Font-smoothing
+/* Font-smoothing */
 $font-smoothing: antialiased;
-Text direction settings
+/* Text direction settings */
 $text-direction: ltr;
-Colors
+/* Colors */
 $primary-color: #2ba6cb;
 $secondary-color: #e9e9e9;
 $alert-color: #c60f13;
 $success-color: #5da423;
-Make sure border radius matches unless we want it different.
+/* Make sure border radius matches unless we want it different. */
 $global-radius: 3px;
 $global-rounded: 1000px;
-Inset shadow shiny edges and depressions.
+/* Inset shadow shiny edges and depressions. */
 $shiny-edge-size: 0 1px 0;
 $shiny-edge-color: rgba(#fff, .5);
 $shiny-edge-active-color: rgba(#000, .2);
-Control whether or not CSS classes come through in the CSS files.
+/* Control whether or not CSS classes come through in the CSS files. */
 $include-html-classes: true;
 $include-print-styles: true;
@@ -318,7 +318,7 @@ $include-html-progress-classes: $include-html-classes;
 $include-html-magellan-classes: $include-html-classes;
 $include-html-tooltip-classes: $include-html-classes;
-Media Queries
+/* Media Queries */
 $small-screen: 768px;
 $medium-screen: 1280px;
@@ -331,9 +331,9 @@ $large: "only screen and (min-width: #{$large-screen})";
 $landscape: "only screen and (orientation: landscape)";
 $portrait: "only screen and (orientation: portrait)";
-Cursors
+/* Cursors */
-Custom use example -> $cursor-default-value: url(http://cursors-site.net/path/to/custom/cursor/default.cur),progress;
+/* Custom use example -> $cursor-default-value: url(http://cursors-site.net/path/to/custom/cursor/default.cur),progress; */
 $cursor-crosshair-value: "crosshair";
 $cursor-default-value: "default";
@@ -341,7 +341,7 @@ $cursor-pointer-value: "pointer";
 $cursor-help-value: "help";
-Grid Variables
+/* Grid Variables */
 $row-width: emCalc(1000px);
@@ -349,23 +349,23 @@ $column-gutter: emCalc(30px);
 $total-columns: 12;
-Block Grid Variables
+/* Block Grid Variables */
-Maximum number of block grid elements per row
+/* Maximum number of block grid elements per row */
 $block-grid-elements: 12;
 $block-grid-default-spacing: emCalc(20px);
-Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+/* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
 $block-grid-media-queries: true;
-Typography Variables
+/* Typography Variables */
-Heading font styles
+/* Heading font styles */
 $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 $header-font-weight: bold;
@@ -376,7 +376,7 @@ $header-top-margin: .2em;
 $header-bottom-margin: .5em;
 $header-text-rendering: optimizeLegibility;
-Heading font sizes
+/* Heading font sizes */
 $h1-font-size: emCalc(44px);
 $h2-font-size: emCalc(37px);
@@ -385,7 +385,7 @@ $h4-font-size: emCalc(23px);
 $h5-font-size: emCalc(18px);
 $h6-font-size: 1em;
-Subheaders
+/* Subheaders */
 $subheader-line-height: 1.4;
 $subheader-font-color: lighten($header-font-color, 30%);
@@ -393,12 +393,12 @@ $subheader-font-weight: 300;
 $subheader-top-margin: .2em;
 $subheader-bottom-margin: .5em;
-<small> styling
+/* <small> styling */
 $small-font-size: 60%;
 $small-font-color: lighten($header-font-color, 30%);
-Paragraphs
+/* Paragraphs */
 $paragraph-font-family: inherit;
 $paragraph-font-weight: normal;
@@ -409,26 +409,26 @@ $paragraph-aside-font-size: emCalc(14px);
 $paragraph-aside-line-height: 1.35;
 $paragraph-aside-font-style: italic;
-<code> tags
+/* <code> tags */
 $code-color: darken($alert-color, 15%);
 $code-font-family: Consolas, "Liberation Mono", Courier, monospace;
 $code-font-weight: bold;
-Anchors
+/* Anchors */
 $anchor-text-decoration: none;
 $anchor-font-color: $primary-color;
 $anchor-font-color-hover: darken($primary-color, 5%);
-<hr> element
+/* <hr> element */
 $hr-border-width: 1px;
 $hr-border-style: solid;
 $hr-border-color: #ddd;
 $hr-margin: emCalc(20px);
-Lists
+/* Lists */
 $list-style-position: outside;
 $list-side-margin: emCalc(20px);
@@ -437,7 +437,7 @@ $definition-list-header-weight: bold;
 $definition-list-header-margin-bottom: .3em;
 $definition-list-margin-bottom: emCalc(12px);
-Blockquotes
+/* Blockquotes */
 $blockquote-font-color: lighten($header-font-color, 30%);
 $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px);
@@ -446,48 +446,48 @@ $blockquote-cite-font-size: emCalc(13px);
 $blockquote-cite-font-color: lighten($header-font-color, 20%);
 $blockquote-cite-link-color: $blockquote-cite-font-color;
-Acronym
+/* Acronym */
 $acronym-underline: 1px dotted #ddd;
-Padding and margin
+/* Padding and margin */
 $microformat-padding: emCalc(10px) emCalc(12px);
 $microformat-margin: 0 0 emCalc(20px) 0;
-Border styles
+/* Border styles */
 $microformat-border-width: 1px;
 $microformat-border-style: solid;
 $microformat-border-color: #ddd;
-Full name font styles
+/* Full name font styles */
 $microformat-fullname-font-weight: bold;
 $microformat-fullname-font-size: emCalc(15px);
-Summary font styles
+/* Summary font styles */
 $microformat-summary-font-weight: bold;
-<abbr> padding
+/* <abbr> padding */
 $microformat-abbr-padding: 0 emCalc(1px);
-<abbr> font styles
+/* <abbr> font styles */
 $microformat-abbr-font-weight: bold;
 $microformat-abbr-font-decoration: none;
-Form Variables
+/* Form Variables */
-Base for lots of form spacing and positioning styles
+/* Base for lots of form spacing and positioning styles */
 $form-spacing: emCalc(16px);
-Labels
+/* Labels */
 $form-label-pointer: pointer;
 $form-label-font-size: emCalc(14px);
@@ -507,7 +507,7 @@ $input-disabled-bg: #ddd;
 $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 $input-include-glowing-effect: true;
-Fieldset border and spacing.
+/* Fieldset border and spacing. */
 $fieldset-border-style: solid;
 $fieldset-border-width: 1px;
@@ -515,13 +515,13 @@ $fieldset-border-color: #ddd;
 $fieldset-padding: emCalc(20px);
 $fieldset-margin: emCalc(18px) 0;
-Legends
+/* Legends */
 $legend-bg: #fff;
 $legend-font-weight: bold;
 $legend-padding: 0 emCalc(3px);
-Prefix and postfix input elements
+/* Prefix and postfix input elements */
 $input-prefix-bg: darken(#fff, 5%);
 $input-prefix-border-color: darken(#fff, 20%);
@@ -531,7 +531,7 @@ $input-prefix-overflow: hidden;
 $input-prefix-font-color: #333;
 $input-prefix-font-color-alt: #fff;
-Error states for inputs and labels
+/* Error states for inputs and labels */
 $input-error-message-padding: emCalc(6px) emCalc(4px);
 $input-error-message-top: -($form-spacing) - emCalc(5px);
@@ -540,28 +540,28 @@ $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
+/* Glowing effect of inputs when focused */
 $glowing-effect-fade-time: 0.45s;
 $glowing-effect-color: $input-focus-border-color;
-Button Variables
+/* Button Variables */
-Padding for buttons.
+/* Padding for buttons. */
 $button-tny: emCalc(7px);
 $button-sml: emCalc(9px);
 $button-med: emCalc(12px);
 $button-lrg: emCalc(16px);
-Display property.
+/* Display property. */
 $button-display: inline-block;
 $button-margin-bottom: emCalc(20px);
-Button text styles.
+/* Button text styles. */
 $button-font-family: inherit;
 $button-font-color: #fff;
@@ -573,63 +573,63 @@ $button-font-lrg: emCalc(20px);
 $button-font-weight: bold;
 $button-font-align: center;
-Various hover effects.
+/* Various hover effects. */
 $button-function-factor: 10%;
-Button border styles.
+/* 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.
+/* Radius used throughout the core. */
 $button-radius: $global-radius;
-Opacity for disabled buttons.
+/* Opacity for disabled buttons. */
 $button-disabled-opacity: 0.6;
-Button Groups
+/* Button Groups */
-Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+/* 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);
-Dropdown Button Variables
+/* Dropdown Button Variables */
-Color of the pip in dropdown buttons
+/* Color of the pip in dropdown buttons */
 $dropdown-button-pip-color: #fff;
 $dropdown-button-pip-color-alt: #333;
-Tiny dropdown buttons
+/* 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);
-Small dropdown buttons
+/* 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);
-Medium dropdown buttons
+/* 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);
-Large dropdown buttons
+/* Large dropdown buttons */
 $dropdown-button-padding-lrg: $button-lrg * 4;
 $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px);
@@ -637,17 +637,17 @@ $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
 $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px);
-Split Button Variables
+/* Split Button Variables */
-Shared styles for Split Buttons
+/* 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
+/* Tiny split buttons */
 $split-button-padding-tny: $button-tny * 9;
 $split-button-span-width-tny: $button-tny * 6.5;
@@ -655,7 +655,7 @@ $split-button-pip-size-tny: $button-tny;
 $split-button-pip-top-tny: $button-tny * 2;
 $split-button-pip-left-tny: emCalc(-5px);
-Small split buttons
+/* Small split buttons */
 $split-button-padding-sml: $button-sml * 7;
 $split-button-span-width-sml: $button-sml * 5;
@@ -663,7 +663,7 @@ $split-button-pip-size-sml: $button-sml;
 $split-button-pip-top-sml: $button-sml * 1.5;
 $split-button-pip-left-sml: emCalc(-9px);
-Medium split buttons
+/* Medium split buttons */
 $split-button-padding-med: $button-med * 6.4;
 $split-button-span-width-med: $button-med * 4;
@@ -671,7 +671,7 @@ $split-button-pip-size-med: $button-med - emCalc(3px);
 $split-button-pip-top-med: $button-med * 1.5;
 $split-button-pip-left-med: emCalc(-9px);
-Large split buttons
+/* Large split buttons */
 $split-button-padding-lrg: $button-lrg * 6;
 $split-button-span-width-lrg: $button-lrg * 3.75;
@@ -680,62 +680,60 @@ $split-button-pip-top-lrg: $button-lrg + emCalc(5px);
 $split-button-pip-left-lrg: emCalc(-9px);
-Alert Variables
+/* Alert Variables */
-Alert padding
+/* Alert padding */
-$alert-padding-top:                emCalc(11px);
-$alert-padding-default-float:      $alert-padding-top;
+$alert-padding-top: emCalc(11px);
+$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-bottom: $alert-padding-top + emCalc(1px);
-Text style
+/* Text style */
-$alert-font-weight:                bold;
-$alert-font-size:                  emCalc(14px);
-$alert-font-color:                 #fff;
-$alert-font-color-alt:             darken($secondary-color, 60%);
+$alert-font-weight: bold;
+$alert-font-size: emCalc(14px);
+$alert-font-color: #fff;
+$alert-font-color-alt: darken($secondary-color, 60%);
-Hover effect
+/* Hover effect */
-$alert-function-factor:            10%;
+$alert-function-factor: 10%;
-Border Styles
+/* 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-border-style: solid;
+$alert-border-width: 1px;
+$alert-border-color: darken($primary-color, $alert-function-factor);
+$alert-bottom-margin: emCalc(20px);
-Close Button style
+/* Close Button style */
-$alert-close-color:                #333;
-$alert-close-position:             emCalc(5px);
-$alert-close-font-size:            emCalc(22px);
-$alert-close-opacity:              0.3;
-$alert-close-opacity-hover:        0.5;
-$alert-close-padding:              5px 4px 4px;
+$alert-close-color: #333;
+$alert-close-position: emCalc(5px);
+$alert-close-font-size: emCalc(22px);
+$alert-close-opacity: 0.3;
+$alert-close-opacity-hover: 0.5;
+$alert-close-padding: 5px 4px 4px;
-Border radius
+/* Border radius */
-$alert-radius:                     $global-radius;
+$alert-radius: $global-radius;
+/* Breadcrumb Variables */
-Breadcrumb Variables
-Background color for the breadcrumb container.
+/* Background color for the breadcrumb container. */
 $crumb-bg: lighten($secondary-color, 5%);
-Padding around the breadcrumbs.
+/* Padding around the breadcrumbs. */
 $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px);
 $crumb-side-padding: emCalc(12px);
-Border styles.
+/* Border styles. */
 $crumb-function-factor: 10%;
 $crumb-border-size: 1px;
@@ -743,7 +741,7 @@ $crumb-border-style: solid;
 $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
 $crumb-radius: $global-radius;
-Various text styles for breadcrumbs.
+/* Various text styles for breadcrumbs. */
 $crumb-font-size: emCalc(11px);
 $crumb-font-color: $primary-color;
@@ -752,38 +750,37 @@ $crumb-font-color-unavailable: #999;
 $crumb-font-transform: uppercase;
 $crumb-link-decor: underline;
-Slash between breadcrumbs
+/* Slash between breadcrumbs */
 $crumb-slash-color: #aaa;
 $crumb-slash: "/";
-Clearing Variables
+/* Clearing Variables */
-Background colors for parts of Clearing.
+/* 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
+/* Close button */
 $clearing-close-color: #fff;
 $clearing-close-size: 40px;
-Style the arrows
+/* Style the arrows */
 $clearing-arrow-size: 16px;
 $clearing-arrow-color: $clearing-close-color;
-Style captions
+/* Style captions */
 $clearing-caption-font-color: #fff;
 $clearing-caption-padding: 10px 30px;
-Make the image and carousel height and style
+/* Make the image and carousel height and style */
 $clearing-active-img-height: 75%;
 $clearing-carousel-height: 150px;
@@ -791,10 +788,9 @@ $clearing-carousel-thumb-width: 175px;
 $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
-Custom Form Variables
+/* Custom Form Variables */
-Basic form styles input styles
+/* Basic form styles input styles */
 $custom-form-border-color: #ccc;
 $custom-form-border-size: 1px;
@@ -806,7 +802,7 @@ $custom-form-check-size: 14px;
 $custom-form-radio-size: 8px;
 $custom-form-checkbox-radius: 0px;
-Custom select form element.
+/* Custom select form element. */
 $custom-select-bg: #fff;
 $custom-select-fade-to-color: #f3f3f3;
@@ -818,7 +814,7 @@ $custom-select-margin-bottom: emCalc(20px);
 $custom-select-font-color-selected: #141414;
 $custom-select-disabled-color: #888;
-Custom select dropdown element.
+/* Custom select dropdown element. */
 $custom-dropdown-height: 200px;
 $custom-dropdown-bg: #fff;
@@ -837,33 +833,32 @@ $custom-dropdown-right-padding: emCalc(38px);
 $custom-dropdown-list-item-min-height: emCalc(24px);
-Dropdown Variables
+/* Dropdown Variables */
-Height and width styles.
+/* 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
+/* Background color */
 $f-dropdown-bg: #fff;
-Border styles for dropdowns.
+/* Border styles for dropdowns. */
 $f-dropdown-border-style: solid;
 $f-dropdown-border-width: 1px;
 $f-dropdown-border-color: darken(#fff, 20%);
-Triangle pip.
+/* Triangle pip. */
 $f-dropdown-triangle-size: 6px;
 $f-dropdown-triangle-color: #fff;
 $f-dropdown-triangle-side-offset: 10px;
-List elements.
+/* List elements. */
 $f-dropdown-list-style: none;
 $f-dropdown-font-color: #555;
@@ -873,51 +868,51 @@ $f-dropdown-line-height: emCalc(18px);
 $f-dropdown-list-hover-bg: #eeeeee;
 $dropdown-mobile-left: 0;
-When the dropdown has custom content.
+/* When the dropdown has custom content. */
 $f-dropdown-content-padding: emCalc(20px);
-Flex Video Variables
+/* Flex Video Variables */
-Video container padding and margins
+/* Video container padding and margins */
 $flex-video-padding-top: emCalc(25px);
 $flex-video-padding-bottom: 67.5%;
 $flex-video-margin-bottom: emCalc(16px);
-Widescreen bottom padding
+/* Widescreen bottom padding */
 $flex-video-widescreen-padding-bottom: 57.25%;
-Inline List Variables
+/* Inline List Variables */
-Margins and padding of the inline list.
+/* Margins and padding of the inline list. */
 $inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
 $inline-list-margin: 0 0;
 $inline-list-padding: 0;
-Overflow of the inline list.
+/* Overflow of the inline list. */
 $inline-list-overflow: hidden;
-List items
+/* List items */
 $inline-list-display: block;
-Elments within list items
+/* Elments within list items */
 $inline-list-children-display: block;
-Joyride Variables
+/* Joyride Variables */
-Joyride styles
+/* Joyride styles */
 $joyride-tip-bg: rgb(0,0,0);
 $joyride-tip-default-width: 300px;
@@ -926,37 +921,37 @@ $joyride-tip-border: solid 1px #555;
 $joyride-tip-radius: 4px;
 $joyride-tip-position-offset: 22px;
-Tip font styles
+/* Tip font styles */
 $joyride-tip-font-color: #fff;
 $joyride-tip-font-size: emCalc(14px);
 $joyride-tip-header-weight: bold;
-Changes the nub size
+/* Changes the nub size */
 $joyride-tip-nub-size: 14px;
-Adjusts the styles for the timer when its enabled
+/* 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
+/* 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, style for the bg */
 $joyride-screenfill: rgba(0,0,0,0.5);
-Keystroke Variables
+/* Keystroke Variables */
-Text styles.
+/* Text styles. */
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
 $keystroke-font-size: emCalc(15px);
@@ -964,11 +959,11 @@ $keystroke-font-color: #222;
 $keystroke-font-color-alt: #fff;
 $keystroke-function-factor: 7%;
-Keystroke padding.
+/* Keystroke padding. */
 $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
-Background and border styles.
+/* Background and border styles. */
 $keystroke-bg: darken(#fff, $keystroke-function-factor);
 $keystroke-border-style: solid;
@@ -977,15 +972,15 @@ $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
 $keystroke-radius: $global-radius;
-Label Variables
+/* Label Variables */
-Style the labels
+/* Style the labels */
 $label-padding: emCalc(3px) emCalc(10px) emCalc(4px);
 $label-radius: $global-radius;
-We use these to style the label text
+/* We use these to style the label text */
 $label-font-sizing: emCalc(14px);
 $label-font-weight: bold;
@@ -993,61 +988,61 @@ $label-font-color: #333;
 $label-font-color-alt: #fff;
-Magellan Variables
+/* Magellan Variables */
-Basic visual styles
+/* Basic visual styles */
 $magellan-bg: #fff;
 $magellan-padding: 10px;
-Orbit Settings
+/* Orbit Settings */
-Caption styles
+/* 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
+/* Left/right nav styles */
 $orbit-nav-bg-old: rgb(0,0,0);
 $orbit-nav-bg: rgba(0,0,0,0.6);
-Timer styles
+/* Timer styles */
 $orbit-timer-bg-old: rgb(0,0,0);
 $orbit-timer-bg: rgba(0,0,0,0.6);
-Bullet nav styles
+/* Bullet nav styles */
 $orbit-bullet-nav-color: #999;
 $orbit-bullet-nav-color-active: #222;
-Slide numbers
+/* Slide numbers */
 $orbit-slide-number-bg: rgba(0,0,0,0);
 $orbit-slide-number-font-color: #fff;
 $orbit-slide-number-padding: emCalc(5px);
-Graceful Loading Wrapper and preloader
+/* Graceful Loading Wrapper and preloader */
 $wrapper-class: "slideshow-wrapper";
 $preloader-class: "preloader" ;
-Pagination Variables
+/* Pagination Variables */
-Pagination container
+/* Pagination container */
 $pagination-height: emCalc(24px);
 $pagination-margin: emCalc(-5px);
-List-item properties
+/* List-item properties */
 $pagination-li-float: $default-float;
 $pagination-li-height: emCalc(24px);
@@ -1055,19 +1050,19 @@ $pagination-li-font-color: #222;
 $pagination-li-font-size: emCalc(14px);
 $pagination-li-margin: emCalc(5px);
-Pagination anchor links
+/* Pagination anchor links */
 $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
 $pagination-link-font-color: #999;
 $pagination-link-active-bg: darken(#fff, 10%);
-Disabled anchor links
+/* Disabled anchor links */
 $pagination-link-unavailable-cursor: $cursor-default-value;
 $pagination-link-unavailable-font-color: #999;
 $pagination-link-unavailable-bg-active: transparent;
-Currently selected anchor links
+/* Currently selected anchor links */
 $pagination-link-current-background: $primary-color;
 $pagination-link-current-font-color: #fff;
@@ -1076,43 +1071,43 @@ $pagination-link-current-cursor: $cursor-default-value;
 $pagination-link-current-active-bg: $primary-color;
-Panel Variables
+/* Panel Variables */
-Background and border styles
+/* 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
+/* 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
+/* Inner padding and bottom margin */
 $panel-margin-bottom: emCalc(20px);
 $panel-padding: emCalc(20px);
-Font colors
+/* Font colors */
 $panel-font-color: #333;
 $panel-font-color-alt: #fff;
+$panel-header-adjust: true; /* Set to false to keep default header styles */
-Pricing Table Variables
+/* Pricing Table Variables */
-Border color
+/* Border color */
 $price-table-border: solid 1px #ddd;
-Bottom margin of the pricing table
+/* Bottom margin of the pricing table */
 $price-table-margin-bottom: emCalc(20px);
-Control the title styles
+/* Control the title styles */
 $price-title-bg: #ddd;
 $price-title-padding: emCalc(15px) emCalc(20px);
@@ -1121,7 +1116,7 @@ $price-title-color: #333;
 $price-title-weight: bold;
 $price-title-size: emCalc(16px);
-Control the price styles
+/* Control the price styles */
 $price-money-bg: #eee;
 $price-money-padding: emCalc(15px) emCalc(20px);
@@ -1130,7 +1125,7 @@ $price-money-color: #333;
 $price-money-weight: normal;
 $price-money-size: emCalc(20px);
-Description styles
+/* Description styles */
 $price-bg: #fff;
 $price-desc-color: #777;
@@ -1141,7 +1136,7 @@ $price-desc-weight: normal;
 $price-desc-line-height: 1.4;
 $price-desc-bottom-border: dotted 1px #ddd;
-List item styles
+/* List item styles */
 $price-item-color: #333;
 $price-item-padding: emCalc(15px);
@@ -1150,34 +1145,34 @@ $price-item-font-size: emCalc(14px);
 $price-item-weight: normal;
 $price-item-bottom-border: dotted 1px #ddd;
-CTA area styles
+/* CTA area styles */
 $price-cta-bg: #f5f5f5;
 $price-cta-align: center;
 $price-cta-padding: emCalc(20px) emCalc(20px) 0;
-Progress Bar Variables
+/* Progress Bar Variables */
-Progress bar height
+/* Progress bar height */
 $progress-bar-height: emCalc(25px);
 $progress-bar-color: transparent;
-Border styles
+/* 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
+/* Margin & padding */
 $progress-bar-pad: emCalc(2px);
 $progress-bar-margin-bottom: emCalc(10px);
-Meter colors
+/* Meter colors */
 $progress-meter-color: $primary-color;
 $progress-meter-secondary-color: $secondary-color;
@@ -1185,15 +1180,15 @@ $progress-meter-success-color: $success-color;
 $progress-meter-alert-color: $alert-color;
-Reveal Variables
+/* Reveal Variables */
-Reveal overlay.
+/* Reveal overlay. */
 $reveal-overlay-bg: rgba(#000, .45);
 $reveal-overlay-bg-old: #000;
-Modal itself.
+/* Modal itself. */
 $reveal-modal-bg: #fff;
 $reveal-position-top: 50px;
@@ -1201,7 +1196,7 @@ $reveal-default-width: 80%;
 $reveal-modal-padding: emCalc(20px);
 $reveal-box-shadow: 0 0 10px rgba(#000,.4);
-Reveal close button
+/* Reveal close button */
 $reveal-close-font-size: emCalc(22px);
 $reveal-close-top: emCalc(8px);
@@ -1209,7 +1204,7 @@ $reveal-close-side: emCalc(11px);
 $reveal-close-color: #aaa;
 $reveal-close-weight: bold;
-Modal border
+/* Modal border */
 $reveal-border-style: solid;
 $reveal-border-width: 1px;
@@ -1219,16 +1214,16 @@ $reveal-modal-class: "reveal-modal";
 $close-reveal-modal-class: "close-reveal-modal";
-Section Variables
+/* Section Variables */
-Padding and hover factor
+/* Padding and hover factor */
 $section-title-padding: emCalc(15px);
 $section-content-padding: emCalc(15px);
 $section-function-factor: 10%;
-Titles
+/* Titles */
 $section-title-color: #333;
 $section-title-bg: #efefef;
@@ -1236,17 +1231,17 @@ $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);
-Border size
+/* Border size */
 $section-border-size: 1px;
 $section-border-style: solid;
 $section-border-color: #ccc;
-Font controls
+/* Font controls */
 $section-font-size: emCalc(14px);
-Control the color of the background and some size options
+/* Control the color of the background and some size options */
 $section-content-bg: #fff;
 $section-vertical-nav-min-width: emCalc(200px);
@@ -1257,42 +1252,42 @@ $title-selector: ".title";
 $content-selector: ".content";
-Side Nav Variables
+/* Side Nav Variables */
-Padding
+/* Padding */
 $side-nav-padding: emCalc(14px) 0;
-List styles
+/* List styles */
 $side-nav-list-type: none;
 $side-nav-list-position: inside;
 $side-nav-list-margin: 0 0 emCalc(7px) 0;
-Link styles
+/* 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-weight: bold;
-Border styles
+/* Border styles */
 $side-nav-divider-size: 1px;
 $side-nav-divider-style: solid;
 $side-nav-divider-color: darken(#fff, 10%);
-Sub Nav Variables
+/* Sub Nav Variables */
-Margin and padding
+/* Margin and padding */
 $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px);
 $sub-nav-list-padding-top: emCalc(4px);
-Definition
+/* Definition */
 $sub-nav-font-size: emCalc(14px);
 $sub-nav-font-color: #999;
@@ -1300,7 +1295,7 @@ $sub-nav-font-weight: normal;
 $sub-nav-text-decoration: none;
 $sub-nav-border-radius: 1000px;
-Active item styles
+/* Active item styles */
 $sub-nav-active-font-weight: bold;
 $sub-nav-active-bg: $primary-color;
@@ -1309,17 +1304,17 @@ $sub-nav-active-padding: emCalc(3px) emCalc(9px);
 $sub-nav-active-cursor: $cursor-default-value;
-Switch Variables
+/* Switch Variables */
-Border styles and background colors for the switch container
+/* 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
+/* Switch heights for our default classes */
 $switch-height-tny: 22px;
 $switch-height-sml: 28px;
@@ -1327,7 +1322,7 @@ $switch-height-med: 36px;
 $switch-height-lrg: 44px;
 $switch-bottom-margin: emCalc(20px);
-Font sizes for our classes.
+/* Font sizes for our classes. */
 $switch-font-size-tny: 11px;
 $switch-font-size-sml: 12px;
@@ -1335,7 +1330,7 @@ $switch-font-size-med: 14px;
 $switch-font-size-lrg: 17px;
 $switch-label-side-padding: 6px;
-Switch-paddle
+/* Switch-paddle */
 $switch-paddle-bg: #fff;
 $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
@@ -1347,26 +1342,25 @@ $switch-paddle-transition-ease: ease-out;
 $switch-positive-color: lighten($success-color, 50%);
 $switch-negative-color: #f5f5f5;
-Outline Style for tabbing through switches
+/* Outline Style for tabbing through switches */
 $switch-label-outline: 1px dotted #888;
-Table Variables
+/* Table Variables */
-Background color for the table and even rows
+/* Background color for the table and even rows */
 $table-bg: #fff;
 $table-even-row-bg: #f9f9f9;
-Table cell border style
+/* Table cell border style */
 $table-border-style: solid;
 $table-border-size: 1px;
 $table-border-color: #ddd;
-Table head styles
+/* Table head styles */
 $table-head-bg: #f5f5f5;
 $table-head-font-size: emCalc(14px);
@@ -1374,23 +1368,23 @@ $table-head-font-color: #222;
 $table-head-font-weight: bold;
 $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
-Row padding and font styles
+/* Row padding and font styles */
 $table-row-padding: emCalc(9px) emCalc(10px);
 $table-row-font-size: emCalc(14px);
 $table-row-font-color: #222;
 $table-line-height: emCalc(18px);
-Display and margin of tables
+/* Display and margin of tables */
 $table-display: table-cell;
 $table-margin-bottom: emCalc(20px);
-Image Thumbnail Variables
+/* Image Thumbnail Variables */
-Border styles
+/* Border styles */
 $thumb-border-style: solid;
 $thumb-border-width: 4px;
@@ -1398,13 +1392,13 @@ $thumb-border-color: #fff;
 $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
 $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-Radius and transition speed for thumbs
+/* Radius and transition speed for thumbs */
 $thumb-radius: $global-radius;
 $thumb-transition-speed: 200ms;
-Tooltip Variables
+/* Tooltip Variables */
 $has-tip-border-bottom: dotted 1px #ccc;
@@ -1428,107 +1422,79 @@ $tooltip-radius: $global-radius;
 $tooltip-pip-size: 5px;
-Top Bar Variables
+/* Top Bar Variables */
-Background color for the top bar
+/* Background color for the top bar */
-$topbar-bg:                            #111 !default;
+$topbar-bg: #111 !default;
-Height and margin
+/* Height and margin */
-$topbar-height:                        45px;
-$topbar-margin-bottom:                 emCalc(30px);
+$topbar-height: 45px;
+$topbar-margin-bottom: emCalc(30px);
-Control Input height for top bar
+/* Control Input height for top bar */
-$topbar-input-height:                  2.45em;
+$topbar-input-height: 2.45em;
-Controlling the styles for the title in the top bar
+/* Controlling the styles for the title in the top bar */
-$topbar-title-weight:                  bold;
-$topbar-title-font-size:               emCalc(17px);
+$topbar-title-weight: bold;
+$topbar-title-font-size: emCalc(17px);
-Style the top bar dropdown elements
+/* Style the top bar dropdown elements */
-$topbar-dropdown-bg:                   #222;
-$topbar-dropdown-link-color:           #fff;
-$topbar-dropdown-link-bg:              lighten($topbar-bg, 5%);
-$topbar-dropdown-toggle-size:          5px;
-$topbar-dropdown-toggle-color:         #fff;
-$topbar-dropdown-toggle-alpha:         0.5;
+$topbar-dropdown-bg: #222;
+$topbar-dropdown-link-color: #fff;
+$topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size: 5px;
+$topbar-dropdown-toggle-color: #fff;
+$topbar-dropdown-toggle-alpha: 0.5;
-Set the link colors and styles for top-level nav
+/* Set the link colors and styles for top-level nav */
-$topbar-link-color:                    #fff;
-$topbar-link-color-hover:              #fff;
-$topbar-link-color-active:             #fff;
-$topbar-link-weight:                   bold;
-$topbar-link-font-size:                emCalc(13px);
-$topbar-link-hover-lightness:          -30%; Darken by 30%
-$topbar-link-bg-hover:                 darken($topbar-bg, 3%);
-$topbar-link-bg-active:                darken($topbar-bg, 3%);
+$topbar-link-color: #fff;
+$topbar-link-color-hover: #fff;
+$topbar-link-color-active: #fff;
+$topbar-link-weight: bold;
+$topbar-link-font-size: emCalc(13px);
+$topbar-link-hover-lightness: -30%; Darken by 30%
+$topbar-link-bg-hover: darken($topbar-bg, 3%);
+$topbar-link-bg-active: darken($topbar-bg, 3%);
-$topbar-dropdown-label-color:          #555;
+$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-weight: bold;
+$topbar-dropdown-label-font-size: emCalc(10px);
-Top menu icon styles
+/* Top menu icon styles */
-$topbar-menu-link-transform:           uppercase;
-$topbar-menu-link-font-size:           emCalc(13px);
-$topbar-menu-link-weight:              bold;
-$topbar-menu-link-color:               #fff;
-$topbar-menu-icon-color:               #fff;
-$topbar-menu-link-color-toggled:       #888;
-$topbar-menu-icon-color-toggled:       #888;
+$topbar-menu-link-transform: uppercase;
+$topbar-menu-link-font-size: emCalc(13px);
+$topbar-menu-link-weight: bold;
+$topbar-menu-link-color: #fff;
+$topbar-menu-icon-color: #fff;
+$topbar-menu-link-color-toggled: #888;
+$topbar-menu-icon-color-toggled: #888;
-Transitions and breakpoint styles
+/* Transitions and breakpoint styles */
-$topbar-transition-speed:              300ms;
-$topbar-breakpoint:                    emCalc(940px);
-$topbar-media-query:                   "only screen and (min-width: #{$topbar-breakpoint})";
+$topbar-transition-speed: 300ms;
+$topbar-breakpoint: emCalc(940px);
+$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
-Divider Styles
+/* Divider Styles */
-$topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%);
-$topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%);
+$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
-Sticky Class
+/* Sticky Class */
-$topbar-sticky-class:                  ".sticky";
+$topbar-sticky-class: ".sticky";
 ', :css %>
-    <a name="gui-apps"></a>
-    <h3>Working with GUI applications</h3>
-    <h5 class="subheader">We want you to be able to work with Foundation in whatever way you are comfortable and we realize that not all of us are Terminal ninjas. Here's a rundown of some of the popular GUI applications and how to utilize Foundation with them.</h5>
-    <h5>CodeKit Project</h5>
-    <p>To work with Codekit, you'll just need to open it up and create a new Foundation project.</p>
-    <ol style="margin-left: 20px;">
-      <li>Make sure you have the Foundation gem installed.</li>
-      <li>Create a new directory where you're project will live.</li>
-      <li>Open Terminal and move into that new directory.</li>
-      <li>Run <kbd>compass create -r zurb-foundation --using foundation</kbd></li>
-      <li>Open up CodeKit</li>
-      <li>File > Add Project</li>
-      <li>Choose the new folder that now contains the Foundation files.</li>
-      <li>Start making changes to the SCSS files and Codekit will compile the changes.</li>
-    </ol>
-   <!--  <h5>LiveReload</h5>
-    <p>While LiveReload works great within CodeKit, it doesn't work well on its own because you can't update it to use your system Sass and Compass directories. Do not use this application to compile Foundation.</p> -->
-    <h5>Compass.app</h5>
-    <p>Foundation is included with Compass.app.</p>
-<!--
-    <h5>Scout</h5>
-    <p>This app doesn't have support for updating the version of Sass and Compass that you use so we're not supporting it at this point.</p> -->
-    <hr>
   </div>
   <div class="large-3 pull-9 columns">