Enable grunt-webfont node engine by default, & remove icons.scss & fo…

…nts from src/

Better versionning for end users.

.travis.yml

@@ -4,8 +4,6 @@ before_install:
   - make install
 # local requirements
   - make update
-# grunt-webfont requirements
-  - sudo apt-get install fontforge
 # for some test with dates
   - sudo cp /usr/share/zoneinfo/Europe/Paris /etc/localtime
 

Makefile

@@ -1,6 +1,5 @@
 install:
 	npm install -g bower grunt-cli
-	# add fontforge here if possible (for grunt-webfont)
 
 update:
 	npm install

docs/0-Requirements.md

@@ -18,6 +18,22 @@
 
     $ npm install -g bower
 
-### Grunt-Webfont requirements [[+](https://github.com/sapegin/grunt-webfont#installation)]
+### Grunt-Webfont options [[+](https://github.com/sapegin/grunt-webfont#installation)]
 
-    $ brew install fontforge ttfautohint
+To improve font hint
+
+    $ brew install ttfautohint
+
+To use fontforge instead of node engine
+
+    $ brew install fontforge
+
+Note: To use fontforge engine, you also need to specify in your `happyplan.json`
+
+```js
+{
+  "glyphicons": {
+    "engine": "fontforge"
+  }
+}
+```

docs/2-Configuring-Project.md

@@ -348,13 +348,32 @@ This example can be adapted easily to **Less** or something else if you really w
 ### Glyphicons
 
 The concept is simple: you can drop .svg files in the `_glyphicons` folder & all of them will be "compiled" into a webfont.
-This will create all files format to be compatible with old browsers & also create a `_icons.scss` in the `src/assets/_styles` folder.
+This will create all files format to be compatible with old browsers & also create a `_icons.scss` in the `build/assets/_styles` folder
+(this path is normally added as a Sass include path).
 This CSS file will contain a class for each svg.
 Eg: you've put `home.svg`, so `icon_home` class will be accessible.
 
-To use webfont icons directly in your html, you need to be sure that `_icons.scss` is included in your stylesheet & use appropriate html classes.
+To use glyphicons directly in your html, you need to be sure that `_icons.scss` is included in your stylesheet (`@import "icons"` should be enough)
+& use appropriate html classes.
 Ex: `<i class="icon icon_home"></i>` (here `<i>` is just used because it's shorter, you can obviously use whatever you want).
 
+By default, a node engine is used. If you are not happy with the result,
+you can use fontforge (you need to install it) & activate it as the default engine.
+After checking fontforge is correctly installed on you machine
+(check with `fontforge --version`),
+you will need to specify it in your `happyplan.json`:
+
+```js
+{
+  "glyphicons": {
+    "engine": "fontforge"
+  }
+}
+```
+
+Remember that if fontforge is not available in the PATH during the process, build will be skipped
+(you will see a notification about the skip).
+
 ### Images
 
 You can put whatever you want in the default `src/assets/_images` folder, but you need to know that by default, some file formats will be ignored to make the build lighter. Here is the default configuration.

grunt_tasks/config/webfont.js

@@ -12,16 +12,17 @@ module.exports = function(grunt) {
   return {
     glyphicons: {
       src: glyphicons,
-      dest: '<%= happyplan.path.assets.fonts %>',
-      destCss: '<%= happyplan.path.assets.styles %>',
+      dest: '<%= happyplan.path.build.assets.fonts %>',
+      destCss: '<%= happyplan.path.build.assets.styles %>',
       options: {
           relativeFontPath: require('path').relative(
             happyplan.cwd + '/' + grunt.config.get(['happyplan', 'path', 'dist', 'assets', 'styles']),
             happyplan.cwd + '/' + grunt.config.get(['happyplan', 'path', 'dist', 'assets', 'fonts'])
           ),
           stylesheet: 'scss',
           hashes: false,
-          htmlDemo: false
+          htmlDemo: false,
+          engine: '<%= happyplan.glyphicons.engine %>'
       }
     }
   }

grunt_tasks/glyphicons.js

@@ -13,8 +13,10 @@ module.exports = function(grunt) {
     if (grunt.file.expand(glyphicons).length) {
       var happyplan = grunt.config.get('happyplan');
 
-      // for fist run, if optional checking availability of fontforge
-      // then define variable to really execute task
+      happyplan.glyphicons.build = happyplan.glyphicons.engine === "node"
+
+      // if fontforge asked, for fist run, we check availability of fontforge
+      // and so change the `build` variable to really execute task
       if (happyplan.glyphicons.build === true) {
         grunt.log.writeln(grunt.template.process("SVG files found. Executing 'webfont:glyphicons'."))
         grunt.task.run('webfont:glyphicons')

happyplan.json

@@ -133,13 +133,15 @@
   "assemble": {},
   "sass": {
     "includePaths": [
-      "<%= happyplan.bower_components %>"
+        "<%= happyplan.path.build.assets.styles %>"
+      , "<%= happyplan.bower_components %>"
     ]
-  },
-  "glyphicons": {
-    "build": "ifpossible"
-  },
-  "git": {
+  }
+  , "glyphicons": {
+      "build": "ifpossible"
+    , "engine": "node"
+  }
+  , "git": {
     "branch": "gh-pages"
   }
   , "codeHighlightMap": {

package.json

@@ -28,7 +28,7 @@
     "grunt-sass": "~0.9.0",
     "grunt-contrib-uglify": "~0.2.4",
     "grunt-contrib-imagemin": "~0.4.0",
-    "grunt-webfont": "~0.2.0",
+    "grunt-webfont": "~0.3.0",
     "grunt-autoprefixer": "~0.6.3",
     "grunt-contrib-connect": "~0.5.0",
     "connect-livereload": "~0.3.0",

test/features/theme_child/expected/assets/css/testname.css

@@ -1,3 +1,26 @@
 html {
   color: blue;
   background: red; }
+
+@font-face {
+  font-family: "icons";
+  src: url("../fonts/icons.eot");
+  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg?#icons") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+.icon {
+  font-family: "icons";
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  speak: none;
+  text-decoration: inherit;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon_home:before {
+  content: "\e001"; }

test/features/theme_child/src/assets/_styles/testname.scss

@@ -1,4 +1,6 @@
 html {
 	color: blue;
 	background: red;
-}
+}
+
+@import "icons";