- [grunt] added grunt-webfont task for generation of iconic fonts; …

…introduced temp folder

.gitignore

@@ -32,7 +32,9 @@ npm-debug.log
 
 ## Sass
 .sass-cache
-/source/styles/generated/
 
 ## Build folder
-/build/
+build
+
+## Temporary folder
+temp

gruntfile.coffee

@@ -19,13 +19,18 @@ 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'
         scripts: '<%= path.source.root %>/scripts'
         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'

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"
   },

source/layouts/index.nj

@@ -18,6 +18,14 @@
 <p>Main block's content</p>
 
 
+<h2>Generated icons and sprites examples</h2>
+
+<p>Webfont home icon: <i class="icon icon--home icon--right"></i></p>
+
+<p>1px sprite: <i class="sprite sprite--test icon--right"></i></p>
+
+
+
 <h2>Data examples</h2>
 
 

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';
+$ekzo-sprites-file:      'sprite.png';

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';

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: [

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']

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'

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'