You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/06/11 14:56:37 UTC
[21/39] couchdb commit: updated refs/heads/Update-Sidebar-Ui to
2cf2eab
Updated readme.md docs to reflect Fontcustom installation instructions for 1.3.3
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/a4eb4551
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/a4eb4551
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/a4eb4551
Branch: refs/heads/Update-Sidebar-Ui
Commit: a4eb4551bc2ba0c472e42231c27eed8da2ee8acb
Parents: 072711b
Author: sean barclay <fu...@hotmail.com>
Authored: Tue Jun 10 07:27:00 2014 -0700
Committer: sean barclay <fu...@hotmail.com>
Committed: Tue Jun 10 07:27:00 2014 -0700
----------------------------------------------------------------------
src/fauxton/assets/icons/README.md | 137 +++++++++++++++++++++++++-------
1 file changed, 109 insertions(+), 28 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/a4eb4551/src/fauxton/assets/icons/README.md
----------------------------------------------------------------------
diff --git a/src/fauxton/assets/icons/README.md b/src/fauxton/assets/icons/README.md
index d83fd1b..75f1acc 100644
--- a/src/fauxton/assets/icons/README.md
+++ b/src/fauxton/assets/icons/README.md
@@ -1,39 +1,120 @@
*WARNING: this is a temporary solution for adding icons to the Icon Font. This will become a grunt task eventually.*
-###Install Fontcustom
+[](http://badge.fury.io/rb/fontcustom)
+[](https://travis-ci.org/FontCustom/fontcustom)
+[](https://codeclimate.com/github/FontCustom/fontcustom)
-http://fontcustom.com/
+## Font Custom
-###INSTALL OSX
+**Icon fonts from the command line.**
-`brew install fontforge ttfautohint
-gem install fontcustom`
+Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection of SVGs.
-###INSTALL LINUX
+[Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)<br>
+[Bugs/Support](https://github.com/FontCustom/fontcustom/issues)<br>
+[Contribute!](https://github.com/FontCustom/fontcustom/blob/master/CONTRIBUTING.md)
-`sudo apt-get install fontforge ttfautohint
-wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
-unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/
-gem install fontcustom`
-
-
-cd into the icons folder in Fauxton.
-
-Run it once. Doesn't seem like we need to set it on watch
+### Installation
-`fontcustom compile /path/to/vectors`
+Requires **Ruby 1.9.2+**, **FontForge** with Python scripting.
+```sh
+# On Mac
+brew install fontforge eot-utils
+gem install fontcustom
-You need to copy the fonts generated in the icons/fontcustom folder over to the style/assets/img folder in addons.
-Then copy and paste the CSS generated into the icons.less file in the style/assets/less folder
-
-Update the @font-face paths to have this prefix ../img
-
-###ICONS:
-- SVG FORMAT
-- NO COLORS
-- NO OPACITIES
-- ONE CONTINUAL PATH
-
-open one of the existing icons, hide it, and paste your new icon in there. Resize it to fit that space and center it vertically and horizontally.This helps prevent sTUff LiKE thIS fROm hAppENiNg
+# On Linux
+sudo apt-get install fontforge
+wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
+unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/
+gem install fontcustom
+```
+
+### Quick Start
+
+```sh
+fontcustom compile path/to/vectors # Compiles icons into `fontcustom/`
+fontcustom watch path/to/vectors # Compiles when vectors are changed/added/removed
+fontcustom compile # Uses configuration file at `fontcustom.yml`
+ # or `config/fontcustom.yml`
+fontcustom config # Generate a blank a configuration file
+fontcustom help # See all options
+```
+
+### Configuration
+
+To preserve options between compiles, create a configuration file with
+`fontcustom config`. This should live in the directory where you run
+all `fontcustom` commands. Each of the following has its own command
+line flag (`--css-selector`, etc.). Defaults values are shown.
+
+**Basics**
+
+```yml
+project_root: (pwd) # Context for all relative paths
+input: (project_root) # Where vectors and templates are located
+output: (project_root)/(font name) # Where generated files will be saved
+config: (pwd)/fontcustom.yml # Optional path to a configuration file
+debug: false # Output raw messages from fontforge
+quiet: false # Silence all messages except errors
+
+# For more control over file locations, set
+# input and output as hashes instead of strings
+input:
+ vectors: path/to/vectors # required
+ templates: path/to/templates
+
+output:
+ fonts: app/assets/fonts # required
+ css: app/assets/stylesheets
+ preview: app/views/styleguide
+```
+
+**Fonts**
+
+```yml
+font_name: fontcustom # Also sets the default output directory and
+ # the name of generated stock templates
+no_hash: false # Don't add asset-busting hashes to font files
+autowidth: false # Automatically size glyphs based on the width of
+ # their individual vectors
+```
+
+**Templates**
+
+```yml
+templates: [ css, preview ] # List of templates to generate alongside fonts
+ # Possible values: preview, css, scss, scss-rails
+css_selector: .icon-{{glyph}} # CSS selector format (`{{glyph}}` is replaced)
+preprocessor_path: "" # Font path used in CSS proprocessor templates
+ # Set to "" or false to use the bare font name
+
+# Custom templates should live in the `input`
+# or `input[:templates]` directory and be added
+# to `templates` as their basename:
+templates: [ preview, VectorIcons.less ]
+```
+
+Custom templates have access to `@options`, `@manifest`, and the following ERB helpers:
+
+* `font_name`
+* `font_face`: FontSpring's [Bulletproof @font-face syntax](http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax)
+* `glyph_selectors`: comma-separated list of all selectors
+* `glyphs`: all selectors and their codepoint assignments (`.icon-example:before { content: "\f103"; }`)
+
+### SVG Guidelines
+
+* All colors will be rendered identically — including white fills.
+* Make transparent colors solid. SVGs with transparency will be skipped.
+* For greater precision, prefer fills to strokes (especially if your icon includes curves).
+* Keep your icon within a square `viewBox`. Font Custom scales each SVG to fit
+ a 512x512 canvas with a baseline at 448.
+* Setting `autowidth` to true trims horizontal white space from each glyph. This can be much easier
+ than centering dozens of SVGs by hand.
+
+---
+
+[Licenses](https://github.com/FontCustom/fontcustom/blob/master/LICENSES.txt)
+
+Brought to you by [@endtwist](https://github.com/endtwist) and [@ezYZ](https://github.com/ezYZ)