From 34622697d03c6363bb7858f5c092e23442277fd0 Mon Sep 17 00:00:00 2001
From: khawkins98 <khawkins98@gmail.com>
Date: Tue, 20 Feb 2018 11:42:08 +0000
Subject: [PATCH] Class based icons .icon-generic.icon-car for #21

---
 .gitignore                       |  1 +
 Gruntfile.js                     | 13 ++++++++++---
 templates/font-individual.css    | 22 ++++++++++++++++++++++
 fonts.css => templates/fonts.css |  9 +++++++++
 templates/template-webfont.html  |  7 ++++++-
 5 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 templates/font-individual.css
 rename fonts.css => templates/fonts.css (95%)

diff --git a/.gitignore b/.gitignore
index 135a16e..1a4496a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ _site/
 */fonts
 */static
 /partial.html
+/fonts.css
diff --git a/Gruntfile.js b/Gruntfile.js
index bd353a4..bfd002d 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -84,6 +84,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-Species',
           fontFilename: 'EBI-Species',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-species',
             classPrefix: 'icon-'
@@ -168,6 +169,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-SocialMedia',
           fontFilename: 'EBI-SocialMedia',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-socialmedia',
             classPrefix: 'icon-'
@@ -206,6 +208,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-Generic',
           fontFilename: 'EBI-Generic',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-generic',
             classPrefix: 'icon-'
@@ -294,6 +297,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-Functional',
           fontFilename: 'EBI-Functional',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-functional',
             classPrefix: 'icon-'
@@ -377,6 +381,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-Conceptual',
           fontFilename: 'EBI-Conceptual',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-conceptual',
             classPrefix: 'icon-'
@@ -405,6 +410,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-FileFormats',
           fontFilename: 'EBI-FileFormats',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-fileformats',
             classPrefix: 'icon-'
@@ -451,6 +457,7 @@ module.exports = function(grunt) {
           fontFamilyName: 'EBI-Chemistry',
           fontFilename: 'EBI-Chemistry',
           types: 'woff,woff2,ttf',
+          template: 'templates/font-individual.css',
           templateOptions: {
             baseClass: 'icon-chemistry',
             classPrefix: 'icon-'
@@ -508,7 +515,6 @@ module.exports = function(grunt) {
           options: {
             // enhanceSVG: true,
             "previewTemplate": "templates/preview.hbs",
-            // "template":        "templates/css.hbs",
             colors: {
               "white": "#ffffff"
             }
@@ -616,14 +622,15 @@ module.exports = function(grunt) {
       files: {
         debug: true,
         src: [
-          'templates/partial.html'
+          'templates/partial.html',
+          'templates/fonts.css'
         ],
         dest: '.', // Destination directory
         flatten: true,
         cwd: '.',
         options: {
           // silent: true,
-          banner: '<!-- I am a banner <% includes.files.dest %> -->',
+          // banner: '<!-- To be consumed by the EBI Style Lab -->',
           includePath: [
             'EBI-Chemistry/fonts/',
             'EBI-Conceptual/fonts/',
diff --git a/templates/font-individual.css b/templates/font-individual.css
new file mode 100644
index 0000000..f252d26
--- /dev/null
+++ b/templates/font-individual.css
@@ -0,0 +1,22 @@
+/*
+For each individual EBI-*.css font file as made by grunt-webfont:
+https://github.com/sapegin/grunt-webfont#template
+*/
+
+<% if (iconsStyles) { %>/* Icons */<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %>
+<% if (stylesheet === 'less') { %>
+.<%= classPrefix %><%= glyphs[glyphIdx] %> {
+	&:before {
+		content:"<% if (addLigatures) { %><%= glyphs[glyphIdx] %><% } else { %>\<%= codepoints[glyphIdx] %><% } %>";
+	}<% if (ie7) {%>
+	*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x<%= codepoints[glyphIdx] %>;');
+	<% } %>
+}
+<% } else { %>
+<% if (ie7) {%>.<%= classPrefix %><%= glyphs[glyphIdx] %> {
+	*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x<%= codepoints[glyphIdx] %>;');
+}
+<% } %>
+.icon.<%= baseClass %>.<%= classPrefix %><%= glyphs[glyphIdx] %>:before {
+	content:"<% if (addLigatures) { %><%= glyphs[glyphIdx] %><% } else { %>\<%= codepoints[glyphIdx] %><% } %>";
+}<% } } } %>
diff --git a/fonts.css b/templates/fonts.css
similarity index 95%
rename from fonts.css
rename to templates/fonts.css
index 23400d1..ec92ec9 100644
--- a/fonts.css
+++ b/templates/fonts.css
@@ -144,3 +144,12 @@ html .icon-chemistry:before {
 .icon-s11:before { color: #f7941e; }  /* SlideShare */
 .icon-s12:before { color: #21759b; }  /* Wordpress */
 .icon-s13:before { color: #fa9b39; }  /* RSS */
+
+
+include "EBI-Generic.css"
+include "EBI-Chemistry.css"
+include "EBI-Conceptual.css"
+include "EBI-FileFormats.css"
+include "EBI-Functional.css"
+include "EBI-Species.css"
+include "EBI-SocialMedia.css"
diff --git a/templates/template-webfont.html b/templates/template-webfont.html
index 66b54ef..6db1dab 100755
--- a/templates/template-webfont.html
+++ b/templates/template-webfont.html
@@ -6,6 +6,7 @@
       <th class="small-1"></th>
       <th class="small-6 kbd small">HTML</th>
       <th class="show-for-large kbd small">Unicode</th>
+      <th class="show-for-large kbd small">Class</th>
     </tr>
   </thead>
   <tbody>
@@ -22,9 +23,13 @@
         %>
         <% var glyphPretty = _(glyph).pretify(); %>
         <td><%= glyphPretty %></td>
-        <td><span class="<%= baseClass %> <%= classPrefix %>" data-icon="<%= charcode %>">  </span></td>
+        <td><span class="<%= baseClass %>" data-icon="<%= charcode %>">  </span></td>
         <td>&lt;i class="icon <%= baseClass %>" data-icon="<%= charcode %>"&gt;&lt;/i&gt;</td>
         <td>data-icon="<%- charcode %>"</td>
+        <td>
+          <i class="icon <%= baseClass %> <%= classPrefix %><%= _(glyph) %>"></i>
+          class="icon <%= baseClass %> <%= classPrefix %><%= _(glyph) %>"
+        </td>
       </tr>
     <% } %>
   </tbody>
-- 
GitLab