Setting up basic variables.

Gruntfile.js

@@ -58,7 +58,8 @@ module.exports = function(grunt) {
     }
   });
 
-  // Load the plugin that provides the "uglify" task.
+  // Load the plugins
+  grunt.loadNpmTasks('grunt-jekyll');
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-concat');

dist/ratchet.css

@@ -152,7 +152,7 @@ a {
   z-index: 10;
   height: 44px;
   padding: 5px;
-  background-color: rgba(247, 247, 247, 0.98);
+  background-color: rgba(247, 247, 247, 0.18);
   box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
   box-sizing: border-box; }
 

lib/sass/bars.scss

@@ -8,7 +8,7 @@
   z-index: 10;
   height: 44px;
   padding: 5px;
-  background-color: rgba(247,247,247,.98);
+  background-color: $chrome-color;
   box-shadow: 0 0px 1px rgba(0,0,0,.85);
   box-sizing: border-box;
 }
@@ -113,7 +113,7 @@
   color: #929292;
 }
 .tab-item.active .tab-label {
- color: #007aff;
+ color: $app-color;
 }
 
 /* Buttons in title bars
@@ -128,7 +128,7 @@
   font-size: 16px;
   font-weight: 400;
   line-height: 29px;
-  color: #007aff;
+  color: $app-color;
   border: 0;
   transition: opacity .2s linear;
   -webkit-box-flex: 0;
@@ -150,7 +150,7 @@
 .bar-title .button:active,
 .bar-title .button-prev:active,
 .bar-title .button-next:active {
-  color: #007aff;
+  color: $app-color;
   background-color: transparent;
   opacity: .3;
 }
@@ -166,7 +166,7 @@
   display: block;
   width: 15px;
   height: 3px;
-  background-color: #007aff;
+  background-color: $app-color;
   content: '';
 }
 

lib/sass/buttons.scss

@@ -35,8 +35,8 @@
 
 // Main button
 .button-main {
-  color: #007aff;
+  color: $app-color;
-  border: 1px solid #007aff;
+  border: 1px solid $app-color;
 }
 
 // Positive button
@@ -60,7 +60,7 @@
 }
 .button-main:active {
   color: #fff;
-  background-color: #007aff;
+  background-color: $app-color;
 }
 .button-positive:active {
   color: #fff;

lib/sass/ratchet.scss

@@ -1,19 +1,22 @@
- // Base CSS & Reset
+// Variables
- @import "base.scss";
+$app-color: #007aff;
+$chrome-color: rgba(247,247,247,.98);
 
- // Components
+// Base CSS & Reset
- @import "bars.scss";
+@import "base.scss";
- @import "lists.scss";
- @import "forms.scss";
- @import "buttons.scss";
- @import "chevrons.scss";
- @import "counts.scss";
- @import "segmented-controllers.scss";
- @import "popovers.scss";
 
- // Javascript components
+// Components
- @import "modals.scss";
+@import "bars.scss";
- @import "sliders.scss";
+@import "lists.scss";
- @import "toggles.scss";
+@import "forms.scss";
- @import "push.scss";
+@import "buttons.scss";
+@import "chevrons.scss";
+@import "counts.scss";
+@import "segmented-controllers.scss";
+@import "popovers.scss";
 
+// Javascript components
+@import "modals.scss";
+@import "sliders.scss";
+@import "toggles.scss";
+@import "push.scss";

lib/sass/segmented-controllers.scss

@@ -10,7 +10,7 @@
   font-weight: bold;
   list-style: none;
   background-color: transparent;
-  border: 1px solid #007aff;
+  border: 1px solid $app-color;
   border-radius: 4px;
   -webkit-box-orient: horizontal;
           box-orient: horizontal;
@@ -21,7 +21,7 @@
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
-  border-left: 1px solid #007aff;
+  border-left: 1px solid $app-color;
   -webkit-box-flex: 1;
           box-flex: 1;
 }
@@ -32,7 +32,7 @@
   padding: 8px 16px;
   overflow: hidden;
   line-height: 15px;
-  color: #007aff;
+  color: $app-color;
   text-overflow: ellipsis;
 }
 
@@ -43,7 +43,7 @@
 
 // Active segment of controller
 .segmented-controller li.active {
-  background-color: #007aff;
+  background-color: $app-color;
   transition: background-color .2s linear;
 }
 // Set color of links to white

package.json

@@ -8,7 +8,8 @@
     "grunt-contrib-nodeunit": "~0.2.0",
     "grunt-contrib-sass": "~0.5.0",
     "grunt-contrib-watch": "~0.5.3",
-    "grunt-contrib-concat": "~0.3.0"
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-jekyll": "~0.3.9"
   },
   "keywords": [
     "ratchet",