Autoprefixing and clean up

.gitignore

@@ -1,6 +1,3 @@
 npm-debug.log
 .sass-cache
-node_modules
+node_modules
-css-tests.php
-css/bourbon
-css/neat

Gruntfile.js

@@ -5,6 +5,14 @@ module.exports = function(grunt) {
   };
  
   grunt.initConfig({
+    autoprefixer: {
+      single_file: {
+        options: {
+          browsers: ['last 10 version']
+        },
+        files: { 'style.css': 'style.css' }
+      }
+    },
     imageoptim: {
       src: [paths.img],
       options: {
@@ -14,7 +22,7 @@ module.exports = function(grunt) {
     sass: {
       dist: {
         options: {
-          style: 'compressed'
+          style: 'expanded'
         },
         files: { 'style.css': 'scss/style.scss' }
       }
@@ -48,13 +56,13 @@ module.exports = function(grunt) {
     },
     uglify: {
       all: {
-        files: { 'script.js': 'js/*.js' }
+        files: { 'script.js': 'script.js' }
       }
     },
     watch: {
       css: {
         files: ['scss/**/*.scss'],
-        tasks: ['sass'],
+        tasks: ['sass', 'autoprefixer'],
         options: {
           livereload: true
         }
@@ -66,6 +74,7 @@ module.exports = function(grunt) {
     }
   });
  
+  grunt.loadNpmTasks('grunt-autoprefixer');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-uglify');
@@ -74,6 +83,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-svg2png');
   grunt.loadNpmTasks('grunt-svgmin');
  
-  grunt.registerTask('default', ['imageoptim', 'sass', 'svgmin', 'svg2png', 'watch', 'uglify', 'jshint']);
+  grunt.registerTask('default', ['imageoptim', 'svgmin', 'svg2png', 'watch']);
  
 };

package.json

@@ -7,6 +7,7 @@
     "grunt-svg2png": "~0.2.0",
     "grunt-svgmin": "~0.4.0",
     "grunt-contrib-uglify": "~0.5.0",
-    "grunt-contrib-jshint": "~0.10.0"
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-autoprefixer": "~0.8.2"
   }
 }

script.js

@@ -1 +0,0 @@
-$(function(){});

scss/base/_normalise.scss

@@ -1,7 +1,8 @@
-* {
+*,
-  -moz-osx-font-smoothing: grayscale;
+*:before,
-   -webkit-font-smoothing: antialiased;
+*:after {
-           font-smoothing: antialiased;
+  box-sizing: border-box;
+  font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 

scss/generic/_mixins.scss

@@ -15,13 +15,6 @@
   font-size: #{$px / $base-font-size}rem;
 }
 
-@mixin background-size($size) {
-  -webkit-background-size: $size;
-     -moz-background-size: $size;
-       -o-background-size: $size;
-          background-size: $size;
-}
-
 @mixin placeholder {
   ::-webkit-input-placeholder {
     @content; 

scss/style.scss

@@ -9,9 +9,10 @@ Author: Mike Francis
 @import 'generic/reset';
 @import 'generic/utilities';
 @import 'generic/mixins';
+
 @import 'base/normalise';
 @import 'base/forms';
 @import 'base/grid';
 
 @import 'modules/nav';
-@import 'modules/buttons';
+@import 'modules/buttons';

style.css

@@ -1 +1,603 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}*{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1{font-size:32px;font-size:2rem}h2{font-size:28px;font-size:1.75rem}h3{font-size:24px;font-size:1.5rem}h4{font-size:20px;font-size:1.25rem}h5,h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}table{width:100%}table th,table td{padding:6px;text-align:left}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}
+/*
+Theme Name: Bare Bones
+Theme URI: http://github.com/mikefrancis/barebones
+Author: Mike Francis
+*/
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+main {
+  display: block;
+}
+
+address,
+caption,
+cite,
+dfn,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th {
+  font-weight: bold;
+  text-align: left;
+}
+
+.alignleft {
+  float: left;
+}
+
+img.alignleft {
+  margin-right: 24px;
+}
+
+.alignright {
+  float: right;
+}
+
+img.alignright {
+  margin-left: 24px;
+}
+
+.aligncenter {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.aligncenter {
+  margin-bottom: 24px;
+}
+
+.clearfix:before, .form__group .form__group__controls:before, .row:before, .clearfix:after, .form__group .form__group__controls:after, .row:after {
+  content: '';
+  display: table;
+  line-height: 0;
+}
+.clearfix:after, .form__group .form__group__controls:after, .row:after {
+  clear: both;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+html {
+  background-color: white;
+  color: #444444;
+  font: 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  min-height: 100%;
+}
+
+a {
+  color: #444444;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+hr,
+ul,
+ol {
+  margin-bottom: 24px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 24px;
+}
+
+h1 {
+  font-size: 32px;
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 28px;
+  font-size: 1.75rem;
+}
+
+h3 {
+  font-size: 24px;
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 20px;
+  font-size: 1.25rem;
+}
+
+h5,
+h6 {
+  font-size: 16px;
+  font-size: 1rem;
+}
+
+ul,
+ol {
+  margin-left: 24px;
+}
+
+ul ul,
+ol ol {
+  margin-bottom: 0;
+}
+
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+blockquote {
+  font-family: serif;
+  padding-left: 24px;
+}
+
+em {
+  font-style: italic;
+}
+
+hr {
+  background-color: #444444;
+  border: 0;
+  color: #444444;
+  height: 1px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+th {
+  font-weight: bold;
+}
+
+table {
+  width: 100%;
+}
+table th,
+table td {
+  padding: 6px;
+  text-align: left;
+}
+
+input,
+select,
+textarea {
+  background-color: white;
+  border: solid 1px #444444;
+  color: #444444;
+  display: inline-block;
+  font: inherit;
+  line-height: 24px;
+  padding: 6px;
+  width: 100%;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  background: transparent;
+  border: 0;
+  width: auto;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+}
+
+select {
+  height: 36px;
+}
+
+textarea {
+  min-height: 96px;
+}
+
+.form__group {
+  margin-bottom: 24px;
+}
+.form__group .form__group__controls label {
+  font-weight: normal;
+}
+.form__group .form__group__controls.form__group__controls--inline label {
+  display: inline-block;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  clear: both;
+}
+
+.row {
+  clear: both;
+  margin-left: -20px;
+}
+
+.col {
+  float: left;
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+.col .row {
+  margin-top: 20px;
+}
+
+@media only screen and (max-width: 640px) {
+  .col .col {
+    margin-bottom: 20px;
+  }
+  .col .col:last-child {
+    margin-bottom: 0;
+  }
+
+  .col--sd-1 {
+    width: 8.33333%;
+  }
+
+  .col--sd-offset-1 {
+    margin-left: 8.33333%;
+  }
+
+  .col--sd-2 {
+    width: 16.66667%;
+  }
+
+  .col--sd-offset-2 {
+    margin-left: 16.66667%;
+  }
+
+  .col--sd-3 {
+    width: 25%;
+  }
+
+  .col--sd-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col--sd-4 {
+    width: 33.33333%;
+  }
+
+  .col--sd-offset-4 {
+    margin-left: 33.33333%;
+  }
+
+  .col--sd-5 {
+    width: 41.66667%;
+  }
+
+  .col--sd-offset-5 {
+    margin-left: 41.66667%;
+  }
+
+  .col--sd-6 {
+    width: 50%;
+  }
+
+  .col--sd-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col--sd-7 {
+    width: 58.33333%;
+  }
+
+  .col--sd-offset-7 {
+    margin-left: 58.33333%;
+  }
+
+  .col--sd-8 {
+    width: 66.66667%;
+  }
+
+  .col--sd-offset-8 {
+    margin-left: 66.66667%;
+  }
+
+  .col--sd-9 {
+    width: 75%;
+  }
+
+  .col--sd-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col--sd-10 {
+    width: 83.33333%;
+  }
+
+  .col--sd-offset-10 {
+    margin-left: 83.33333%;
+  }
+
+  .col--sd-11 {
+    width: 91.66667%;
+  }
+
+  .col--sd-offset-11 {
+    margin-left: 91.66667%;
+  }
+
+  .col--sd-12 {
+    width: 100%;
+  }
+
+  .col--sd-offset-12 {
+    margin-left: 100%;
+  }
+}
+@media only screen and (min-width: 641px) and (max-width: 1199px) {
+  .col--md-1 {
+    width: 8.33333%;
+  }
+
+  .col--md-offset-1 {
+    margin-left: 8.33333%;
+  }
+
+  .col--md-2 {
+    width: 16.66667%;
+  }
+
+  .col--md-offset-2 {
+    margin-left: 16.66667%;
+  }
+
+  .col--md-3 {
+    width: 25%;
+  }
+
+  .col--md-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col--md-4 {
+    width: 33.33333%;
+  }
+
+  .col--md-offset-4 {
+    margin-left: 33.33333%;
+  }
+
+  .col--md-5 {
+    width: 41.66667%;
+  }
+
+  .col--md-offset-5 {
+    margin-left: 41.66667%;
+  }
+
+  .col--md-6 {
+    width: 50%;
+  }
+
+  .col--md-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col--md-7 {
+    width: 58.33333%;
+  }
+
+  .col--md-offset-7 {
+    margin-left: 58.33333%;
+  }
+
+  .col--md-8 {
+    width: 66.66667%;
+  }
+
+  .col--md-offset-8 {
+    margin-left: 66.66667%;
+  }
+
+  .col--md-9 {
+    width: 75%;
+  }
+
+  .col--md-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col--md-10 {
+    width: 83.33333%;
+  }
+
+  .col--md-offset-10 {
+    margin-left: 83.33333%;
+  }
+
+  .col--md-11 {
+    width: 91.66667%;
+  }
+
+  .col--md-offset-11 {
+    margin-left: 91.66667%;
+  }
+
+  .col--md-12 {
+    width: 100%;
+  }
+
+  .col--md-offset-12 {
+    margin-left: 100%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .col--ld-1 {
+    width: 8.33333%;
+  }
+
+  .col--ld-offset-1 {
+    margin-left: 8.33333%;
+  }
+
+  .col--ld-2 {
+    width: 16.66667%;
+  }
+
+  .col--ld-offset-2 {
+    margin-left: 16.66667%;
+  }
+
+  .col--ld-3 {
+    width: 25%;
+  }
+
+  .col--ld-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col--ld-4 {
+    width: 33.33333%;
+  }
+
+  .col--ld-offset-4 {
+    margin-left: 33.33333%;
+  }
+
+  .col--ld-5 {
+    width: 41.66667%;
+  }
+
+  .col--ld-offset-5 {
+    margin-left: 41.66667%;
+  }
+
+  .col--ld-6 {
+    width: 50%;
+  }
+
+  .col--ld-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col--ld-7 {
+    width: 58.33333%;
+  }
+
+  .col--ld-offset-7 {
+    margin-left: 58.33333%;
+  }
+
+  .col--ld-8 {
+    width: 66.66667%;
+  }
+
+  .col--ld-offset-8 {
+    margin-left: 66.66667%;
+  }
+
+  .col--ld-9 {
+    width: 75%;
+  }
+
+  .col--ld-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col--ld-10 {
+    width: 83.33333%;
+  }
+
+  .col--ld-offset-10 {
+    margin-left: 83.33333%;
+  }
+
+  .col--ld-11 {
+    width: 91.66667%;
+  }
+
+  .col--ld-offset-11 {
+    margin-left: 91.66667%;
+  }
+
+  .col--ld-12 {
+    width: 100%;
+  }
+
+  .col--ld-offset-12 {
+    margin-left: 100%;
+  }
+}
+.nav {
+  list-style: none;
+  margin: 0;
+}
+.nav > li {
+  display: inline-block;
+}
+.nav > li > a {
+  display: block;
+}
+
+.btn {
+  background-color: #444444;
+  border: 0;
+  color: white;
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  font-weight: bold;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 24px;
+  text-align: center;
+  width: auto;
+}