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