Merge pull request #8 from CartoDB/6-prefix

Updates selector names

Gulpfile.js

@@ -2,6 +2,14 @@ var gulp = require('gulp');
 var iconfont = require('gulp-iconfont');
 var iconfontCss = require('gulp-iconfont-css');
 
+String.prototype.toCamelCase = function() {
+  var str = this.replace('--', '');
+  return str.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
+    if (p2) return p2.toUpperCase();
+    return p1.toLowerCase();
+  });
+};
+
 gulp.task('default', function(){
   gulp.src(['./icon-font/svgs/*.svg'])
 

icon-font/template.jst.ejs

@@ -12,7 +12,7 @@
   font-style: normal;
 }
 
-.IconFont {
+.CDB-IconFont {
   display: inline-block;
   font-family: 'CartoIcon';
   font-style: normal;
@@ -28,16 +28,18 @@ All available icons in CartoDB.
 
 ```
 <% _.each(glyphs, function(glyph) { %>
+<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
   <div class="box">
-    <i class="IconFont IconFont-<%= glyph.fileName.split("_")[2] %> Size-large"></i>
+    <i class="CDB-IconFont CDB-IconFont--<%= name %> Size-large"></i>
-    <h4 class="Text Size-small"><%= glyph.fileName.split("_")[2] %></h4>
+    <h4 class="Text Size-small"><%= name %></h4>
   </div>
 <% }); %>
 ```
 */
 
 <% _.each(glyphs, function(glyph) { %>
-.IconFont-<%= glyph.fileName.split("_")[2] %>::before {
+<% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
+.CDB-IconFont--<%= name %>::before {
   content: '\<%= glyph.codePoint %>';
 }
 <% }); %>