diff --git a/.gitignore b/.gitignore index 1bf8e1e..76fa0ba 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,3 @@ npm-debug.log .sass-cache -node_modules -css-tests.php -css/bourbon -css/neat \ No newline at end of file +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 154718e..ab53c58 100644 --- a/Gruntfile.js +++ b/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']); }; diff --git a/package.json b/package.json index 99a134a..3d4170f 100755 --- a/package.json +++ b/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" } } diff --git a/script.js b/script.js deleted file mode 100644 index bf2b073..0000000 --- a/script.js +++ /dev/null @@ -1 +0,0 @@ -$(function(){}); \ No newline at end of file diff --git a/scss/base/_normalise.scss b/scss/base/_normalise.scss index e97bb52..840c1d2 100755 --- a/scss/base/_normalise.scss +++ b/scss/base/_normalise.scss @@ -1,7 +1,8 @@ -* { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; +*, +*:before, +*:after { + box-sizing: border-box; + font-smoothing: antialiased; text-rendering: optimizeLegibility; } diff --git a/scss/generic/_mixins.scss b/scss/generic/_mixins.scss index cca8fcf..ebec811 100755 --- a/scss/generic/_mixins.scss +++ b/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; diff --git a/scss/style.scss b/scss/style.scss index 924ef58..e223079 100755 --- a/scss/style.scss +++ b/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'; \ No newline at end of file diff --git a/style.css b/style.css index 7229c88..127db2c 100644 --- a/style.css +++ b/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; +}