Migrate to relative units

gulpfile.js

@@ -10,7 +10,18 @@ var buffer = require('vinyl-buffer');
 var source = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
 var merge = require('merge-stream');
-var autoprefixer = require('gulp-autoprefixer');
+var postcss = require('gulp-postcss');
+var pxtorem = require('postcss-pxtorem');
+var autoprefixer = require('autoprefixer');
+
+var cssProcessors = [
+    autoprefixer(),
+    pxtorem({
+        rootValue: 14,
+        replace: false,
+        propWhiteList: []
+    })
+];
 
 gulp.task('js', function() {
     browserify('./jet/static/jet/js/src/main.js')
@@ -39,6 +50,10 @@ gulp.task('vendor-css', function() {
                 console.error(error);
             })
     )
+        .pipe(postcss(cssProcessors))
+        .on('error', function(error) {
+            console.error(error);
+        })
         .pipe(minifyCss())
         .on('error', function(error) {
             console.error(error);
@@ -57,7 +72,7 @@ gulp.task('scss', function() {
         .on('error', function(error) {
             console.error(error);
         })
-        .pipe(autoprefixer())
+        .pipe(postcss(cssProcessors))
         .on('error', function(error) {
             console.error(error);
         })

jet/static/jet/css/_base.scss

@@ -9,12 +9,19 @@ html, body {
   padding: 0;
 }
 
+html {
+  font-size: 87.5%;
+
+  @include for-mobile {
+    font-size: 100%;
+  }
+}
+
 body {
   height: 100%;
   background: $background-color;
   color: $text-color;
   font-family: $font;
-  font-size: $font-size;
   text-size-adjust: 100%;
 
   &.non-scrollable {

package.json

@@ -1,13 +1,14 @@
 {
   "name": "django-jet",
   "devDependencies": {
+    "autoprefixer": "6.4.0",
     "browserify": "13.0.1",
     "browsernizr": "2.1.0",
     "es6-promise": "3.2.1",
     "gulp": "3.9.1",
-    "gulp-autoprefixer": "3.1.0",
     "gulp-concat-css": "2.3.0",
     "gulp-minify-css": "1.2.4",
+    "gulp-postcss": "6.1.1",
     "gulp-sass": "2.3.2",
     "gulp-sourcemaps": "1.6.0",
     "gulp-uglify": "1.5.4",
@@ -17,6 +18,7 @@
     "jquery.mousewheel": "3.1.9",
     "merge-stream": "1.0.0",
     "perfect-scrollbar": "git://github.com/noraesae/perfect-scrollbar#0.6.5",
+    "postcss-pxtorem": "3.3.1",
     "select2": "4.0.0",
     "timepicker": "git://github.com/geex-arts/timepicker",
     "vinyl-buffer": "1.0.0",