Merge pull request #262 from realityking/autoprefixer

Use Autoprefixer for vendor prefixes

Gemfile

@@ -4,6 +4,7 @@ source 'https://rubygems.org'
 gem 'middleman', '~>3.3.10'
 gem 'middleman-gh-pages', '~> 0.0.3'
 gem 'middleman-syntax', '~> 2.0.0'
+gem 'middleman-autoprefixer', '~> 2.4.4'
 gem 'rouge', '~> 1.9.0'
 gem 'redcarpet', '~> 3.2.2'
 

Gemfile.lock

@@ -7,6 +7,9 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
+    autoprefixer-rails (5.2.0)
+      execjs
+      json
     celluloid (0.16.0)
       timers (~> 4.0.0)
     chunky_png (1.3.4)
@@ -54,6 +57,9 @@ GEM
       middleman-sprockets (>= 3.1.2)
       sass (>= 3.4.0, < 4.0)
       uglifier (~> 2.5)
+    middleman-autoprefixer (2.4.4)
+      autoprefixer-rails (~> 5.2.0)
+      middleman-core (>= 3.3.3)
     middleman-core (3.3.11)
       activesupport (~> 4.1.0)
       bundler (~> 1.1)
@@ -125,6 +131,7 @@ PLATFORMS
 
 DEPENDENCIES
   middleman (~> 3.3.10)
+  middleman-autoprefixer (~> 2.4.4)
   middleman-gh-pages (~> 0.0.3)
   middleman-syntax (~> 2.0.0)
   rake (~> 10.4.2)

config.rb

@@ -18,6 +18,12 @@ set :fonts_dir, 'fonts'
 # Activate the syntax highlighter
 activate :syntax
 
+activate :autoprefixer do |config|
+  config.browsers = ['last 2 version', 'Firefox ESR']
+  config.cascade  = false
+  config.inline   = true
+end
+
 # Github pages require relative links
 activate :relative_assets
 set :relative_links, true

source/stylesheets/_variables.scss

@@ -100,13 +100,10 @@ $search-box-border-color: #666;
 // These settings are probably best left alone.
 
 %break-words {
- -ms-word-break: break-all;
      word-break: break-all;
 
      /* Non standard for webkit */
      word-break: break-word;
 
--webkit-hyphens: auto;
-   -moz-hyphens: auto;
         hyphens: auto;
 }

source/stylesheets/screen.css.scss

@@ -49,25 +49,17 @@ html, body {
 }
 
 @mixin embossed-bg {
-  @include background(
+  background:
-    linear-gradient(top,
+    linear-gradient(to bottom,rgba(#000, 0.2), rgba(#000, 0) 8px),
-                    rgba(#000, 0.2),
+    linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px),
-                    rgba(#000, 0) 8px),
+    linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px),
-    linear-gradient(bottom,
+    linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px),
-                    rgba(#000, 0.2),
+    #262626;
-                    rgba(#000, 0) 8px),
-    linear-gradient(top,
-                    rgba($nav-embossed-border-top, 1),
-                    rgba($nav-embossed-border-top, 0) 1.5px),
-    linear-gradient(bottom,
-                    rgba($nav-embossed-border-bottom, 1),
-                    rgba($nav-embossed-border-bottom, 0) 1.5px),
-    $nav-subitem-bg
-  );
 }
 
 .tocify-wrapper {
-  @include transition(left ease-in-out 0.3s);
+  transition: left 0.3s ease-in-out;
+
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
@@ -102,7 +94,7 @@ html, body {
       border-width: 0 0 1px 0;
       border-color: $search-box-border-color;
       padding: 6px 0 6px 20px;
-      @include box-sizing(border-box);
+      box-sizing: border-box;
       margin: $nav-v-padding $nav-padding;
       width: $nav-width - 30;
       outline: none;
@@ -125,13 +117,13 @@ html, body {
 
   .search-results {
     margin-top: 0;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    @include transition-property(height margin);
+    transition-property: height, margin;
-    @include transition-duration(180ms);
+    transition-duration: 180ms;
-    @include transition-timing-function(ease-in-out);
+    transition-timing-function: ease-in-out;
     &.visible {
       height: 30%;
       margin-bottom: 1em;
@@ -175,14 +167,14 @@ html, body {
 
   li {
     color: $nav-text;
-    @include transition-property('background');
+    transition-property: background;
-    @include transition-timing-function('linear');
+    transition-timing-function: linear;
-    @include transition-duration(230ms);
+    transition-duration: 230ms;
   }
 
   // This is the currently selected ToC entry
   .tocify-focus {
-    @include box-shadow(0px 1px 0px $nav-active-shadow);
+    box-shadow: 0px 1px 0px $nav-active-shadow;
     background-color: $nav-active-bg;
     color: $nav-active-text;
   }
@@ -235,8 +227,8 @@ html, body {
     $side-pad: $main-padding / 2 - 8px;
     padding: $side-pad $side-pad $side-pad;
     background-color: rgba($main-bg, 0.7);
-    @include transform-origin(0, 0);
+    transform-origin: 0 0;
-    @include transform(rotate(-90deg) translate(-100%, 0));
+    transform: rotate(-90deg) translate(-100%, 0);
     border-radius: 0 0 0 5px;
   }
   padding: 0 1.5em 5em 0; // increase touch size area
@@ -255,7 +247,7 @@ html, body {
     vertical-align: bottom;
   }
 
-  @include transition(left ease-in-out 0.3s);
+  transition: left 0.3s ease-in-out;
 
   &:hover { opacity: 1; }
   &.open {left: $nav-width}
@@ -346,7 +338,7 @@ html, body {
   &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
     margin-right: $examples-width;
     padding: 0 $main-padding;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     display: block;
     @include text-shadow($main-embossed-text-shadow);
 
@@ -371,9 +363,7 @@ html, body {
     margin-bottom: $h1-margin-bottom;
     margin-top: 2em;
     border-top: 1px solid #ddd;
-    @include background-image(
+    background-image: linear-gradient(to bottom, #fff, #f9f9f9);
-      linear-gradient(top, #fff, #f9f9f9)
-    );
   }
 
   h1:first-child, div:first-child + h1 {
@@ -389,9 +379,7 @@ html, body {
     border-top: 1px solid #ccc;
     padding-top: 1.2em;
     padding-bottom: 1.2em;
-    @include background-image(
+    background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0));
-      linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
-    );
   }
 
   // h2s right after h1s should bump right up
@@ -525,7 +513,7 @@ html, body {
     border-radius: 4px;
     border: 1px solid #F7E633;
     @include text-shadow(1px 1px 0 #666);
-    @include background(linear-gradient(bottom right, #F7E633 0%, #F1D32F 100%));
+    background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%);
   }
 }
 
@@ -546,7 +534,7 @@ html, body {
     float:right;
     clear:right;
 
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     @include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
 
     @extend %right-col;