From b0be6463a8a5d38b78b35a3d58332132663b4bfa Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Thu, 8 May 2014 11:24:17 +0100 Subject: [PATCH] Grunt SVG stuff and general tidy-up --- .gitignore | 8 +++---- Gruntfile.js | 38 ++++++++++++++++++++++++++++++- css/_forms.scss | 2 +- css/_mixins.scss | 7 +----- css/_normalise.scss | 55 ++++++++++++++++++++++++++++++++++++++++++++- css/_utilities.scss | 8 +++++-- css/_vars.scss | 8 ++++--- css/style.scss | 2 +- functions.php | 4 ++-- header.php | 2 +- js/script.js | 4 +++- package.json | 5 ++++- script.js | 1 + style.css | 2 +- 14 files changed, 121 insertions(+), 25 deletions(-) create mode 100644 script.js diff --git a/.gitignore b/.gitignore index 17d3ec9..76e1922 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ npm-debug.log -.sass-cache/* -node_modules/* -css/bourbon/* -css/neat/* \ No newline at end of file +.sass-cache +node_modules +css/bourbon +css/neat \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 7dd58c4..defb3e2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -19,6 +19,35 @@ module.exports = function(grunt) { files: { 'style.css': 'css/style.scss' } } }, + svgmin: { + options: { + plugins: [{ + removeViewBox: false + }], + }, + dist: { + files: [{ + expand: true, + cwd: 'img/', + src: ['*.svg'], + dest: 'img/', + ext: '.svg' + }], + } + }, + svg2png: { + all: { + files: [{ + src: ['img/*.svg'], + dest: 'img/' + }], + } + }, + uglify: { + all: { + files: { 'script.js': 'js/*.js' } + } + }, watch: { css: { files: ['css/*.scss'], @@ -26,6 +55,10 @@ module.exports = function(grunt) { options: { livereload: true } + }, + js: { + files: ['js/*.js'], + tasks: ['uglify'] } } }); @@ -33,8 +66,11 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-svg2png'); + grunt.loadNpmTasks('grunt-svgmin'); grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.registerTask('default', ['imagemin', 'sass', 'watch']); + grunt.registerTask('default', ['imagemin', 'sass', 'svgmin', 'svg2png', 'watch', 'uglify']); }; \ No newline at end of file diff --git a/css/_forms.scss b/css/_forms.scss index 352b21b..76c06c6 100755 --- a/css/_forms.scss +++ b/css/_forms.scss @@ -45,4 +45,4 @@ textarea { padding: 0 $base-margin-bottom; text-align: center; width: auto; -} +} \ No newline at end of file diff --git a/css/_mixins.scss b/css/_mixins.scss index 4b70c14..3fe70be 100755 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -4,12 +4,7 @@ } } -@function calculate-rem($px, $base: $base-font-size) { - $rem: $px / $base; - @return #{$rem}rem; -} - @mixin font-size($px) { font-size: $px + px; - font-size: calculate-rem($px); + font-size: #{$px / $base-font-size}rem; } \ No newline at end of file diff --git a/css/_normalise.scss b/css/_normalise.scss index 719190b..2874ca5 100755 --- a/css/_normalise.scss +++ b/css/_normalise.scss @@ -16,11 +16,33 @@ h4, h5, h6, p, +hr, ul, ol { margin-bottom: $base-margin-bottom; } +h1 { + @include font-size($base-font-size * 2); +} + +h2 { + @include font-size($base-font-size * 1.75); +} + +h3 { + @include font-size($base-font-size * 1.5); +} + +h4 { + @include font-size($base-font-size * 1.25); +} + +h5, +h6 { + @include font-size($base-font-size); +} + ul, ol { margin-left: $base-margin-bottom; @@ -38,6 +60,37 @@ img { } blockquote { - font-style: italic; + font-family: serif; padding-left: $base-margin-bottom; +} + +em { + font-style: italic; +} + +hr { + background-color: $base-colour; + border: 0; + color: $base-colour; + height: 1px; +} + +h1, +h2, +h3, +h4, +h5, +h6, +strong, +th { + font-weight: bold; +} + +table { + width: 100%; + th, + td { + padding: ($base-margin-bottom / 4); + text-align: left; + } } \ No newline at end of file diff --git a/css/_utilities.scss b/css/_utilities.scss index 43b06d2..cb6eb46 100755 --- a/css/_utilities.scss +++ b/css/_utilities.scss @@ -3,7 +3,7 @@ } img.alignleft { - margin-right: $gutter * 1px; + margin-right: $base-margin-bottom; } .alignright { @@ -11,7 +11,7 @@ img.alignleft { } img.alignright { - margin-left : $gutter * 1px; + margin-left : $base-margin-bottom; } .aligncenter { @@ -22,6 +22,10 @@ img.alignright { } } +img.aligncenter { + margin-bottom: $base-margin-bottom; +} + .clearfix { &:before, &:after{ diff --git a/css/_vars.scss b/css/_vars.scss index fd56015..4121b23 100755 --- a/css/_vars.scss +++ b/css/_vars.scss @@ -8,9 +8,11 @@ $base-font-size: 16; $base-line-height: 1.5; $base-margin-bottom: ($base-font-size * $base-line-height) * 1px; -// Media Queries +// Breakpoints -$mobile: 640px; +$breakpoint-small: 640px; +$breakpoint-medium: 768px; +$breakpoint-large: 1200px; // Scaffolding @@ -18,4 +20,4 @@ $max-width: 1200px; $grid-columns: 12; $gutter: 20; -// Custom colours etc. +// Custom colours etc. \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 2610d1b..16a1eac 100755 --- a/css/style.scss +++ b/css/style.scss @@ -30,4 +30,4 @@ Author: Mike Francis // Nav abstraction, Navs -@import 'nav'; +@import 'nav'; \ No newline at end of file diff --git a/functions.php b/functions.php index aa21456..c594603 100644 --- a/functions.php +++ b/functions.php @@ -35,7 +35,7 @@ function theme_scripts() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', true ); wp_enqueue_script( 'jquery' ); - wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), null, true ); + wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ), null, true ); } add_action( 'wp_enqueue_scripts', 'theme_scripts' ); @@ -56,4 +56,4 @@ function wp_nav_menu_args( $args = '' ) { return $args; } -add_filter( 'wp_nav_menu_args', 'wp_nav_menu_args' ); +add_filter( 'wp_nav_menu_args', 'wp_nav_menu_args' ); \ No newline at end of file diff --git a/header.php b/header.php index 2e3034f..dd336cd 100755 --- a/header.php +++ b/header.php @@ -21,4 +21,4 @@ 'header' ) ); ?> - + \ No newline at end of file diff --git a/js/script.js b/js/script.js index 5336497..196e7fa 100644 --- a/js/script.js +++ b/js/script.js @@ -1,3 +1,5 @@ $(function() { -}); + + +}); \ No newline at end of file diff --git a/package.json b/package.json index 7baa8cd..86345a9 100755 --- a/package.json +++ b/package.json @@ -5,6 +5,9 @@ "grunt": "~0.4.2", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-imagemin": "~0.5.0" + "grunt-contrib-imagemin": "~0.5.0", + "grunt-svg2png": "~0.2.0", + "grunt-svgmin": "~0.4.0", + "grunt-contrib-uglify": "~0.4.0" } } \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bf2b073 --- /dev/null +++ b/script.js @@ -0,0 +1 @@ +$(function(){}); \ No newline at end of file diff --git a/style.css b/style.css index 00cfcd3..d8eeb46 100644 --- a/style.css +++ b/style.css @@ -1 +1 @@ -@import '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css';*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}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{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}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,ul,ol{margin-bottom:24px}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-style:italic;padding-left:24px}.alignleft{float:left}img.alignleft{margin-right:20px}.alignright{float:right}img.alignright{margin-left:20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.clearfix:before,.form__controls:before,.clearfix:after,.form__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__controls:after{clear:both}.container{*zoom:1;max-width:940px;margin-left:auto;margin-right:auto;padding:0 20px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px 12px;width:208px}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__label{font-weight:bold}input[type="submit"],.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;height:36px;line-height:36px;padding:0 24px;width:auto}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block} +*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}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}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom: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}.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__controls:before,.clearfix:after,.form__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__controls:after{clear:both}.container{*zoom:1;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 20px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px 12px;width:300px}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__label{font-weight:bold}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}