Merge pull request #24 from doximity/fonts-tweaks

Fonts tweaks

.gitignore

@@ -16,3 +16,7 @@
 
 # Ignore .DS_store file
 .DS_Store
+
+# FontCustom stuff
+.fontcustom-manifest.json
+/previews/

CHANGELOG.md

@@ -5,3 +5,12 @@ v1.0.1
   - Scope the nav to `.header` class
   - Fix incorrect naming of a breakpoint
   - Whitespace consistency changes in _variables
+
+v1.1.0
+  - Add command: `rake vital:compile_fonts`
+  - `icons` partial is now a `.sass` file
+  - The need to manually rename `url` to `font-url` in `icons` partial is no longer required
+  - Remove the need to install the fontcustom gem manually
+  - Updated the font input and output paths
+  - Fix a typo
+  - Add `!default` to variables

Gemfile

@@ -9,11 +9,12 @@ gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
 gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
 
 # Middleman Gems
-gem 'middleman', '>= 4.0.0'
+gem 'middleman'
 gem 'middleman-livereload'
 gem 'middleman-minify-html'
 gem 'middleman-syntax'
 gem 'middleman-gh-pages'
 gem 'slim'
 gem 'sass'
 gem 'coffee-script'
+gem 'fontcustom'

Gemfile.lock

@@ -9,12 +9,6 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.4.0)
     backports (3.6.8)
-    capybara (2.5.0)
-      mime-types (>= 1.16)
-      nokogiri (>= 1.3.3)
-      rack (>= 1.0.0)
-      rack-test (>= 0.5.4)
-      xpath (~> 2.0)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
@@ -23,16 +17,21 @@ GEM
       sass (>= 3.2, < 3.5)
     concurrent-ruby (1.0.2)
     contracts (0.13.0)
+    dotenv (2.1.1)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     erubis (2.7.0)
     eventmachine (1.2.0.1)
-    execjs (2.6.0)
+    execjs (2.7.0)
     fast_blank (1.0.0)
     fastimage (2.0.0)
       addressable (~> 2)
     ffi (1.9.10)
+    fontcustom (1.0.0)
+      json
+      listen
+      thor
     haml (4.0.7)
       tilt
     hamster (3.0.0)
@@ -43,35 +42,36 @@ GEM
     i18n (0.7.0)
     json (1.8.3)
     kramdown (1.11.1)
-    listen (3.1.3)
-      rb-fsevent (~> 0.9, >= 0.9.7)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-      ruby_dep (~> 1.2)
-    middleman (4.1.7)
+    memoist (0.14.0)
+    middleman (4.1.9)
       coffee-script (~> 2.2)
       compass-import-once (= 1.0.5)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-cli (= 4.1.7)
-      middleman-core (= 4.1.7)
+      middleman-cli (= 4.1.9)
+      middleman-core (= 4.1.9)
       sass (>= 3.4.0, < 4.0)
-    middleman-cli (4.1.7)
+    middleman-cli (4.1.9)
       thor (>= 0.17.0, < 2.0)
-    middleman-core (4.1.7)
+    middleman-core (4.1.9)
       activesupport (~> 4.2)
       addressable (~> 2.3)
       backports (~> 3.6)
       bundler (~> 1.1)
-      capybara (~> 2.5.0)
       contracts (~> 0.13.0)
+      dotenv
       erubis
       execjs (~> 2.0)
       fast_blank
       fastimage (~> 2.0)
       hamster (~> 3.0)
       hashie (~> 3.4)
       i18n (~> 0.7.0)
-      listen (~> 3.0)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
       padrino-helpers (~> 0.13.0)
       parallel
       rack (>= 1.4.5, < 2.0)
@@ -91,53 +91,43 @@ GEM
     middleman-syntax (2.1.0)
       middleman-core (>= 3.2)
       rouge (~> 1.0)
-    mime-types (3.0)
-      mime-types-data (~> 3.2015)
-    mime-types-data (3.2016.0221)
-    mini_portile2 (2.0.0)
-    minitest (5.8.4)
-    nokogiri (1.6.7.2)
-      mini_portile2 (~> 2.0.0.rc2)
-    padrino-helpers (0.13.1)
+    minitest (5.9.0)
+    padrino-helpers (0.13.2)
       i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.13.1)
-      tilt (~> 1.4.1)
-    padrino-support (0.13.1)
+      padrino-support (= 0.13.2)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.2)
       activesupport (>= 3.1)
     parallel (1.8.0)
     rack (1.6.4)
     rack-livereload (0.3.16)
       rack
-    rack-test (0.6.3)
-      rack (>= 1.0)
     rake (11.1.2)
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
     rouge (1.10.1)
-    ruby_dep (1.2.0)
     sass (3.4.22)
     servolux (0.12.0)
-    slim (3.0.6)
-      temple (~> 0.7.3)
+    slim (3.0.7)
+      temple (~> 0.7.6)
       tilt (>= 1.3.3, < 2.1)
-    temple (0.7.6)
+    temple (0.7.7)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.0)
       execjs (>= 0.3.0, < 3)
-    xpath (2.0.0)
-      nokogiri (~> 1.3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   coffee-script
-  middleman (>= 4.0.0)
+  fontcustom
+  middleman
   middleman-gh-pages
   middleman-livereload
   middleman-minify-html
@@ -148,4 +138,4 @@ DEPENDENCIES
   wdm (~> 0.1.0)
 
 BUNDLED WITH
-   1.12.1
+   1.12.4

README.md

@@ -24,7 +24,7 @@ A minimally invasive CSS framework for modern web applications.
 
 Import into stylesheet or as a stylesheet link tag:
 
-`https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/stylesheets/vital.min.css`
+`https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/stylesheets/vital.min.css`
 
 ### Recommended (Source)
 
@@ -35,6 +35,9 @@ Vital works best when manipulated directly. Download or copy the `.sass` files i
 #### File Structure
 
 ```sass
+// If you are using rails
+// @import sprockets
+
 // Vendor
 @import normalize
 
@@ -85,12 +88,9 @@ To compile font icons, you must first install FontForge and the Font Custom gem.
 # Requires Ruby 1.9.2+, FontForge with Python scripting
 brew install fontforge --with-python
 brew install eot-utils
-gem install fontcustom
 ```
 
-After installation is complete, run `fontcustom compile`.
-
-You must open `_icons.scss` and change `url` to `font-url`. While changing the `fontcustom.yml` templates flag from `scss` to `scss-rails` automatically does this, it also removes the very useful `$font-icons-` variables.
+After installation is complete, run `rake vital:compile_fonts`.
 
 ## Publishing to GitHub Pages
 

fontcustom.yml

@@ -1,6 +1,6 @@
 font_name: icons
 css_selector: .{{glyph}}
-preprocessor_path: "fonts/output"
+preprocessor_path: "../fonts"
 no_hash: true
 force: true
 debug: true
@@ -9,15 +9,16 @@ quiet: false
 # depending on the type of application, you'll probably need to change the source paths accordingly
 
 input:
-  vectors: source/fonts/input
+  templates: icons/templates
+  vectors: icons/vectors
 
 output:
-  fonts: source/fonts/output
+  fonts: source/fonts
   css: source/stylesheets
   preview: previews
 
 templates:
- - scss
+ - _icons.scss
  - preview
 
 autowidth: true

icons/templates/_icons.scss

@@ -0,0 +1,25 @@
+//
+// Icon Font: <%= font_name %>
+//
+
+// https://github.com/sass/sass/issues/659#issuecomment-64819075
+@function char($character-code) {
+  @if function-exists("selector-append") {
+    @return unquote("\"\\#{$character-code}\"");
+  }
+
+  @return str-slice("\x", 1, 1) + $character-code;
+}
+
+<%= font_face(path: @font_path_alt) %>
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+<%= glyph_selectors %> {
+<%= glyph_properties %>
+}
+
+<%= glyphs %>
+<% @glyphs.each do |name, value| %>
+$font-<%= font_name.gsub(/[^\w\d_]/, '-') %>-<%= name.to_s %>: "\<%= value[:codepoint].to_s(16) %>";<% end %>