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><i class="icon <%= baseClass %>" data-icon="<%= charcode %>"></i></td>
<td>data-icon="<%- charcode %>"</td>
+ <td>
+ <i class="icon <%= baseClass %> <%= classPrefix %><%= _(glyph) %>"></i>
+ class="icon <%= baseClass %> <%= classPrefix %><%= _(glyph) %>"
+ </td>
</tr>
<% } %>
</tbody>
--
GitLab