Sass-ification, lets try this again...

* Note by shane-tomlinson, this based on 6a739d5, ab9f627, rebased from master(46f3d50), and squashed.

.gitignore

@@ -38,6 +38,8 @@ app/bower_components
 ### SASS Ignores - "Sassy CSS" http://sass-lang.com/
 *.sass-cache
 
+app/styles/*.css
+
 
 ### Yeoman ###
 dist

app/styles/_keyframes.scss

@@ -0,0 +1,58 @@
+/* Keyframes */
+
+@-webkit-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@-moz-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@-webkit-keyframes movein {
+  0%   {left: 0; top: -70px;}
+  100%   {left: 0; top: -50px;}
+}
+
+@-moz-keyframes movein {
+  0%   {left: 0; top: -70px;}
+  100%   {left: 0; top: -50px;}
+}
+
+@keyframes movein {
+  0%   {left: 0; top: -70px;}
+  100%   {left: 0; top: -50px;}
+}
+
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(365deg);
+  }
+}
+
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(365deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(365deg);
+  }
+}

app/styles/_media_queries.scss

@@ -0,0 +1,79 @@
+/* Responsiveness */
+
+/* TODO: (Issue #559) Confirm breakpoint sizes */
+@media only screen and (max-width: 500px) {
+  html {
+    background: #fff;
+  }
+
+  .fox-logo {
+    background: url(/images/firefox.png);
+    background-size: 64px 68px;
+    height: 68px;
+    margin: 0 auto;
+    position: relative;
+    top:0;
+    width: 64px;
+    z-index: 999;
+  }
+
+  #stage {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    margin: 10px auto;
+    min-height: none;
+    min-width: 300px;
+    padding: 0 10px 40px 10px;
+    width: 100%;
+  }
+
+  @-webkit-keyframes movein {
+    0% {left: 0; top: -20px;}
+    100% {left: 0; top: 0;}
+  }
+
+  @-moz-keyframes movein {
+    0% {left: 0; top: -20px;}
+    100% {left: 0; top: 0;}
+  }
+
+  @keyframes movein {
+    0% {left: 0; top: -20px;}
+    100% {left: 0; top: 0;}
+  }
+}
+
+/* Retina */
+
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (   -moz-min-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1),
+only screen and (        min-device-pixel-ratio: 2),
+only screen and (                min-resolution: 192dpi),
+only screen and (                min-resolution: 2dppx) {
+  .fox-logo {
+    background-image: url(/images/firefox@2x.png);
+  }
+
+  .graphic-checkbox {
+    background-image: url(/images/graphic_checkbox@2x.png);
+  }
+
+  .graphic-mail {
+    background-image: url(/images/graphic_mail@2x.png);
+  }
+
+  .spinner {
+    background-image: url(/images/spinnerlight@2x.png);
+  }
+
+  .input-row select {
+    background-image: url(/images/ddarrow_inactive@2x.png)
+  }
+
+  .input-row select:focus {
+    background-image: url(/images/ddarrow_active@2x.png);
+  }
+}

app/styles/_variables.scss

@@ -0,0 +1,22 @@
+$default-font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$header-font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+
+$button-background-color: #0095dd;
+$button-background-disabled-color: #8a9ba8;
+$button-background-hover-color: #08c;
+$error-background-color: #d63920;
+$error-text-color: #d63920;
+$html-background-color: #f2f2f2;
+$input-border-color: #424f59;
+$input-placeholder-color: #8a9ba8;
+$input-row-border-color: #8a9ba8;
+$input-row-focus-border-color: #0095dd;
+$input-row-hover-border-color: #424f59;
+$input-row-box-shadow-color: #f2f2f2;
+$link-color: #0095dd;
+$message-text-color: #fff;
+$show-password-background-color: #9aabb8;
+$show-password-label-color: #8a9ba8;
+$stage-background-color: #fff;
+$success-background-color: #5fad47;
+$text-color: #424f59;

app/styles/main.scss

@@ -1,4 +1,6 @@
-/* Border box all the things by default */
+@import "variables";
+
+// Border box all the things by default
 *,
 *:before,
 *:after {
@@ -8,19 +10,19 @@
 }
 
 html {
-  background-color: #f2f2f2;
+  background-color: $html-background-color;
   height: 100%;
 }
 
 body {
-  color: #424F59;
+  color: $text-color;
-  font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $default-font-family;
   font-size: 14px;
   padding-bottom: 20px;
 }
 
 a {
-  color: #0095dd;
+  color: $link-color;
   cursor: pointer; /* Use the correct cursor for anchors without an href */
 }
 
@@ -29,7 +31,7 @@ a:active {
 }
 
 a:focus {
-  outline: 1px dotted #0095dd;
+  outline: 1px dotted $link-color;
 }
 
 
@@ -38,7 +40,7 @@ a.no-underline {
 }
 
 noscript {
-  color: #d63920;
+  color: $error-text-color;
   display: block;
   margin: 160px 0 0 0;
 }
@@ -64,7 +66,7 @@ noscript {
   -webkit-animation: fadein 0.5s;
      -moz-animation: fadein 0.5s;
           animation: fadein 0.5s;
-  background: #fff;
+  background: $stage-background-color;
   -webkit-border-radius: 5px;
           border-radius: 5px;
   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
@@ -83,7 +85,7 @@ noscript {
 header h1,
 header h2,
 header h3 {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  font-family: $header-font-family;
   line-height: 1em;
   margin: 0;
 }
@@ -94,8 +96,8 @@ header h1 {
 }
 
 header h1 span {
-  position: relative;
   left: -9999px;
+  position: relative;
 }
 
 header h2 {
@@ -110,13 +112,13 @@ header h2 {
 }
 
 #legal-header h3 {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 #legal-copy ul,
 #legal-copy ol {
-  padding-left: 20px;
   margin-left: 0;
+  padding-left: 20px;
 }
 
 section p {
@@ -141,28 +143,29 @@ strong.email {
 
 .error,
 .success {
-  background: #D63920;
+  color: $message-text-color;
-  color: #fff;
   margin-bottom: 5px;
   padding: 5px;
 }
 
+.error {
+  background: $error-background-color;
+}
+
 .error:empty {
   display: none;
 }
 
 .error a {
-  color: #fff;
+  color: $message-text-color;
 }
 
 .success {
-  background: #5FAD47;
+  background: $success-background-color;
   display: none;
 }
 
-/**
+// complete is like success, but without the associated styles.
- * complete is like success, but without the associated styles.
- */
 .complete {
   display: none;
 }
@@ -194,9 +197,9 @@ strong.email {
 }
 
 .tooltip {
-  background: #D63920;
+  background: $error-background-color;
   border-radius: 1px;
-  color: #fff;
+  color: $message-text-color;
   left: 3px;
   padding: 5px 12px;
   position: absolute;
@@ -208,7 +211,7 @@ strong.email {
 /* tooltip caret */
 .tooltip:before,
 .tooltip::before {
-  background: #D63920;
+  background: $error-background-color;
   content: '.';
   height: 16px;
   left: 12px;
@@ -240,11 +243,11 @@ strong.email {
 .input-row input[type='email'],
 .input-row input[type='password'],
 .input-row select {
-  border: 1px solid #8A9BA8;
+  border: 1px solid $input-row-border-color;
   -webkit-border-radius: 5px;
           border-radius: 5px;
-  -webkit-box-shadow: inset 0 1px 1px #f2f2f2;
+  -webkit-box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
-          box-shadow: inset 0 1px 1px #f2f2f2;
+          box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
   color: #424f59;
   font-size: 18px;
   height: 45px;
@@ -261,32 +264,33 @@ strong.email {
 
 
 .input-row input::-webkit-input-placeholder {
-   color: #8A9BA8;
+   color: $input-placeholder-color;
 }
 
 .input-row input:-moz-placeholder { /* Firefox 18- */
-   color: #8A9BA8;
+   color: $input-placeholder-color;
 }
 
 .input-row input::-moz-placeholder {  /* Firefox 19+ */
-   color: #8A9BA8;
+   color: $input-placeholder-color;
 }
 
 .input-row input:-ms-input-placeholder {
-   color: #8A9BA8;
+   color: $input-placeholder-color;
 }
 
 .input-row select {
+  // autoprefixer does not handle appearance, see https://github.com/ai/autoprefixer/issues/205
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background: transparent url(/images/ddarrow_inactive.png) no-repeat right 14px top 50%;
   background-size: 10px 17px;
-  color: #8A9BA8;
+  color: $input-placeholder-color;
   height: auto;
   outline: none;
   padding: 10px 20px;
-  /* Some hackery for Firefox since moz-appearance: none doesn't remove the arrow */
+  // Some hackery for Firefox since moz-appearance: none doesn't remove the arrow
   text-indent: 0.01px;
   text-overflow: "";
   -moz-user-select: none;
@@ -294,12 +298,12 @@ strong.email {
 }
 
 .input-row:hover input {
-  border-color: #424f59;
+  border-color: $input-border-color;
 }
 
 .input-row input:focus,
 .input-row select:focus {
-  border-color: #0095DD;
+  border-color: $input-row-focus-border-color;
   -webkit-transition-duration: 150ms;
      -moz-transition-duration: 150ms;
           transition-duration: 150ms;
@@ -314,7 +318,7 @@ strong.email {
 .input-row select:hover:active,
 .input-row select:focus {
   background-image: url(/images/ddarrow_active.png);
-  background-color: #f2f2f2;
+  background-color: $html-background-color;
   -webkit-transition-duration: 150ms;
      -moz-transition-duration: 150ms;
           transition-duration: 150ms;
@@ -324,7 +328,7 @@ strong.email {
 }
 
 .input-row option {
-  background-color: #fff;
+  background-color: $stage-background-color;
 }
 
 
@@ -333,7 +337,7 @@ strong.email {
 .input-row select:hover,
 .input-row:hover input:hover,
 .input-row:hover select:hover {
-  border-color: #424f59;
+  border-color: $input-row-hover-border-color;
   outline: none;
 }
 
@@ -343,8 +347,8 @@ strong.email {
 .input-row:hover input:focus,
 .input-row:hover select:focus,
 .input-row:focus input {
-  border-color: #0095DD;
+  border-color: $input-row-focus-border-color;
-  color: #424f59;
+  color: $text-color;
   outline: none;
 }
 
@@ -354,7 +358,7 @@ strong.email {
 .input-row input[type='text'].invalid ~ .show-password-label,
 .input-row input[type='password'].invalid ~ .show-password-label,
 .input-row select.invalid {
-  border-color: #D63920;
+  border-color: $error-background-color;
 }
 
 /**
@@ -365,7 +369,7 @@ strong.email {
  */
 .input-row select:-moz-focusring {
   color: transparent !important; /* !important must be added or else the browser ignores the request */
-  text-shadow: 0 0 0 #424F59 !important;
+  text-shadow: 0 0 0 $input-row-hover-border-color !important;
 }
 
 
@@ -374,7 +378,7 @@ strong.email {
 }
 
 .input-row .input-help {
-  color: #8A9BA8;
+  color: $input-placeholder-color;
   margin-top: 2px;
 }
 
@@ -406,11 +410,11 @@ label:focus ~ .input-help-focused {
 
 .button-row button,
 .button-row a.button {
-  background: #0095dd;
+  background: $button-background-color;
   border: none;
   -webkit-border-radius: 5px;
           border-radius: 5px;
-  color: #fff;
+  color: $message-text-color;
   cursor: pointer;
   font-size: 24px;
   padding: 15px 0;
@@ -434,12 +438,12 @@ label:focus ~ .input-help-focused {
 .button-row button:active,
 .button-row button:hover,
 .button-row button:focus {
-  background: #0088CC;
+  background: $button-background-hover-color;
 }
 
 .button-row button:disabled,
 .button-row button.disabled {
-  background: #8A9BA8;
+  background: $button-background-disabled-color;
   cursor: auto;
 }
 
@@ -488,7 +492,7 @@ ul.links li {
 
 .privacy-links,
 .privacy-links a {
-  color: #8A9BA8;
+  color: $input-placeholder-color;
   margin-top: 35px;
   -webkit-transition-duration: 150ms;
      -moz-transition-duration: 150ms;
@@ -503,7 +507,7 @@ ul.links li {
 .privacy-links a:active,
 .privacy-links a:hover,
 .privacy-links a:focus {
-  color: #0095dd;
+  color: $link-color;
 }
 
 .verification-email-message {
@@ -533,9 +537,10 @@ ul.links li {
  */
 
 .password-row .show-password-label {
-  border-left: 1px solid #8A9BA8;
+  background-color: $stage-background-color;
+  border-left: 1px solid $input-row-border-color;
   border-radius: 0 4px 4px 0;
-  color: #8A9BA8;
+  color: $input-placeholder-color;
   cursor: pointer;
   font-size: 16px;
   height: 43px;
@@ -543,7 +548,7 @@ ul.links li {
   position: absolute;
   right: 1px;
   top: 1px;
-  /* it is very easy to accidentally select the text when clicking */
+  // it is very easy to accidentally select the text when clicking
   -webkit-touch-callout: none;
   -webkit-user-select: none;
    -khtml-user-select: none;
@@ -551,15 +556,14 @@ ul.links li {
       -ms-user-select: none;
           user-select: none;
   width: 55px;
-  background-color: #fff;
 }
 
 .password-row > .password:hover {
-  border-color: #424f59;
+  border-color: $input-border-color;
 }
 
 .show-password-label {
-  border-color: #424f59;
+  border-color: $input-border-color;
 }
 
 /**
@@ -571,8 +575,8 @@ ul.links li {
  * label.
  */
 .show-password {
-  position: absolute;
   opacity: 0;
+  position: absolute;
 }
 
 .show-password-label:hover,
@@ -581,39 +585,38 @@ ul.links li {
 .show-password:focus + .show-password-label,
 .show-password:active + .show-password-label,
 .show-password:focus + .show-password-label {
-  background: #f2f2f2;
+  background: $html-background-color;
-  color: #424f59;
+  color: $text-color;
   outline: none;
 }
 
-/*this one is impossible to do w/o sibling selector
+/* this one is impossible to do w/o sibling selector
 we may need to add js for IE8*/
 
 .password:focus ~ .show-password-label{
-  border-left-color: #0095DD;
+  border-left-color: $input-row-focus-border-color;
 }
 
 input[type="text"] ~ .show-password-label {
-  background: #8A9BA8;
+  background: $button-background-disabled-color;
-  color: #fff;
+  color: $message-text-color;
 }
 
 /**
  * Hover over the show password label in its dark state
  */
 input[type="text"] ~ .show-password:focus + .show-password-label,
-input[type="text"] ~ .show-password:focus + .show-password-label,
+input[type="text"] ~ .show-password:active + .show-password-label,
-input[type="text"] ~ .show-password:focus + .show-password-label,
+input[type="text"] ~ .show-password:hover + .show-password-label,
 input[type="text"] ~ .show-password-label:focus,
 input[type="text"] ~ .show-password-label:active,
 input[type="text"] ~ .show-password-label:hover {
-  /*background: #f2f2f2;*/
+  background: $show-password-background-color;
-  background: #9AABB8;
+  color: $message-text-color;
-  color: #fff;
 }
 
 .customize-sync-row {
-  color: #8A9BA8;
+  color: $input-placeholder-color;
   margin-bottom: 20px !important;
 }
 
@@ -640,148 +643,12 @@ input[type="text"] ~ .show-password-label:hover {
   width: 30px;
 }
 
-
-/* Keyframes */
-
-@-webkit-keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@-moz-keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-@-webkit-keyframes movein {
-  0%   {left: 0; top: -70px;}
-  100%   {left: 0; top: -50px;}
-}
-
-@-moz-keyframes movein {
-  0%   {left: 0; top: -70px;}
-  100%   {left: 0; top: -50px;}
-}
-
-@keyframes movein {
-  0%   {left: 0; top: -70px;}
-  100%   {left: 0; top: -50px;}
-}
-
-@-webkit-keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(365deg);
-  }
-}
-
-@-moz-keyframes spin {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(365deg);
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(365deg);
-  }
-}
-
 /* TODO: (Issue #558) These need further consideration */
 
 .hidden {
   display: none;
 }
 
-/* Responsiveness */
 
-/* TODO: (Issue #559) Confirm breakpoint sizes */
+@import "keyframes";
-@media only screen and (max-width: 500px) {
+@import "media_queries";
-  html {
-    background: #fff;
-  }
-
-  .fox-logo {
-    background: url(/images/firefox.png);
-    background-size: 64px 68px;
-    height: 68px;
-    margin: 0 auto;
-    position: relative;
-    top:0;
-    width: 64px;
-    z-index: 999;
-  }
-
-  #stage {
-    -webkit-box-shadow: none;
-            box-shadow: none;
-    margin: 10px auto;
-    min-height: none;
-    min-width: 300px;
-    padding: 0 10px 40px 10px;
-    width: 100%;
-  }
-
-  @-webkit-keyframes movein {
-    0% {left: 0; top: -20px;}
-    100% {left: 0; top: 0;}
-  }
-
-  @-moz-keyframes movein {
-    0% {left: 0; top: -20px;}
-    100% {left: 0; top: 0;}
-  }
-
-  @keyframes movein {
-    0% {left: 0; top: -20px;}
-    100% {left: 0; top: 0;}
-  }
-}
-
-/* Retina */
-
-@media
-only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (   min--moz-device-pixel-ratio: 2),
-only screen and (   -moz-min-device-pixel-ratio: 2),
-only screen and (     -o-min-device-pixel-ratio: 2/1),
-only screen and (        min-device-pixel-ratio: 2),
-only screen and (                min-resolution: 192dpi),
-only screen and (                min-resolution: 2dppx) {
-  .fox-logo {
-    background-image: url(/images/firefox@2x.png);
-  }
-
-  .graphic-checkbox {
-    background-image: url(/images/graphic_checkbox@2x.png);
-  }
-
-  .graphic-mail {
-    background-image: url(/images/graphic_mail@2x.png);
-  }
-
-  .spinner {
-    background-image: url(/images/spinnerlight@2x.png);
-  }
-
-  .input-row select {
-    background-image: url(/images/ddarrow_inactive@2x.png)
-  }
-
-  .input-row select:focus {
-    background-image: url(/images/ddarrow_active@2x.png);
-  }
-}

grunttasks/autoprefixer.js

@@ -7,14 +7,14 @@ module.exports = function (grunt) {
 
   grunt.config('autoprefixer', {
     options: {
-      browsers: ['last 1 version']
+      browsers: ['> 1%', 'last 5 versions', 'ff >= 16', 'Explorer >= 8']
     },
     dist: {
       files: [{
         expand: true,
-        cwd: '.tmp/styles/',
+        cwd: '<%= yeoman.app %>/styles/',
         src: '{,*/}*.css',
-        dest: '.tmp/styles/'
+        dest: '<%= yeoman.app %>/styles/'
       }]
     }
   });

grunttasks/build.js

@@ -12,8 +12,8 @@ module.exports = function (grunt) {
     'selectconfig:dist',
     'l10n-create-json',
     'requirejs',
+    'css',
     'concurrent:dist',
-    'autoprefixer',
     'concat',
     'cssmin',
     'copy:dist',

grunttasks/clean.js

@@ -10,7 +10,7 @@ module.exports = function (grunt) {
       files: [{
         dot: true,
         src: [
-          '.tmp',
+          '<%= yeoman.tmp %>',
           '<%= yeoman.dist %>/*',
           '!<%= yeoman.dist %>/.git*'
         ]

grunttasks/copy.js

@@ -27,7 +27,7 @@ module.exports = function (grunt) {
       expand: true,
       dot: true,
       cwd: '<%= yeoman.app %>/styles',
-      dest: '.tmp/styles/',
+      dest: '<%= yeoman.tmp %>/styles/',
       src: '{,*/}*.css'
     }
   });

grunttasks/css.js

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// meta grunt task to convert and auto-prefix Sass.
+
+module.exports = function (grunt) {
+  'use strict';
+
+  grunt.registerTask('css', [
+    'sass',
+    'autoprefixer'
+  ]);
+};

grunttasks/jsonlint.js

@@ -18,8 +18,8 @@ module.exports = function (grunt) {
         '!<%= yeoman.app %>/bower_components/**',
         '!<%= yeoman.app %>/scripts/vendor/**',
         '!<%= yeoman.app %>/tests/**',
-        '!node_modules/**',
+        '!<%= yeoman.server %>/**',
-        '!<%= yeoman.server %>/**'
+        '!node_modules/**'
       ]
     }
   });

grunttasks/sass.js

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  'use strict';
+
+  grunt.config('sass', {
+    styles: {
+      files: {
+        '<%= yeoman.app %>/styles/main.css': '<%= yeoman.app %>/styles/main.scss',
+        '<%= yeoman.app %>/styles/sync.css': '<%= yeoman.app %>/styles/sync.scss'
+      }
+    }
+  });
+};

grunttasks/server.js

@@ -13,8 +13,8 @@ module.exports = function (grunt) {
     grunt.task.run([
       'clean:server',
       'selectconfig:app',
+      'css',
       'concurrent:server',
-      'autoprefixer',
       'serverproc:app'
     ]);
   });

grunttasks/test.js

@@ -7,8 +7,8 @@ module.exports = function (grunt) {
 
   grunt.registerTask('test', [
     'clean:server',
+    'css',
     'concurrent:test',
-    'autoprefixer',
     'serverproc:test'
   ]);
 };

grunttasks/usemin.js

@@ -11,7 +11,7 @@ module.exports = function (grunt) {
     },
     html: [
       '<%= yeoman.app %>/index.html',
-      '<%= yeoman.app %>/sync/*.html',
+      '<%= yeoman.app %>/sync/*.html'
     ]
   });
 

grunttasks/yeoman.js

@@ -9,6 +9,7 @@ module.exports = function (grunt) {
     app: 'app',
     dist: 'dist',
     server: 'fxa-auth-server',
-    tests: 'tests'
+    tests: 'tests',
+    tmp: '.tmp'
   });
 };

package.json

@@ -26,12 +26,8 @@
     "connect-fonts-firasans": "0.0.2",
     "convict": "0.4.0",
     "express": "3.3.4",
-    "i18n-abide": "0.0.17",
-    "jwcrypto": "0.4.3",
-    "intel": "0.4.0",
-    "helmet": "0.1.2",
     "grunt": "~0.4.1",
-    "grunt-autoprefixer": "~0.2.0",
+    "grunt-autoprefixer": "~0.7.0",
     "grunt-bower-install": "~0.5.0",
     "grunt-bower-requirejs": "~0.7.1",
     "grunt-cli": "0.1.11",
@@ -43,7 +39,7 @@
     "grunt-contrib-cssmin": "~0.6.0",
     "grunt-contrib-htmlmin": "~0.1.3",
     "grunt-contrib-imagemin": "~0.5.0",
-    "grunt-contrib-jshint": "~0.6.3",
+    "grunt-contrib-jshint": "~0.8.0",
     "grunt-contrib-uglify": "~0.2.0",
     "grunt-contrib-watch": "~0.5.2",
     "grunt-copyright": "~0.1.0",
@@ -55,16 +51,21 @@
     "grunt-preprocess": "~3.0.1",
     "grunt-requirejs": "~0.4.0",
     "grunt-rev": "~0.1.0",
+    "grunt-sass": "~0.10.0",
     "grunt-svgmin": "~0.2.0",
+    "grunt-todo": "~0.1.2",
     "grunt-usemin": "~0.1.10",
     "handlebars": "~1.3.0",
+    "helmet": "0.1.2",
+    "i18n-abide": "0.0.17",
+    "intel": "0.4.0",
     "jshint": "0.9.1",
     "jshint-stylish": "~0.1.4",
     "jsxgettext-recursive": "0.0.3",
-    "load-grunt-tasks": "0.2.1",
+    "jwcrypto": "0.4.3",
+    "load-grunt-tasks": "~0.3.0",
     "mkdirp": "~0.3.5",
-    "time-grunt": "~0.1.1",
+    "time-grunt": "~0.2.9"
-    "grunt-todo": "~0.1.2"
   },
   "devDependencies": {
     "awsbox": "0.6.2",