diff --git a/.gitignore b/.gitignore
index 138828b..caf96cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
+.DS_Store
node_modules
npm-debug.log
.tmp
dist
.grunt
styleguide/index.html
+icon_font/svgs
diff --git a/Gruntfile.js b/Gruntfile.js
index 1c69523..af9f633 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -7,6 +7,7 @@ module.exports = function (grunt) {
clean: require('./tasks/clean'),
sass: require('./tasks/sass'),
cssmin: require('./tasks/cssmin'),
+ copy: require('./tasks/copy'),
shell: require('./tasks/shell'),
watch: require('./tasks/watch'),
'gh-pages': require('./tasks/gh-pages')
@@ -14,22 +15,29 @@ module.exports = function (grunt) {
var baseTasks = [
'clean',
+ 'shell:generateFont',
'sass',
'concat',
'cssmin',
+ 'copy',
'shell'
];
+ var generateFontTask = baseTasks.concat([
+ 'shell:generateFont'
+ ]);
+
var devTasks = baseTasks.concat([
'connect',
'watch:scss'
]);
grunt.event.on('watch', function (action, filepath) {
- grunt.task.run('shell');
+ grunt.task.run('shell:style');
});
grunt.registerTask('dev', devTasks);
+ grunt.registerTask('generate-font', generateFontTask);
grunt.registerTask('build', baseTasks);
grunt.registerTask('default', baseTasks);
grunt.registerTask('publish', ['build', 'gh-pages']);
diff --git a/Gulpfile.js b/Gulpfile.js
new file mode 100644
index 0000000..6870ea9
--- /dev/null
+++ b/Gulpfile.js
@@ -0,0 +1,21 @@
+var gulp = require('gulp');
+var iconfont = require('gulp-iconfont');
+var iconfontCss = require('gulp-iconfont-css');
+
+gulp.task('default', function(){
+ gulp.src(['./icon_font/svgs/*.svg'])
+
+ .pipe(iconfontCss({
+ fontName: 'cartoIcon',
+ path: './icon_font/template.jst.ejs',
+ targetPath: '../scss/icon-font.css.scss',
+ fontPath: '../../fonts/'
+ }))
+
+ .pipe(iconfont({
+ fontName: 'cartoIcon',
+ appendCodepoints: true
+ }))
+
+ .pipe(gulp.dest('src/fonts/'));
+});
diff --git a/README.md b/README.md
index 67619a7..c365c83 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
> Share frontend assets between different CartoDB repositories
-
### Installation
As easy as:
- ```npm install```
@@ -32,3 +31,32 @@ If you have these previous steps done:
Just run this command:
- ```grunt publish```
+
+How to make changes in the CartoDB icon font
+--------------------------------------------
+
+If you want to edit, add or remove any icon in our CartoDB font, you should follow these steps:
+
+- Check you have [Sketch](http://bohemiancoding.com/sketch/) last version.
+- Open [font.sketch](http://github.com/CartoDB/CartoAssets/blob/master/icon_font/font.sketch) file and make your changes.
+
+### Rules for the icons:
+- Size should have at max 500px of width/height.
+- Place the icon accordingly with the grid.
+- Icons should be completely black.
+- Group the icon if it has several parts.
+- Make icons exportable to SVG.
+- Name your icon (layer/group) according to the pattern `icon-font_xx_Name`, where xx is a unique integer (increase it for each new icon).
+
+### When you're done with changes
+
+- Select all the icons, and export them to `app/assets/fonts/icon_font/svgs` folder (option should be visible in the bottom corner in your Sketch app):
+ - 
+ - Take into account that ```svgs``` folder is ignored.
+- Open your terminal app and go to the CartoDB root folder.
+- Install your node dependencies: `npm install`
+- Now we will generate the new icon fonts + stylesheet. Just run: `./node_modules/.bin/gulp`
+- Check that your `icon-font.css.scss` and the `cartoIcon` fonts have been edited:
+ - 
+
+All done!
diff --git a/icon_font/README.md b/icon_font/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/icon_font/font.sketch b/icon_font/font.sketch
new file mode 100644
index 0000000..4794cbd
Binary files /dev/null and b/icon_font/font.sketch differ
diff --git a/icon_font/template.jst.ejs b/icon_font/template.jst.ejs
new file mode 100644
index 0000000..2f5cc75
--- /dev/null
+++ b/icon_font/template.jst.ejs
@@ -0,0 +1,37 @@
+@font-face {
+ font-family: 'CartoIcon';
+ src: url('fonts/cartoIcon.eot');
+ src: url('fonts/cartoIcon.eot?#iefix') format('embedded-opentype'),
+ url('fonts/cartoIcon.woff') format('woff'),
+ url('fonts/cartoIcon.ttf') format('truetype'),
+ url('fonts/cartoIcon.svg?ey3vsq#cartoIcon') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.IconFont {
+ display: inline-block;
+ font-family: 'CartoIcon';
+ font-style: normal;
+ font-weight: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ line-height: 1;
+}
+
+/* SG
+# Icon font
+```
+<% _.each(glyphs, function(glyph) { %>
+