Commit 76ce7a35 authored by Jubke's avatar Jubke
Browse files

icon font creation

- use FontCustom to create icon fonts
- includes setup and instructions to automate icon font creation for
future icons
- pull or revert based on whether or not this is wanted
parent 23cdbb05
{
"checksum": {
"previous": "099d15f200dc601faae95ccb0ffb2c5a6eaf2a22448d716bbd666ce12ce82c25",
"current": "099d15f200dc601faae95ccb0ffb2c5a6eaf2a22448d716bbd666ce12ce82c25"
},
"fonts": [
"app/assets/fonts/icons.ttf",
"app/assets/fonts/icons.svg",
"app/assets/fonts/icons.woff",
"app/assets/fonts/icons.eot"
],
"glyphs": {
"reaction": {
"codepoint": 61696,
"source": "app/assets/images/svg_icons/reaction.svg"
},
"sample": {
"codepoint": 61697,
"source": "app/assets/images/svg_icons/sample.svg"
},
"wellplate": {
"codepoint": 61698,
"source": "app/assets/images/svg_icons/wellplate.svg"
}
},
"options": {
"autowidth": false,
"config": "fontcustom.yml",
"css_selector": ".icon-{{glyph}}",
"debug": false,
"font_ascent": 448,
"font_descent": 64,
"font_design_size": 16,
"font_em": 512,
"font_name": "icons",
"force": true,
"input": {
"templates": "app/assets/images/svg_icons",
"vectors": "app/assets/images/svg_icons"
},
"no_hash": true,
"output": {
"css": "app/assets/stylesheets",
"fonts": "app/assets/fonts",
"preview": "app/assets/fonts"
},
"preprocessor_path": "",
"quiet": false,
"templates": [
"scss"
]
},
"templates": [
"app/assets/stylesheets/_icons.scss"
]
}
\ No newline at end of file
......@@ -53,6 +53,9 @@ group :development, :test do
# Use thin as dev webserver
gem 'thin'
# generate icon fonts
gem 'fontcustom'
end
group :test do
......
......@@ -61,6 +61,8 @@ GEM
builder (3.2.2)
byebug (5.0.0)
columnize (= 0.9.0)
celluloid (0.16.0)
timers (~> 4.0.0)
coercible (1.0.0)
descendants_tracker (~> 0.0.1)
columnize (0.9.0)
......@@ -86,6 +88,11 @@ GEM
factory_girl_rails (4.5.0)
factory_girl (~> 4.5.0)
railties (>= 3.0.0)
ffi (1.9.10)
fontcustom (1.3.8)
json (~> 1.4)
listen (>= 1.0, < 3.0)
thor (~> 0.14)
globalid (0.3.5)
activesupport (>= 4.1.0)
grape (0.12.0)
......@@ -115,6 +122,7 @@ GEM
hashie (3.4.2)
hashie-forbidden_attributes (0.1.1)
hashie (>= 3.0)
hitimes (1.2.2)
html2haml (2.0.0)
erubis (~> 2.7.0)
haml (~> 4.0.0)
......@@ -133,6 +141,10 @@ GEM
kaminari (0.16.3)
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
listen (2.10.1)
celluloid (~> 0.16.0)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
loofah (2.0.2)
nokogiri (>= 1.5.9)
mail (2.6.3)
......@@ -178,6 +190,9 @@ GEM
rake (>= 0.8.7)
thor (>= 0.18.1, < 2.0)
rake (10.4.2)
rb-fsevent (0.9.5)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
rdoc (4.2.0)
json (~> 1.4)
responders (2.1.0)
......@@ -226,6 +241,8 @@ GEM
thor (0.19.1)
thread_safe (0.3.5)
tilt (1.4.1)
timers (4.0.1)
hitimes
tzinfo (1.2.2)
thread_safe (~> 0.1)
uglifier (2.7.1)
......@@ -256,6 +273,7 @@ DEPENDENCIES
database_cleaner
devise
factory_girl_rails
fontcustom
grape
grape-active_model_serializers
grape-kaminari
......@@ -275,4 +293,4 @@ DEPENDENCIES
web-console (~> 2.0)
BUNDLED WITH
1.10.4
1.10.6
......@@ -37,3 +37,15 @@ Currently 3 users are seeded with respective email `test@ninjaconcept.com`, `hat
* Get serialized sample by id
`/api/v1/samples/:id`
# Icon Font
* put new icons as SVG files (e.g. '<ICON_NAME>.svg') in `app/assets/images/svg_icons`
* run `rake icons:compile`
Icons are now available as css classes: '.icon-<ICON_NAME'
## FontCustom Dependencies
* `brew install fontforge --with-python`
* `brew install eot-utils`
# =============================================================================
# Font Custom Configuration
# This file should live in the directory where you run `fontcustom compile`.
# For more info, visit <https://github.com/FontCustom/fontcustom>.
# =============================================================================
# -----------------------------------------------------------------------------
# Project Info
# -----------------------------------------------------------------------------
# The font's name. Also determines the file names of generated templates.
font_name: icons
# Format of CSS selectors. {{glyph}} is substituted for the glyph name.
css_selector: .icon-{{glyph}}
# Generate fonts without asset-busting hashes.
no_hash: true
# Encode WOFF fonts into the generated CSS.
#base64: true
# Forces compilation, even if inputs have not changed
force: true
# Display (possibly useful) debugging messages.
#debug: true
# Hide status messages.
#quiet: true
# -----------------------------------------------------------------------------
# Input / Output Locations
# You can save generated fonts, CSS, and other files to different locations
# here. Font Custom can also read input vectors and templates from different
# places.
#
# NOTE:
# - Be sure to preserve the whitespace in these YAML hashes.
# - INPUT[:vectors] and OUTPUT[:fonts] are required. Everything else is
# optional.
# - Specify output locations for custom templates by including their file
# names as the key.
# -----------------------------------------------------------------------------
input:
vectors: app/assets/images/svg_icons
# templates: my/templates
output:
fonts: app/assets/fonts
css: app/assets/stylesheets
# preview: app/views/styleguide
# my-custom-template.yml: path/to/template/output
# -----------------------------------------------------------------------------
# Templates
# A YAML array of templates and files to generate alongside fonts. Custom
# templates should be saved in the INPUT[:templates] directory and referenced
# by their base file name.
#
# For Rails and Compass templates, set `preprocessor_path` as the relative
# path from OUTPUT[:css] to OUTPUT[:fonts]. By default, these are the same
# directory.
#
# Included in Font Custom: preview, css, scss, scss-rails
# Default: css, preview
# -----------------------------------------------------------------------------
templates:
- scss
#- my-custom-template.yml
preprocessor_path: ''
# -----------------------------------------------------------------------------
# Font Settings (defaults shown)
# -----------------------------------------------------------------------------
# Size (in pica points) for which your font is designed.
#font_design_size: 16
# The em size. Setting this will scale the entire font to the given size.
#font_em: 512
# The font's ascent and descent. Used to calculate the baseline.
#font_ascent: 448
#font_descent: 64
# Horizontally fit glyphs to their individual vector widths.
#autowidth: false
namespace :icons do
task :compile do
puts "Compiling icons..."
puts %x(fontcustom compile)
end
end
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment