Merge pull request #17 from nhsevidence/feature/#83-ie8-css

Add #83 - IE8 CSS build

.grunt-tasks/concurrent.js

@@ -2,5 +2,5 @@ module.exports = {
 	options: {
 		stream: true
 	},
-	default: ["sassdoc", "documentation", "modernizr", "webfont", "sass:dev", "webpack:dev"]
+	default: ["sassdoc", "documentation", "modernizr", "webfont", "sass:dev", "postcss", "webpack:dev"]
 };

.grunt-tasks/postcss.js

@@ -0,0 +1,12 @@
+module.exports = {
+	options: {
+		map: true,
+		processors: [
+			require("pixrem")(), // add fallbacks for rem units
+			require("autoprefixer")({ browsers: "last 2 versions" }), // add vendor prefixes
+		]
+	},
+	default: {
+		src: "./dist/stylesheets/*.css"
+	}
+};

.grunt-tasks/watch.js

@@ -15,7 +15,7 @@ module.exports = {
 	},
 	sass: {
 		files: sasslint.target.src,
-		tasks: ["sass:dev", "newer:sasslint", "sassdoc"],
+		tasks: ["sass:dev", "postcss", "newer:sasslint", "sassdoc"],
 		options: {
 			spawn: false
 		}

Gruntfile.js

@@ -36,10 +36,10 @@ module.exports = grunt => {
 	r("test", ["mochaTest"]);
 
 	// For deploying the web app. Builds minified SASS/JS
-	r("dist", ["env:dist", "clean", "sass:dist", "webpack:dist"]);
+	r("dist", ["env:dist", "clean", "sass:dist", "postcss", "webpack:dist"]);
 
 	// For building before publishing to NPM etc
-	r("prepublish", ["env:dist", "clean", "sass:publish", "sass:publishMin", "webpack:dist"]);
+	r("prepublish", ["env:dist", "clean", "sass:publish", "postcss", "sass:publishMin", "webpack:dist"]);
 
 	r("default", ["env:dev", "lint", "test", "concurrent:default", "watch"]);
 };

package.json

@@ -51,6 +51,7 @@
     "webpack-notifier": "^1.4.1"
   },
   "dependencies": {
+    "autoprefixer": "^6.5.1",
     "babel-core": "^6.10.4",
     "babel-eslint": "^7.0.0",
     "babel-loader": "^6.2.4",
@@ -84,6 +85,7 @@
     "grunt-mocha-test": "^0.13.2",
     "grunt-modernizr": "^1.0.2",
     "grunt-newer": "^1.2.0",
+    "grunt-postcss": "^0.8.0",
     "grunt-sass": "^1.2.1",
     "grunt-sass-lint": "^0.2.0",
     "grunt-sassdoc": "^2.0.2",
@@ -105,6 +107,7 @@
     "node-common-errors": "^0.4.0",
     "node-sass": "^3.10.0",
     "nunjucks": "^2.5.2",
+    "pixrem": "^3.0.2",
     "sassdoc-extras": "^2.4.1",
     "serve-favicon": "^2.3.0",
     "sinon": "^1.17.6",

src/stylesheets/settings/_settings-variables.scss

@@ -6,27 +6,27 @@
 ///   - root font size
 $nice-breakpoints: (
   mobile: (
-    root-size: 12,
+    root-size: 14,
     ms-ratio: get-ratio(major-second)
   ),
   xs: (
     width: 440px,
-    root-size: 13,
+    root-size: 14,
     ms-ratio: get-ratio(major-second)
   ),
   sm: (
     width: 720px,
-    root-size: 14,
+    root-size: 16,
     ms-ratio: get-ratio(major-second)
   ),
   md: (
     width: 960px,
-    root-size: 15,
+    root-size: 16,
     ms-ratio: get-ratio(major-second)
   ),
   lg: (
     width: 1200px,
-    root-size: 16,
+    root-size: 17,
     ms-ratio: get-ratio(major-second)
   ),
   xl: (

src/stylesheets/typography/_typography-global.scss

@@ -11,7 +11,8 @@
 }
 
 html {
-  @include root-size;
+  //@include root-size;
+  font-size: 100%;
 }
 
 body {

src/stylesheets/typography/_typography-helpers.scss

@@ -27,20 +27,20 @@
 ///       font-size: 81.25%;
 ///     }
 ///   }
-@mixin root-size {
-  @each $brkpnt-key, $brkpnt-value in $nice-breakpoints {
-    $root-size: map-get($brkpnt-value, root-size);
-    $font-size-pc: $root-size / $base-font-size * 100%;
+// @mixin root-size {
+//   @each $brkpnt-key, $brkpnt-value in $nice-breakpoints {
+//     $root-size: map-get($brkpnt-value, root-size);
+//     $font-size-pc: $root-size / $base-font-size * 100%;
 
-    @if map-has-key($brkpnt-value, width) {
-      @include mq($from: $brkpnt-key) {
-        font-size: $font-size-pc;
-      }
-    } @else {
-      font-size: $font-size-pc;
-    }
-  }
-}
+//     @if map-has-key($brkpnt-value, width) {
+//       @include mq($from: $brkpnt-key) {
+//         font-size: $font-size-pc;
+//       }
+//     } @else {
+//       font-size: $font-size-pc;
+//     }
+//   }
+// }
 
 
 /// Gets a numeric font size (in px) from a given scale multiplier and breakpoint.