Adds instructions to generate the icon font in the README

README.md

@@ -2,7 +2,6 @@
 
 > Share frontend assets between different CartoDB repositories
 
-
 ### Installation
 As easy as:
 - ```npm install```
@@ -29,3 +28,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):
+  - ![screen shot 2015-01-16 at 11 40 36](https://cloud.githubusercontent.com/assets/978461/5774986/93dc90e8-9d74-11e4-8064-a478e55d392b.png)
+  - 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: 
+  - ![screen shot 2015-01-16 at 11 02 53](https://cloud.githubusercontent.com/assets/978461/5775004/acf10faa-9d74-11e4-893c-790da626d894.png)
+
+All done!

icon_font/README.md

@@ -1,29 +0,0 @@
-How to make changes in the CartoDB icon font
---------------------------------------------
-
-If you want to edit, add or remove any icon in our new CartoDB font, you should follow these steps:
-
-- Check you have [Sketch](http://bohemiancoding.com/sketch/) last version.
-- Open [font.sketch](http://github.com/CartoDB/cartodb/blob/master/app/assets/fonts/icon_font/font.sketch) file and make your changes
-
-
-### Rules for your new 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 icons, and export them to `app/assets/fonts/icon_font/svgs` folder (option should be visible in the bottom corner in your Sketch app):
-  - ![screen shot 2015-01-16 at 11 40 36](https://cloud.githubusercontent.com/assets/978461/5774986/93dc90e8-9d74-11e4-8064-a478e55d392b.png)
-  - 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: 
-  - ![screen shot 2015-01-16 at 11 02 53](https://cloud.githubusercontent.com/assets/978461/5775004/acf10faa-9d74-11e4-893c-790da626d894.png)
-
-All done!

icon_font/template.jst.ejs

@@ -18,7 +18,6 @@
   -moz-osx-font-smoothing: grayscale;
   line-height: 1;
 }
-
 <% _.each(glyphs, function(glyph) { %>
 <%= '/* SG' %>
 <%= '# Icon font/' + glyph.fileName.split("_")[2]  %>
@@ -26,6 +25,7 @@
 <i class="iconFont iconFont-<%= glyph.fileName.split("_")[2] %> iconFont--size24"></i>
 ```
 <%= '*/' %>
+
 .iconFont-<%= glyph.fileName.split("_")[2] %>::before {
   content: '\<%= glyph.codePoint %>';
 }

src/scss/icon-font.css.scss

@@ -25,6 +25,7 @@
 <i class="iconFont iconFont-Clock iconFont--size24"></i>
 ```
 */
+
 .iconFont-Clock::before {
   content: '\E001';
 }
@@ -35,6 +36,7 @@
 <i class="iconFont iconFont-Stats iconFont--size24"></i>
 ```
 */
+
 .iconFont-Stats::before {
   content: '\E002';
 }
@@ -45,6 +47,7 @@
 <i class="iconFont iconFont-Heart--empty iconFont--size24"></i>
 ```
 */
+
 .iconFont-Heart--empty::before {
   content: '\E003';
 }
@@ -55,6 +58,7 @@
 <i class="iconFont iconFont-Heart--fill iconFont--size24"></i>
 ```
 */
+
 .iconFont-Heart--fill::before {
   content: '\E004';
 }
@@ -65,6 +69,7 @@
 <i class="iconFont iconFont-Alert iconFont--size24"></i>
 ```
 */
+
 .iconFont-Alert::before {
   content: '\E005';
 }
@@ -75,6 +80,7 @@
 <i class="iconFont iconFont-Rows iconFont--size24"></i>
 ```
 */
+
 .iconFont-Rows::before {
   content: '\E006';
 }
@@ -85,6 +91,7 @@
 <i class="iconFont iconFont-Check iconFont--size24"></i>
 ```
 */
+
 .iconFont-Check::before {
   content: '\E007';
 }
@@ -95,6 +102,7 @@
 <i class="iconFont iconFont-Dribbble iconFont--size24"></i>
 ```
 */
+
 .iconFont-Dribbble::before {
   content: '\E008';
 }
@@ -105,6 +113,7 @@
 <i class="iconFont iconFont-Twitter iconFont--size24"></i>
 ```
 */
+
 .iconFont-Twitter::before {
   content: '\E009';
 }
@@ -115,6 +124,7 @@
 <i class="iconFont iconFont-Wizard iconFont--size24"></i>
 ```
 */
+
 .iconFont-Wizard::before {
   content: '\E00A';
 }
@@ -125,6 +135,7 @@
 <i class="iconFont iconFont-Info iconFont--size24"></i>
 ```
 */
+
 .iconFont-Info::before {
   content: '\E00B';
 }
@@ -135,6 +146,7 @@
 <i class="iconFont iconFont-Fork iconFont--size24"></i>
 ```
 */
+
 .iconFont-Fork::before {
   content: '\E00C';
 }
@@ -145,6 +157,7 @@
 <i class="iconFont iconFont-Facebook iconFont--size24"></i>
 ```
 */
+
 .iconFont-Facebook::before {
   content: '\E00D';
 }
@@ -155,6 +168,7 @@
 <i class="iconFont iconFont-Folder iconFont--size24"></i>
 ```
 */
+
 .iconFont-Folder::before {
   content: '\E00E';
 }
@@ -165,6 +179,7 @@
 <i class="iconFont iconFont-Dropbox iconFont--size24"></i>
 ```
 */
+
 .iconFont-Dropbox::before {
   content: '\E00F';
 }
@@ -175,6 +190,7 @@
 <i class="iconFont iconFont-Cloud iconFont--size24"></i>
 ```
 */
+
 .iconFont-Cloud::before {
   content: '\E010';
 }
@@ -185,6 +201,7 @@
 <i class="iconFont iconFont-Step iconFont--size24"></i>
 ```
 */
+
 .iconFont-Step::before {
   content: '\E011';
 }
@@ -195,6 +212,7 @@
 <i class="iconFont iconFont-AddDocument iconFont--size24"></i>
 ```
 */
+
 .iconFont-AddDocument::before {
   content: '\E012';
 }
@@ -205,6 +223,7 @@
 <i class="iconFont iconFont-ArrowNext iconFont--size24"></i>
 ```
 */
+
 .iconFont-ArrowNext::before {
   content: '\E013';
 }
@@ -215,6 +234,7 @@
 <i class="iconFont iconFont-ArrowPrev iconFont--size24"></i>
 ```
 */
+
 .iconFont-ArrowPrev::before {
   content: '\E014';
 }
@@ -225,6 +245,7 @@
 <i class="iconFont iconFont-Close iconFont--size24"></i>
 ```
 */
+
 .iconFont-Close::before {
   content: '\E015';
 }
@@ -235,6 +256,7 @@
 <i class="iconFont iconFont-CartoFante iconFont--size24"></i>
 ```
 */
+
 .iconFont-CartoFante::before {
   content: '\E016';
 }
@@ -245,6 +267,7 @@
 <i class="iconFont iconFont-Lock iconFont--size24"></i>
 ```
 */
+
 .iconFont-Lock::before {
   content: '\E017';
 }
@@ -255,6 +278,7 @@
 <i class="iconFont iconFont-CartoDB iconFont--size24"></i>
 ```
 */
+
 .iconFont-CartoDB::before {
   content: '\E018';
 }
@@ -265,6 +289,7 @@
 <i class="iconFont iconFont-Lens iconFont--size24"></i>
 ```
 */
+
 .iconFont-Lens::before {
   content: '\E019';
 }
@@ -275,6 +300,7 @@
 <i class="iconFont iconFont-CloseLimits iconFont--size24"></i>
 ```
 */
+
 .iconFont-CloseLimits::before {
   content: '\E01A';
 }
@@ -285,6 +311,7 @@
 <i class="iconFont iconFont-DefaultUser iconFont--size24"></i>
 ```
 */
+
 .iconFont-DefaultUser::before {
   content: '\E01B';
 }
@@ -295,6 +322,7 @@
 <i class="iconFont iconFont-Cockroach iconFont--size24"></i>
 ```
 */
+
 .iconFont-Cockroach::before {
   content: '\E01C';
 }
@@ -305,6 +333,7 @@
 <i class="iconFont iconFont-Floppy iconFont--size24"></i>
 ```
 */
+
 .iconFont-Floppy::before {
   content: '\E01D';
 }
@@ -315,6 +344,7 @@
 <i class="iconFont iconFont-Trash iconFont--size24"></i>
 ```
 */
+
 .iconFont-Trash::before {
   content: '\E01E';
 }
@@ -325,6 +355,7 @@
 <i class="iconFont iconFont-Wifi iconFont--size24"></i>
 ```
 */
+
 .iconFont-Wifi::before {
   content: '\E01F';
 }
@@ -335,6 +366,7 @@
 <i class="iconFont iconFont-Unlock iconFont--size24"></i>
 ```
 */
+
 .iconFont-Unlock::before {
   content: '\E020';
 }
@@ -345,6 +377,7 @@
 <i class="iconFont iconFont-Unlock--withEllipsis iconFont--size24"></i>
 ```
 */
+
 .iconFont-Unlock--withEllipsis::before {
   content: '\E021';
 }
@@ -355,6 +388,7 @@
 <i class="iconFont iconFont-Gift iconFont--size24"></i>
 ```
 */
+
 .iconFont-Gift::before {
   content: '\E022';
 }
@@ -365,6 +399,7 @@
 <i class="iconFont iconFont-People iconFont--size24"></i>
 ```
 */
+
 .iconFont-People::before {
   content: '\E023';
 }
@@ -375,6 +410,7 @@
 <i class="iconFont iconFont-Play iconFont--size24"></i>
 ```
 */
+
 .iconFont-Play::before {
   content: '\E024';
 }
@@ -385,6 +421,7 @@
 <i class="iconFont iconFont-Add iconFont--size24"></i>
 ```
 */
+
 .iconFont-Add::before {
   content: '\E025';
 }
@@ -395,6 +432,7 @@
 <i class="iconFont iconFont-Map iconFont--size24"></i>
 ```
 */
+
 .iconFont-Map::before {
   content: '\E026';
 }
@@ -405,6 +443,7 @@
 <i class="iconFont iconFont-Anchor iconFont--size24"></i>
 ```
 */
+
 .iconFont-Anchor::before {
   content: '\E027';
 }
@@ -415,6 +454,7 @@
 <i class="iconFont iconFont-Key iconFont--size24"></i>
 ```
 */
+
 .iconFont-Key::before {
   content: '\E028';
 }
@@ -425,6 +465,7 @@
 <i class="iconFont iconFont-Calendar iconFont--size24"></i>
 ```
 */
+
 .iconFont-Calendar::before {
   content: '\E029';
 }
@@ -435,6 +476,7 @@
 <i class="iconFont iconFont-Document iconFont--size24"></i>
 ```
 */
+
 .iconFont-Document::before {
   content: '\E02A';
 }
@@ -445,6 +487,7 @@
 <i class="iconFont iconFont-Eye iconFont--size24"></i>
 ```
 */
+
 .iconFont-Eye::before {
   content: '\E02B';
 }
@@ -455,6 +498,7 @@
 <i class="iconFont iconFont-Marker iconFont--size24"></i>
 ```
 */
+
 .iconFont-Marker::before {
   content: '\E02C';
 }
@@ -465,6 +509,7 @@
 <i class="iconFont iconFont-ProgressBar iconFont--size24"></i>
 ```
 */
+
 .iconFont-ProgressBar::before {
   content: '\E02D';
 }
@@ -475,6 +520,7 @@
 <i class="iconFont iconFont-Book iconFont--size24"></i>
 ```
 */
+
 .iconFont-Book::before {
   content: '\E02E';
 }
@@ -485,6 +531,7 @@
 <i class="iconFont iconFont-Notes iconFont--size24"></i>
 ```
 */
+
 .iconFont-Notes::before {
   content: '\E02F';
 }
@@ -495,6 +542,7 @@
 <i class="iconFont iconFont-Rectangles iconFont--size24"></i>
 ```
 */
+
 .iconFont-Rectangles::before {
   content: '\E030';
 }
@@ -505,6 +553,7 @@
 <i class="iconFont iconFont-Mountain iconFont--size24"></i>
 ```
 */
+
 .iconFont-Mountain::before {
   content: '\E031';
 }
@@ -515,6 +564,7 @@
 <i class="iconFont iconFont-Points iconFont--size24"></i>
 ```
 */
+
 .iconFont-Points::before {
   content: '\E032';
 }
@@ -525,6 +575,7 @@
 <i class="iconFont iconFont-Snake iconFont--size24"></i>
 ```
 */
+
 .iconFont-Snake::before {
   content: '\E033';
 }
@@ -535,6 +586,7 @@
 <i class="iconFont iconFont-Boss iconFont--size24"></i>
 ```
 */
+
 .iconFont-Boss::before {
   content: '\E034';
 }
@@ -545,6 +597,7 @@
 <i class="iconFont iconFont-Rocket iconFont--size24"></i>
 ```
 */
+
 .iconFont-Rocket::before {
   content: '\E035';
 }
@@ -555,6 +608,7 @@
 <i class="iconFont iconFont-Barometer iconFont--size24"></i>
 ```
 */
+
 .iconFont-Barometer::before {
   content: '\E036';
 }
@@ -565,6 +619,7 @@
 <i class="iconFont iconFont-Dollar iconFont--size24"></i>
 ```
 */
+
 .iconFont-Dollar::before {
   content: '\E037';
 }
@@ -575,6 +630,7 @@
 <i class="iconFont iconFont-Email iconFont--size24"></i>
 ```
 */
+
 .iconFont-Email::before {
   content: '\E038';
 }
@@ -585,6 +641,7 @@
 <i class="iconFont iconFont-Label iconFont--size24"></i>
 ```
 */
+
 .iconFont-Label::before {
   content: '\E039';
 }
@@ -595,6 +652,7 @@
 <i class="iconFont iconFont-Outside iconFont--size24"></i>
 ```
 */
+
 .iconFont-Outside::before {
   content: '\E03A';
 }
@@ -605,6 +663,7 @@
 <i class="iconFont iconFont-Jigsaw iconFont--size24"></i>
 ```
 */
+
 .iconFont-Jigsaw::before {
   content: '\E03B';
 }
@@ -615,6 +674,7 @@
 <i class="iconFont iconFont-Tools iconFont--size24"></i>
 ```
 */
+
 .iconFont-Tools::before {
   content: '\E03C';
 }
@@ -625,6 +685,7 @@
 <i class="iconFont iconFont-Question iconFont--size24"></i>
 ```
 */
+
 .iconFont-Question::before {
   content: '\E03D';
 }
@@ -635,6 +696,7 @@
 <i class="iconFont iconFont-LayerStack iconFont--size24"></i>
 ```
 */
+
 .iconFont-LayerStack::before {
   content: '\E03E';
 }
@@ -645,6 +707,7 @@
 <i class="iconFont iconFont-Alarm iconFont--size24"></i>
 ```
 */
+
 .iconFont-Alarm::before {
   content: '\E03F';
 }
@@ -655,6 +718,7 @@
 <i class="iconFont iconFont-CloudDownArrow iconFont--size24"></i>
 ```
 */
+
 .iconFont-CloudDownArrow::before {
   content: '\E040';
 }
@@ -665,6 +729,7 @@
 <i class="iconFont iconFont-Pencil iconFont--size24"></i>
 ```
 */
+
 .iconFont-Pencil::before {
   content: '\E041';
 }
@@ -675,6 +740,7 @@
 <i class="iconFont iconFont-FountainPen iconFont--size24"></i>
 ```
 */
+
 .iconFont-FountainPen::before {
   content: '\E042';
 }
@@ -685,6 +751,7 @@
 <i class="iconFont iconFont-EmptyDoc iconFont--size24"></i>
 ```
 */
+
 .iconFont-EmptyDoc::before {
   content: '\E043';
 }
@@ -695,6 +762,7 @@
 <i class="iconFont iconFont-MergeArrow iconFont--size24"></i>
 ```
 */
+
 .iconFont-MergeArrow::before {
   content: '\E044';
 }
@@ -705,6 +773,7 @@
 <i class="iconFont iconFont-MergeColumns iconFont--size24"></i>
 ```
 */
+
 .iconFont-MergeColumns::before {
   content: '\E045';
 }
@@ -715,6 +784,7 @@
 <i class="iconFont iconFont-MergeSpatial iconFont--size24"></i>
 ```
 */
+
 .iconFont-MergeSpatial::before {
   content: '\E046';
 }
@@ -725,6 +795,7 @@
 <i class="iconFont iconFont-Globe iconFont--size24"></i>
 ```
 */
+
 .iconFont-Globe::before {
   content: '\E047';
 }
@@ -735,6 +806,7 @@
 <i class="iconFont iconFont-ChevronDown iconFont--size24"></i>
 ```
 */
+
 .iconFont-ChevronDown::before {
   content: '\E048';
 }
@@ -745,6 +817,7 @@
 <i class="iconFont iconFont-Streets iconFont--size24"></i>
 ```
 */
+
 .iconFont-Streets::before {
   content: '\E049';
 }
@@ -755,6 +828,7 @@
 <i class="iconFont iconFont-Keys iconFont--size24"></i>
 ```
 */
+
 .iconFont-Keys::before {
   content: '\E04A';
 }
@@ -765,6 +839,7 @@
 <i class="iconFont iconFont-FacebookSquare iconFont--size24"></i>
 ```
 */
+
 .iconFont-FacebookSquare::before {
   content: '\E04B';
 }
@@ -775,6 +850,7 @@
 <i class="iconFont iconFont-Fullscreen iconFont--size24"></i>
 ```
 */
+
 .iconFont-Fullscreen::before {
   content: '\E04C';
 }
@@ -785,6 +861,7 @@
 <i class="iconFont iconFont-Rarrow iconFont--size24"></i>
 ```
 */
+
 .iconFont-Rarrow::before {
   content: '\E04D';
 }
@@ -795,6 +872,7 @@
 <i class="iconFont iconFont-Share iconFont--size24"></i>
 ```
 */
+
 .iconFont-Share::before {
   content: '\E04E';
 }
@@ -805,6 +883,7 @@
 <i class="iconFont iconFont-Linkedin iconFont--size24"></i>
 ```
 */
+
 .iconFont-Linkedin::before {
   content: '\E04F';
 }
@@ -815,6 +894,7 @@
 <i class="iconFont iconFont-CalendarBlank iconFont--size24"></i>
 ```
 */
+
 .iconFont-CalendarBlank::before {
   content: '\E050';
 }
@@ -825,6 +905,7 @@
 <i class="iconFont iconFont-CreativeCommons iconFont--size24"></i>
 ```
 */
+
 .iconFont-CreativeCommons::before {
   content: '\E051';
 }
@@ -835,6 +916,7 @@
 <i class="iconFont iconFont-Bubble iconFont--size24"></i>
 ```
 */
+
 .iconFont-Bubble::before {
   content: '\E052';
 }
@@ -845,6 +927,7 @@
 <i class="iconFont iconFont-Bars iconFont--size24"></i>
 ```
 */
+
 .iconFont-Bars::before {
   content: '\E053';
 }
@@ -855,6 +938,7 @@
 <i class="iconFont iconFont-ArrowMenu iconFont--size24"></i>
 ```
 */
+
 .iconFont-ArrowMenu::before {
   content: '\E054';
 }
@@ -865,6 +949,7 @@
 <i class="iconFont iconFont-TieFighter iconFont--size24"></i>
 ```
 */
+
 .iconFont-TieFighter::before {
   content: '\E055';
 }
@@ -875,6 +960,7 @@
 <i class="iconFont iconFont-Ray iconFont--size24"></i>
 ```
 */
+
 .iconFont-Ray::before {
   content: '\E056';
 }
@@ -885,6 +971,7 @@
 <i class="iconFont iconFont-Markup iconFont--size24"></i>
 ```
 */
+
 .iconFont-Markup::before {
   content: '\E057';
 }
@@ -895,6 +982,7 @@
 <i class="iconFont iconFont-Table iconFont--size24"></i>
 ```
 */
+
 .iconFont-Table::before {
   content: '\E058';
 }
@@ -905,6 +993,7 @@
 <i class="iconFont iconFont-Airlock iconFont--size24"></i>
 ```
 */
+
 .iconFont-Airlock::before {
   content: '\E059';
 }
@@ -915,6 +1004,7 @@
 <i class="iconFont iconFont-Pin iconFont--size24"></i>
 ```
 */
+
 .iconFont-Pin::before {
   content: '\E05A';
 }
@@ -925,6 +1015,7 @@
 <i class="iconFont iconFont-Attache iconFont--size24"></i>
 ```
 */
+
 .iconFont-Attache::before {
   content: '\E05B';
 }
@@ -935,6 +1026,7 @@
 <i class="iconFont iconFont-Download iconFont--size24"></i>
 ```
 */
+
 .iconFont-Download::before {
   content: '\E05C';
 }