From 4e908ba705438be5d2b1345347d7b220a5116ca9 Mon Sep 17 00:00:00 2001 From: "Mr. Hyde" Date: Fri, 6 Feb 2015 00:59:16 +0100 Subject: [PATCH] - [grunt] added `grunt-webfont` task for generation of iconic fonts; introduced temp folder --- .gitignore | 6 ++++-- gruntfile.coffee | 8 ++++++++ package.json | 3 ++- source/icons/home.svg | 7 +++++++ source/layouts/index.nj | 8 ++++++++ source/styles/_settings.assets.scss | 4 ++-- source/styles/style.scss | 3 ++- tasks/grunt-contrib-clean.coffee | 10 +++++++++- tasks/grunt-contrib-watch.coffee | 5 ++++- tasks/grunt-spritesmith.coffee | 2 +- tasks/grunt-webfont.coffee | 20 ++++++++++++++++++++ 11 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 source/icons/home.svg create mode 100644 tasks/grunt-webfont.coffee diff --git a/.gitignore b/.gitignore index b7d3ce41..d0dc0514 100644 --- a/.gitignore +++ b/.gitignore @@ -32,7 +32,9 @@ npm-debug.log ## Sass .sass-cache -/source/styles/generated/ ## Build folder -/build/ \ No newline at end of file +build + +## Temporary folder +temp \ No newline at end of file diff --git a/gruntfile.coffee b/gruntfile.coffee index 27af26d1..69e23456 100644 --- a/gruntfile.coffee +++ b/gruntfile.coffee @@ -19,6 +19,7 @@ module.exports = (grunt) -> source: root: 'source' fonts: '<%= path.source.root %>/fonts' + icons: '<%= path.source.root %>/icons' images: '<%= path.source.root %>/images' styles: '<%= path.source.root %>/styles' layouts: '<%= path.source.root %>/layouts' @@ -26,6 +27,10 @@ module.exports = (grunt) -> sprites: '<%= path.source.root %>/sprites' boilerplates: '<%= path.source.root %>/boilerplates' + temp: + root: 'temp' + styles: '<%= path.temp.root %>/styles' + build: root: 'build' assets: '<%= path.build.root %>/assets' @@ -79,6 +84,7 @@ module.exports = (grunt) -> 'copy' 'nunjucks' 'sprite' + 'webfont' 'sass' 'autoprefixer' 'responsive_images:thumbnails' @@ -94,11 +100,13 @@ module.exports = (grunt) -> 'copy:build' 'nunjucks:build' 'sprite:build' + 'webfont:build' 'sass:build' 'autoprefixer:build' 'uncss:build' 'csso:build' 'clean:styles' + 'clean:temp' 'processhtml:build' 'htmlmin:build' 'responsive_images:thumbnails' diff --git a/package.json b/package.json index a323bec4..d4bdeaaa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Kotsu", - "version": "0.4.14", + "version": "0.4.15", "title": "Clean, opinionated foundation for new projects — to boldly go where no man has gone before", "author": "LotusTM", "private": true, @@ -23,6 +23,7 @@ "grunt-spritesmith": "^2.20.0", "grunt-tinypng": "^0.5.3", "grunt-uncss": "^0.3.8", + "grunt-webfont": "^0.4.8", "load-grunt-tasks": "^1.0.0", "nunjucks": "^1.1.0" }, diff --git a/source/icons/home.svg b/source/icons/home.svg new file mode 100644 index 00000000..5f371cc5 --- /dev/null +++ b/source/icons/home.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/source/layouts/index.nj b/source/layouts/index.nj index f1bfc3a8..2bcbe9f8 100644 --- a/source/layouts/index.nj +++ b/source/layouts/index.nj @@ -18,6 +18,14 @@

Main block's content

+

Generated icons and sprites examples

+ +

Webfont home icon:

+ +

1px sprite:

+ + +

Data examples

diff --git a/source/styles/_settings.assets.scss b/source/styles/_settings.assets.scss index 71e8d4a8..a045a315 100644 --- a/source/styles/_settings.assets.scss +++ b/source/styles/_settings.assets.scss @@ -26,8 +26,8 @@ $ekzo-bg: $ekzo-bg-color; $ekzo-icons-prefix: icon--; $ekzo-sprites-prefix: sprite--; -$ekzo-icon-font: fontello; +$ekzo-icon-font: icons; $ekzo-icon-font-version: 79220573; $ekzo-icon-font-svg-id: $ekzo-icon-font; -$ekzo-sprites-file: 'sprites.png'; \ No newline at end of file +$ekzo-sprites-file: 'sprite.png'; \ No newline at end of file diff --git a/source/styles/style.scss b/source/styles/style.scss index de30670c..8ddb4477 100644 --- a/source/styles/style.scss +++ b/source/styles/style.scss @@ -31,7 +31,8 @@ // Site's custom styling // --------------------------------------- -@import 'generated/sprites.map'; +@import './temp/styles/icons'; +@import './temp/styles/sprites.map'; @import 'generic/animations'; @import 'generic/fonts'; diff --git a/tasks/grunt-contrib-clean.coffee b/tasks/grunt-contrib-clean.coffee index b17d4efc..0f4b1188 100644 --- a/tasks/grunt-contrib-clean.coffee +++ b/tasks/grunt-contrib-clean.coffee @@ -7,7 +7,15 @@ module.exports = -> @config 'clean', build: files: - src: '<%= path.build.root %>/*' + src: [ + '<%= path.build.root %>/*' + '<%= path.temp.root %>/*' + ] + temp: + files: + src: [ + '<%= path.temp.root %>/*' + ] styles: files: src: [ diff --git a/tasks/grunt-contrib-watch.coffee b/tasks/grunt-contrib-watch.coffee index 12e93ba0..55255f68 100644 --- a/tasks/grunt-contrib-watch.coffee +++ b/tasks/grunt-contrib-watch.coffee @@ -6,11 +6,14 @@ Watches scss, js etc for changes and compiles them module.exports = -> @config 'watch', scss: - files: ['<%= path.source.styles %>/{,**/}*.scss'] + files: ['<%= path.source.styles %>/{,**/}*.scss','<%= path.temp.styles %>/{,**/}*.scss'] tasks: [ 'sass' 'autoprefixer' ] + icon: + files: ['<%= path.source.icons %>/{,**/}*.svg'] + tasks: ['newer:webfont'] sprite: files: ['<%= path.source.sprites %>/{,**/}*.{jpg,jpeg,gif,png}'] tasks: ['newer:sprite'] diff --git a/tasks/grunt-spritesmith.coffee b/tasks/grunt-spritesmith.coffee index 0ed92633..5c3a4d4a 100644 --- a/tasks/grunt-spritesmith.coffee +++ b/tasks/grunt-spritesmith.coffee @@ -8,7 +8,7 @@ module.exports = -> build: src: ['<%= path.source.sprites %>/{,**/}*'] destImg: '<%= file.build.sprite.compiled %>' - destCSS: '<%= path.source.styles %>/generated/_sprites.map.scss' + destCSS: '<%= path.temp.styles %>/_sprites.map.scss' padding: 2 engine: 'gm' algorithm: 'binary-tree' diff --git a/tasks/grunt-webfont.coffee b/tasks/grunt-webfont.coffee new file mode 100644 index 00000000..5f64e821 --- /dev/null +++ b/tasks/grunt-webfont.coffee @@ -0,0 +1,20 @@ +### +SVG to webfont converter for Grunt +https://github.com/sapegin/grunt-webfont +Generate custom icon webfonts from SVG files +### +module.exports = -> + @config 'webfont', + build: + src: '<%= path.source.icons %>/{,**/}*.svg' + dest: '<%= path.build.fonts %>/' + destCss: '<%= path.temp.styles %>' + options: + hashes: false + styles: '' + templateOptions: + baseClass: 'icon' + classPrefix: 'icon--' + stylesheet: 'scss' + htmlDemo: false + engine: 'node' \ No newline at end of file