feat(icon-font): #10 add the first icon font implementation

* add generated dc-icons-* cleasses
* use the new dc namespace
* add DressCodeIcons font
* add _generated/_icons.scss
* add icons folder with 10 sample icons
* add entry into the demo- documentation

docs/demo/materials/atoms/icons/04-font-icons.html

@@ -0,0 +1,24 @@
+<style>
+    .demo-dc-icons i {
+        font-size:4.4rem;
+        display: inline-block;
+    }
+</style>
+
+
+<div class="demo-dc-icons">
+
+    <i class="dc-icons-add"></i>
+    <i class="dc-icons-cog"></i>
+    <i class="dc-icons-history"></i>
+    <i class="dc-icons-lock"></i>
+    <i class="dc-icons-more"></i>
+    <i class="dc-icons-ok dc-icons--interactive"></i>
+    <i class="dc-icons-pencil dc-icons--interactive"></i>
+    <i class="dc-icons-undo dc-icons--interactive"></i>
+    <i class="dc-icons-redo dc-icons--interactive"></i>
+    <i class="dc-icons-trash dc-icons--interactive"></i>
+
+</div>
+
+

gulpfile.js

@@ -21,6 +21,8 @@ var gulp = require('gulp');
 var ghPages = require('gulp-gh-pages');
 var gulpFilter = require('gulp-filter');
 var gulpDebug = require('gulp-debug');
+var iconfont = require('gulp-iconfont');
+var iconfontCss = require('gulp-iconfont-css');
 var pkg = require('./package.json');
 
 // configuration
@@ -39,14 +41,18 @@ var config = {
             fabricator: './docs/demo/assets/fabricator/styles/fabricator.scss',
             toolkit: './src/styles/toolkit.scss'
         },
-        images: './src/img/**/*'
+        images: './src/img/**/*',
+        icons: './src/icons/*.svg'
+
     },
     dist: 'dist',
     tmp: {
+        tmp: '.tmp',
         demo: '.tmp/.demo',
         deployDemo: '.tmp/.deploy-demo',
         distBower: '.tmp/.dist-bower',
-        deployBower: '.tmp/.deploy-bower'
+        deployBower: '.tmp/.deploy-bower',
+        iconfont: '.tmp/.iconfont'
     }
 };
 
@@ -55,7 +61,7 @@ var config = {
  *
  *
  *
- *  DEMO TASKS
+ *  DEMO/DEVELOPMENT TASKS
  *
  *
  *
@@ -65,8 +71,8 @@ var config = {
 var demoWebpackConfig = require('./webpack.demo.config')(config);
 var demoWebpackCompiler = webpack(demoWebpackConfig);
 
-gulp.task('demo', function (cb) {
-    runSequence('demo:clean', ['demo:styles', 'demo:scripts', 'demo:images', 'demo:assemble'], cb)
+gulp.task('demo', function(cb) {
+	runSequence('demo:clean',['demo:styles', 'demo:scripts', 'demo:images', 'demo:icons', 'demo:assemble'], cb)
 });
 
 // clean
@@ -123,6 +129,32 @@ gulp.task('demo:images', ['demo:favicon'], function () {
         .pipe(gulp.dest(path.join(config.tmp.demo, '/assets/toolkit/img')));
 });
 
+// Generate the font by using what is found in the src/icons folder
+// Generate the scss _generated/icons.scss to use icons as classes
+gulp.task('demo:icons', function () {
+    var runTimestamp = Math.round(Date.now()/1000);
+    var fontName = 'DressCodeIcons';
+
+    return gulp.src(config.src.icons)
+        .pipe(gulp.dest(path.join(config.tmp.iconfont, '/svg-icons')))
+        .pipe(iconfontCss({
+            fontName: fontName,
+            path: 'scss',
+            targetPath: '../styles/_generated/_icons.scss',
+            fontPath: '../fonts/',
+            cssClass: 'dc-icons'
+        }))
+        .pipe(iconfont({
+            fontName: fontName, // required
+            formats: ['ttf', 'eot', 'woff','svg','woof2'],
+            timestamp: runTimestamp, // recommended to get consistent builds when watching files,
+            normalize: true,
+            centerHorizontally: true
+        }))
+        .pipe(gulp.dest(path.join('src' , '/fonts')))
+        .pipe(gulp.dest(path.join(config.tmp.demo, '/assets/toolkit/fonts')))
+});
+
 gulp.task('demo:favicon', function () {
     return gulp.src('./docs/demo/favicon.ico')
         .pipe(gulp.dest(config.tmp.demo));
@@ -190,6 +222,9 @@ gulp.task('demo:serve', function () {
     gulp.task('demo:images:watch', ['demo:images'], reload);
     gulp.watch(config.src.images, ['demo:images:watch']);
 
+    gulp.task('demo:icons:watch', ['demo:icons'], reload);
+    gulp.watch(config.src.icons, ['demo:fonts:watch']);
+
 });
 
 gulp.task('demo:deploy', ['demo'], function () {

package.json

@@ -47,6 +47,7 @@
     "gulp-filter": "^3.0.1",
     "gulp-gh-pages": "^0.5.2",
     "gulp-iconfont": "^5.0.0",
+    "gulp-iconfont-css": "^2.0.0",
     "gulp-if": "^1.2.5",
     "gulp-imagemin": "^2.2.1",
     "gulp-modernizr": "0.0.0",

src/styles/_generated/_icons.scss

@@ -0,0 +1,109 @@
+@font-face {
+	font-family: "DressCodeIcons";
+	src: url('../fonts/DressCodeIcons.eot');
+	src: url('../fonts/DressCodeIcons.eot?#iefix') format('eot'),
+		url('../fonts/DressCodeIcons.woff') format('woff'),
+		url('../fonts/DressCodeIcons.ttf') format('truetype'),
+		url('../fonts/DressCodeIcons.svg#DressCodeIcons') format('svg');
+}
+
+@mixin dc-icons-styles {
+	font-family: "DressCodeIcons";
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	font-style: normal;
+	font-variant: normal;
+	font-weight: normal;
+	// speak: none; // only necessary if not using the private unicode range (firstGlyph option)
+	text-decoration: none;
+	text-transform: none;
+}
+
+%dc-icons {
+	@include dc-icons-styles;
+}
+
+@function dc-icons-char($filename) {
+	$char: "";
+
+	@if $filename == add {
+		$char: "\E001";
+	}
+	@if $filename == cog {
+		$char: "\E002";
+	}
+	@if $filename == eye {
+		$char: "\E003";
+	}
+	@if $filename == history {
+		$char: "\E004";
+	}
+	@if $filename == lock {
+		$char: "\E005";
+	}
+	@if $filename == more {
+		$char: "\E006";
+	}
+	@if $filename == ok {
+		$char: "\E007";
+	}
+	@if $filename == pencil {
+		$char: "\E008";
+	}
+	@if $filename == redo {
+		$char: "\E009";
+	}
+	@if $filename == trash {
+		$char: "\E00A";
+	}
+	@if $filename == undo {
+		$char: "\E00B";
+	}
+
+	@return $char;
+}
+
+@mixin dc-icons($filename, $insert: before, $extend: true) {
+	&:#{$insert} {
+		@if $extend {
+			@extend %dc-icons;
+		} @else {
+			@include dc-icons-styles;
+		}
+		content: dc-icons-char($filename);
+	}
+}
+
+.dc-icons-add {
+	@include dc-icons(add);
+}
+.dc-icons-cog {
+	@include dc-icons(cog);
+}
+.dc-icons-eye {
+	@include dc-icons(eye);
+}
+.dc-icons-history {
+	@include dc-icons(history);
+}
+.dc-icons-lock {
+	@include dc-icons(lock);
+}
+.dc-icons-more {
+	@include dc-icons(more);
+}
+.dc-icons-ok {
+	@include dc-icons(ok);
+}
+.dc-icons-pencil {
+	@include dc-icons(pencil);
+}
+.dc-icons-redo {
+	@include dc-icons(redo);
+}
+.dc-icons-trash {
+	@include dc-icons(trash);
+}
+.dc-icons-undo {
+	@include dc-icons(undo);
+}

src/styles/modules/_icons.scss

@@ -0,0 +1,10 @@
+i[class^="dc-icons-"] {
+    color: $blue40;
+
+    &.dc-icons--interactive  {
+        cursor: pointer;
+        &:hover {
+            color: $blue20;
+        }
+    }
+}

src/styles/toolkit.scss

@@ -9,6 +9,9 @@
 	// Common base
 	@import "base";
 
+    @import "_generated/icons";
+
+    @import "modules/icons";
 	@import "modules/btn";
 	@import "modules/header";
 	@import "modules/table";