diff --git a/.fontcustom-manifest.json b/.fontcustom-manifest.json deleted file mode 100644 index 49d572d..0000000 --- a/.fontcustom-manifest.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "checksum": { - "previous": "df1258de85b01f6afcb358f6d0682f08bf24fc871fb353912217f801db0fe7f9", - "current": "df1258de85b01f6afcb358f6d0682f08bf24fc871fb353912217f801db0fe7f9" - }, - "fonts": [ - "source/fonts/output/icons.ttf", - "source/fonts/output/icons.svg", - "source/fonts/output/icons.woff", - "source/fonts/output/icons.eot" - ], - "glyphs": { - "icon-arrow-updown": { - "codepoint": 61705, - "source": "source/fonts/input/icon-arrow-updown.svg" - }, - "icon-check": { - "codepoint": 61696, - "source": "source/fonts/input/icon-check.svg" - }, - "icon-clock": { - "codepoint": 61707, - "source": "source/fonts/input/icon-clock.svg" - }, - "icon-close": { - "codepoint": 61698, - "source": "source/fonts/input/icon-close.svg" - }, - "icon-close-empty": { - "codepoint": 61699, - "source": "source/fonts/input/icon-close-empty.svg" - }, - "icon-close-outline": { - "codepoint": 61700, - "source": "source/fonts/input/icon-close-outline.svg" - }, - "icon-menu": { - "codepoint": 61706, - "source": "source/fonts/input/icon-menu.svg" - }, - "icon-vital": { - "codepoint": 61697, - "source": "source/fonts/input/icon-vital.svg" - } - }, - "options": { - "autowidth": true, - "config": "fontcustom.yml", - "css_selector": ".{{glyph}}", - "debug": true, - "font_ascent": 448, - "font_descent": 64, - "font_design_size": 16, - "font_em": 512, - "font_name": "icons", - "force": true, - "input": { - "templates": "source/fonts/input", - "vectors": "source/fonts/input" - }, - "no_hash": true, - "output": { - "css": "source/stylesheets", - "fonts": "source/fonts/output", - "preview": "previews" - }, - "preprocessor_path": "fonts/output", - "quiet": false, - "templates": [ - "scss", - "preview" - ] - }, - "templates": [ - "source/stylesheets/_icons.scss", - "previews/icons-preview.html" - ] -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index a320f7b..3b3b698 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,7 @@ # Ignore .DS_store file .DS_Store + +# FontCustom stuff +.fontcustom-manifest.json +/previews/ diff --git a/CHANGELOG.md b/CHANGELOG.md index dfb8d04..05af405 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/Gemfile b/Gemfile index 1438f14..0626b77 100644 --- a/Gemfile +++ b/Gemfile @@ -9,7 +9,7 @@ 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' @@ -17,3 +17,4 @@ gem 'middleman-gh-pages' gem 'slim' gem 'sass' gem 'coffee-script' +gem 'fontcustom' diff --git a/Gemfile.lock b/Gemfile.lock index d72cb9d..c7da6f3 100644 --- a/Gemfile.lock +++ b/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,27 +42,27 @@ 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 @@ -71,7 +70,8 @@ GEM 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,37 +91,28 @@ 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) @@ -129,15 +120,14 @@ GEM 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 diff --git a/README.md b/README.md index f6763ae..c6b6abe 100644 --- a/README.md +++ b/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 diff --git a/fontcustom.yml b/fontcustom.yml index e091d45..6d4adfa 100644 --- a/fontcustom.yml +++ b/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 diff --git a/icons/templates/_icons.scss b/icons/templates/_icons.scss new file mode 100644 index 0000000..0ee6998 --- /dev/null +++ b/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 %> diff --git a/source/fonts/input/icon-arrow-updown.svg b/icons/vectors/icon-arrow-updown.svg similarity index 100% rename from source/fonts/input/icon-arrow-updown.svg rename to icons/vectors/icon-arrow-updown.svg diff --git a/source/fonts/input/icon-check.svg b/icons/vectors/icon-check.svg similarity index 100% rename from source/fonts/input/icon-check.svg rename to icons/vectors/icon-check.svg diff --git a/source/fonts/input/icon-clock.svg b/icons/vectors/icon-clock.svg similarity index 100% rename from source/fonts/input/icon-clock.svg rename to icons/vectors/icon-clock.svg diff --git a/source/fonts/input/icon-close-empty.svg b/icons/vectors/icon-close-empty.svg similarity index 100% rename from source/fonts/input/icon-close-empty.svg rename to icons/vectors/icon-close-empty.svg diff --git a/source/fonts/input/icon-close-outline.svg b/icons/vectors/icon-close-outline.svg similarity index 100% rename from source/fonts/input/icon-close-outline.svg rename to icons/vectors/icon-close-outline.svg diff --git a/source/fonts/input/icon-close.svg b/icons/vectors/icon-close.svg similarity index 100% rename from source/fonts/input/icon-close.svg rename to icons/vectors/icon-close.svg diff --git a/source/fonts/input/icon-menu.svg b/icons/vectors/icon-menu.svg similarity index 100% rename from source/fonts/input/icon-menu.svg rename to icons/vectors/icon-menu.svg diff --git a/source/fonts/input/icon-vital.svg b/icons/vectors/icon-vital.svg similarity index 100% rename from source/fonts/input/icon-vital.svg rename to icons/vectors/icon-vital.svg diff --git a/previews/icons-preview.html b/previews/icons-preview.html deleted file mode 100644 index 6b7fec4..0000000 --- a/previews/icons-preview.html +++ /dev/null @@ -1,323 +0,0 @@ - - - - icons glyphs preview - - - - - - - - - -
-
-

icons contains 8 glyphs:

- Toggle Preview Characters -
- - -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- -
-
- PpPpPpPpPpPpPpPpPpPp -
-
- 12141618212436486072 -
-
- - -
-
- - - -
- - diff --git a/rakefile.rb b/rakefile.rb index 52a2b4c..d6300bf 100644 --- a/rakefile.rb +++ b/rakefile.rb @@ -1 +1,18 @@ require 'middleman-gh-pages' + +namespace :vital do + task :compile_fonts do + sh 'rm -rf source/stylesheets/_icons.*' + sh 'rm -rf source/fonts' + sh 'fontcustom compile' + # Works around Sass issue: https://github.com/sass/sass/issues/1395 + # based on https://github.com/sass/sass/issues/659#issuecomment-193023924 + sh 'sed -i.bkp \'s|"\(\\\\f[0-9a-z]*\)"|\1|g\' source/stylesheets/_icons.scss' + sh 'sass-convert source/stylesheets/_icons.scss source/stylesheets/_icons.sass' + # Add back the quote + sh 'sed -i.bkp \'s|\\\\\(f[0-9a-z]*\)|char("\1")|g\' source/stylesheets/_icons.sass' + sh 'sed -i.bkp \'s|url("../fonts/\([^"]*\)")|url(if($vital-sass-asset-helper, vital-font-path("\1"), "../fonts/\1"))|g\' source/stylesheets/_icons.sass' + sh 'rm -f source/stylesheets/{,**/}*.bkp' + sh 'rm -f source/stylesheets/{,**/}*.scss' + end +end diff --git a/source/fonts/output/icons.eot b/releases/v1.1.0/fonts/icons.eot similarity index 100% rename from source/fonts/output/icons.eot rename to releases/v1.1.0/fonts/icons.eot diff --git a/source/fonts/output/icons.svg b/releases/v1.1.0/fonts/icons.svg similarity index 100% rename from source/fonts/output/icons.svg rename to releases/v1.1.0/fonts/icons.svg diff --git a/source/fonts/output/icons.ttf b/releases/v1.1.0/fonts/icons.ttf similarity index 100% rename from source/fonts/output/icons.ttf rename to releases/v1.1.0/fonts/icons.ttf diff --git a/source/fonts/output/icons.woff b/releases/v1.1.0/fonts/icons.woff similarity index 100% rename from source/fonts/output/icons.woff rename to releases/v1.1.0/fonts/icons.woff diff --git a/releases/v1.1.0/stylesheets/vital.min.css b/releases/v1.1.0/stylesheets/vital.min.css new file mode 100644 index 0000000..fdea564 --- /dev/null +++ b/releases/v1.1.0/stylesheets/vital.min.css @@ -0,0 +1 @@ +html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:bold}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.eot");src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.eot?#iefix") format("embedded-opentype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.woff") format("woff"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.ttf") format("truetype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/fonts/icons.svg#icons") format("svg")}}[data-icon]:before{content:attr(data-icon)}[data-icon]:before,.icon-arrow-updown:before,.icon-check:before,.icon-clock:before,.icon-close:before,.icon-close-empty:before,.icon-close-outline:before,.icon-menu:before,.icon-vital:before{display:inline-block;font-family:"icons";font-style:normal;font-weight:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.icon-arrow-updown:before{content:"\f100"}.icon-check:before{content:"\f101"}.icon-clock:before{content:"\f102"}.icon-close:before{content:"\f103"}.icon-close-empty:before{content:"\f104"}.icon-close-outline:before{content:"\f105"}.icon-menu:before{content:"\f106"}.icon-vital:before{content:"\f107"}[class*='col-']{float:left}.col-1-3{width:33.33%}.col-2-3{width:66.66%}.col-1-2{width:50%}.col-1-4{width:25%}.col-3-4{width:75%}.col-1-5{width:20%}.col-1-8{width:12.5%}.autogrid{display:table;table-layout:fixed;width:100%}.col{width:auto;display:table-cell;vertical-align:top}.padded [class*='col-'],.padded .col{padding-left:2%;padding-right:2%}.right-padded [class*='col-'],.right-padded .col{padding-right:2%}@media screen and (max-width: 860px){[class*='col-'],.col{width:100%}.col{display:block}.right-padded [class*='col-'],.right-padded .col{padding:0}}*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}html,body{height:100%;width:100%}body{background:#FAFAFA;color:#444;font:17px/1.7 "Helvetica Neue", Helvetica, Sans-Serif}body:after{content:"";display:table;clear:both}img{height:auto;border-radius:0.15em}h1,h2,h3,h4,h5,h6,p,ul,ol,div{font-weight:300}h1,h2,h3,h4,h5,h6,p,ul,ol{margin:1em 0;margin:1rem 0}h1,h2,h3,h4,h5,h6{line-height:1.5}ul,ol{padding:0}li{list-style:none}a{color:#C9282E;text-decoration:none;outline:0}a:hover{color:#FF0008;transition:color 200ms ease-in-out}a:focus{outline:none}blockquote{margin:1em 0;padding:0 1em;border-left:0.4em solid #EEE}strong,b,.bold{font-weight:500}hr{border:none;background:#EEE;clear:both;margin:1.5em auto;height:1px}hr.half{width:50%}hr.small{width:5em}pre{white-space:pre-wrap;word-break:break-all}code{color:#333;font-family:"Monaco", Menlo, Courier;font-size:0.7em;background:#EEE;padding:0.9em 0.8em;margin:0 0.3em 0 0.2em;border-radius:0.15em;display:inline-block;word-break:break-word}p code{display:inline;padding:0.1em 0.4em 0.1em 0.3em;margin:0 0.3em 0 0}dl{display:table;width:100%}dt,dd{display:table-cell;vertical-align:top;float:left;clear:both}dt{color:#666;font-size:0.85em}dd{color:black;font-weight:400;padding-bottom:0.3em}dd:after{content:" "}dd i{margin:0 1em 0 0}.contents{background:white;min-height:24em}.row{clear:both;width:100%}.section{padding:1em;margin:0 auto;width:90%}@media screen and (min-width: 1440px){.section{width:70%}}@media screen and (min-width: 1680px){.section{width:60%}}@media screen and (max-width: 860px){.section{width:100%}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){strong,b,.bold{font-weight:500}}.ie8 strong,.ie8 b,.ie8 .bold,.ie9 strong,.ie9 b,.ie9 .bold{font-weight:500}.btn{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border-radius:0.15em;border:1px solid #666;box-shadow:none;color:#666;cursor:pointer;display:inline-block;font-size:1.05em;height:auto;line-height:1;margin:0;outline:none;padding:0.76em 1.5em;text-align:center;text-decoration:none;user-select:none;white-space:nowrap}.btn:hover{border-color:#666}.btn.solid,.btn:hover{color:#FFF;background:#666}.btn.white{color:#FFF;border-color:#FFF}.btn.white.solid,.btn.white:hover{color:#000;background:#FFF}.btn.gray-light{color:#BBB;border-color:#BBB}.btn.gray-light.solid,.btn.gray-light:hover{color:#666;background:#BBB}.btn.gray-dark{color:#333;border-color:#333}.btn.gray-dark.solid,.btn.gray-dark:hover{color:#FFF;background:#333}.btn.black{color:#000;border-color:#000}.btn.black.solid,.btn.black:hover{color:#FFF;background:#000}.btn.red{color:#C9282E;border-color:#C9282E}.btn.red.solid,.btn.red:hover{color:#FFF;background:#C9282E}.btn.orange{color:#E16E00;border-color:#E16E00}.btn.orange.solid,.btn.orange:hover{color:#FFF;background:#E16E00}.btn.yellow{color:#D5B778;border-color:#D5B778}.btn.yellow.solid,.btn.yellow:hover{color:#FFF;background:#D5B778}.btn.blue{color:#5A9FC8;border-color:#5A9FC8}.btn.blue.solid,.btn.blue:hover{color:#FFF;background:#5A9FC8}.btn.green{color:#6BAF56;border-color:#6BAF56}.btn.green.solid,.btn.green:hover{color:#FFF;background:#6BAF56}.btn.solid:hover,.btn.solid:active{opacity:0.8}.btn.no-outline{border-color:transparent}.btn.large{font-size:1.2em;padding:0.8em 1.7em;word-wrap:normal}.btn.small{padding:0.5em 0.9em;font-size:0.9em}.btn.tiny{padding:0.3em 0.8em;font-size:0.8em}.btn.round{border-radius:99em}.btn:hover{transition:all 200ms ease-in-out;opacity:0.8}.btn:disabled,.btn.disabled,.btn:disabled:hover,.btn.disabled:hover{cursor:default;background:transparent;color:#666;opacity:0.2}@-moz-document url-prefix(){.btn{padding:0.78em 1.5em}}.footer{color:#BBB;padding:3em 1em;background:#FAFAFA}.footer hr{background:rgba(0,0,0,0.1)}.footer ul{list-style:none;margin:0;padding:0}.footer li{display:inline;padding:0 0.5em}.footer a{color:#666;display:inline-block;line-height:3}.footer a:hover{color:#FF0008}@media screen and (max-width: 667px){.footer li,.footer a{display:block}.footer a{padding:1em;line-height:2}.footer .line{display:none}}.full-width-forms .btn:not([type='checkbox']):not([type='radio']),.full-width-forms a:not([type='checkbox']):not([type='radio']),.full-width-forms button:not([type='checkbox']):not([type='radio']),.full-width-forms submit:not([type='checkbox']):not([type='radio']),.full-width-forms select:not([type='checkbox']):not([type='radio']),.full-width-forms textarea:not([type='checkbox']):not([type='radio']),.full-width-forms input:not([type='checkbox']):not([type='radio']){width:100%}fieldset{border-radius:0.15em;border:1px solid #f5f5f5;margin:1em 0}fieldset legend{font-weight:400;padding:0 0.25em}input,select,textarea{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;border-radius:0.15em;border:1px solid #ddd;box-shadow:none;color:#444;display:block;font-family:"Helvetica Neue", Helvetica, Sans-Serif;font-size:inherit;outline:none;padding:0.49em 0.5em}input:hover,input:focus,select:hover,select:focus,textarea:hover,textarea:focus{border-color:#FF0008;transition:all 200ms ease-in-out}input:focus,select:focus,textarea:focus{box-shadow:0 0 10px rgba(255,0,0,0.2)}textarea{padding:0.5em}select{background-image:url('data:image/svg+xml;utf8,');background-color:#FFF;background-size:1em;background-repeat:no-repeat;background-position:99% 50%;line-height:1.1;padding:0.78em 0.5em;padding-right:1.4em}input:not(.btn):not([type='checkbox']):not([type='radio']){min-height:2.7em}input[type='file']{background-color:#FFF;width:100%;font-size:12px;padding:1.02em 0.5em}input[type='range']{padding:0.87em 0.1em}input[type='range']:focus{outline:0}input[type='search']{box-sizing:border-box !important;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}input[type='checkbox'],input[type='radio']{background-color:#FFF;border:1px solid #888;display:inline-block;height:1em;margin:0 0.3em -0.1em 0;padding:0;position:relative;top:0;width:1em;overflow:hidden}input[type='checkbox']:checked,input[type='radio']:checked{background-color:#C9282E;border-color:#C9282E}input[type='checkbox']:disabled,input[type='radio']:disabled{opacity:0.3}input[type='checkbox']{border-radius:0.15em}input[type='checkbox']:checked{border:none}input[type='checkbox']:checked:before{bottom:0;color:white;content:"\f101";font-family:"icons", helvetica, Sans-Serif;font-size:1em;left:0;line-height:1;position:absolute;right:0;text-align:center;top:0}input[type='radio']{border-radius:99em}input[type='radio']:checked:before{color:white;content:" ";height:1em;overflow:hidden;position:absolute;text-align:center;top:0;width:1em}@media screen and (-webkit-min-device-pixel-ratio: 0){input:not(.btn):not([type='checkbox']):not([type='radio']),select,textarea{min-height:2.7em}}@-moz-document url-prefix(){input[type='file']{padding:1em 0.5em}input[type='range']{border:0;margin:0.6em 0 0 0}select{padding:0.641em 0.5em}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;transition:none}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){select{padding:0.65em 0.5em;padding-right:0.5em}input[type='file']::-ms-value{background:#FFF}input[type='file']::-ms-value,input[type='file']::-ms-value{box-shadow:none;border:0}input[type='range']{border-color:transparent}}.ie8 select,.ie9 select{padding:0.65em 0.5em;padding-right:0.5em}.ie8 input[type='checkbox'],.ie8 input[type='radio'],.ie9 input[type='checkbox'],.ie9 input[type='radio']{background:transparent;border:0}.ie8 input[type='checkbox']:checked,.ie8 input[type='radio']:checked,.ie9 input[type='checkbox']:checked,.ie9 input[type='radio']:checked{background-color:transparent;border-color:transparent}.ie8 input[type='checkbox']:focus,.ie8 input[type='radio']:focus,.ie9 input[type='checkbox']:focus,.ie9 input[type='radio']:focus{border:0}.ie8 input[type='file'],.ie9 input[type='file']{height:3.8em}.ie8 input[type='range'],.ie9 input[type='range']{height:2em;line-height:0}.header{background:#FFF;height:4.25em;transform:translateZ(0)}.header .section{padding:0;position:relative}.header .logo{border:0;color:#C9282E;float:left;line-height:1;padding:0.6em 1em;max-height:4.25em;overflow:hidden}.header .logo:hover{background:none}.header .logo:hover i{color:#FF0008;transition:all 200ms ease-in-out}.header nav a{display:block;padding:1.3em}.header nav a:hover{background:#F5F5F5}.header nav ul{padding:0;margin:0}.header nav ul li{background:#FFF;display:inline;float:left;position:relative}.header nav ul li ul{left:0;top:100%}.header nav ul ul{display:none}.header nav li:hover>ul{display:block;position:absolute;width:12.5em;z-index:9000}.header nav li:hover>ul li{width:100%}.header nav ul ul li:hover>ul{left:auto;right:-12.5em;top:0}#menu-toggle,#menu-toggle-label{cursor:pointer;display:none;height:4.25em;position:absolute;right:0;user-select:none;width:4.25em}#menu-toggle{border-radius:0;border:0;box-shadow:none;margin:0;outline:none;padding:0;z-index:-1}#menu-toggle:hover{background:#F5F5F5}#menu-toggle:before{content:"\f106";font-family:"icons", helvetica, Sans-Serif;font-size:2em;padding:0.24em 0.5em;position:absolute;right:0}#menu-toggle:checked{background:#F5F5F5}#menu-toggle:checked:before{bottom:0;color:#444;content:"\f104";font-size:3em;left:0;line-height:0;padding:0.7em 0;position:absolute;right:0;top:0}@media screen and (max-width: 860px){.header .logo{padding:0.6em}.header nav a{border-top:1px solid #eee;padding:1em}.header nav ul li ul{display:block}.header nav ul li{border-right:none;display:block;float:left;width:100%;text-align:center}.header nav ul li a{background:#F5F5F5}.header nav>ul{clear:both;display:none}.header nav>input:checked+ul{display:block}.header nav li:hover ul{position:relative;width:auto}.header nav ul ul li:hover>ul{left:auto;right:auto;top:auto}#menu-toggle,#menu-toggle-label{display:block}}.hero{color:#FFF;background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6{margin:0;line-height:1.3}.hero h1{font-size:3em}.hero h2{font-size:1.8em}.hero h3{font-size:1.6em}.hero h4{font-size:1.4em}.hero h5{font-size:1.2em}.hero h6{font-size:1em}.hero .section{padding:5em 1.5em}@media screen and (max-width: 667px){.hero .section{padding:4em 1em}.hero h1{font-size:2.4em}}.load{-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loading;-webkit-animation-timing-function:linear;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:loading;-moz-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:loading;animation-timing-function:linear;border-radius:99em;border:3px solid #DDD;border-left-color:#666;display:inline-block;height:2em;width:2em}.load.smallest{width:9px;height:9px;border-width:1px}.load.small{width:16px;height:16px;border-width:2px}.load.large{width:48px;height:48px;border-width:4px}@keyframes loading{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes loading{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes loading{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}.ie8 .load,.ie9 .load{border-color:transparent;line-height:1;font-size:32px;width:32px;height:32px;display:inline}.ie8 .load:after,.ie9 .load:after{content:"\f102";font-family:"icons", helvetica, Sans-Serif}.ie8 .load.smallest,.ie9 .load.smallest{font-size:9px;width:9px;height:9px;border-width:0.1em}.ie8 .load.small,.ie9 .load.small{font-size:16px;width:16px;height:16px;border-width:0.1em}.ie8 .load.large,.ie9 .load.large{font-size:48px;width:48px;height:48px}.notice{background:#FFE0A3;text-align:center}.notice .section{position:relative;padding-right:3em}.notice i.icon-close-outline{cursor:pointer;font-size:2em;line-height:1.91;position:absolute;right:0.5em;top:0}.notice i.icon-close-outline:hover:before{content:"\f103"}.pagination{margin:1em 0;padding:1em;text-align:center}.pagination a,.pagination .current,.pagination .next_page,.pagination .previous_page{background:transparent;border-radius:99em;border:1px solid #BBB;color:#666;display:inline-block;font-size:1em;margin:0.5%;min-height:2.6em;padding:0.4em 1em}.pagination a.current,.pagination a:hover,.pagination .current.current,.pagination .current:hover,.pagination .next_page.current,.pagination .next_page:hover,.pagination .previous_page.current,.pagination .previous_page:hover{background:#BBB;color:#FFF;transition:all 200ms ease-in-out}.pagination .next_page,.pagination .previous_page{min-width:9em}@media screen and (max-width: 667px){.pagination a,.pagination .current,.pagination .gap{margin:0 1em 1em 0}.pagination .next_page,.pagination .previous_page{width:9em;display:block;margin:0 auto 1em auto}}table{width:100%;margin:1em 0;border-spacing:0;border-collapse:separate}th{font-weight:400;color:#000;text-align:left}td{border-top:1px solid #EEE}td,th{padding:0.5em;text-align:left;vertical-align:top}tfoot tr{border-bottom:0}@media screen and (max-width: 667px){tr,td,th{display:block}tr{padding:1em 0;border-top:1px solid #EEE}tr:first-child{border-top:0}thead{display:none}td{clear:both;border:none}td,th{padding:0.25em 0}}.tabs-block{background:transparent;border-bottom:1px solid #EEE}.tabs-block .col{text-align:center;position:relative}.tabs-block .col:last-child{border-right:0}.tabs-block .col:hover,.tabs-block .col.here{background:#EEE;transition:all 200ms ease-in-out}.tabs-block a{width:100%;display:inline-block;padding:0.5em;color:#444}.tabs{display:inline-block;list-style:none;margin:1em 0;padding:0;width:100%}.tabs a{border-radius:0.15em;border:1px solid transparent;padding:0.65em 1em;color:#444}.tabs li{display:inline-block;padding:0 0.5%}.tabs li:hover a,.tabs li.here a{transition:all 200ms ease-in-out;background:#EEE}.tabs ul{padding:0}.tabs.round li a{border-radius:99em}@media screen and (max-width: 860px){.tabs-block a,.tabs a{margin:0.5% 0;padding:0.65em 0.5em;display:block;text-align:center}.tabs-block{border-bottom:0}.tabs li{display:block;padding:0}}.highlight code{width:100%}.hll{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k,.o{font-weight:bold}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:bold}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:bold;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.gd .x{color:#000000;background-color:#ffaaaa}.ge{font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.gi .x{color:#000000;background-color:#aaffaa}.go{color:#888888}.gp{color:#555555}.gs{font-weight:bold}.gu{color:#800080;font-weight:bold}.gt{color:#aa0000}.kc,.kd,.kn,.kp,.kr{font-weight:bold}.kt{color:#445588;font-weight:bold}.m{color:#009999}.s{color:#dd1144}.n{color:#333333}.na{color:teal}.nb{color:#0086b3}.nc{color:#445588;font-weight:bold}.no{color:teal}.ni{color:purple}.ne,.nf{color:#990000;font-weight:bold}.nn{color:#555555}.nt{color:navy}.nv{color:teal}.ow{font-weight:bold}.w{color:#bbbbbb}.mf,.mh,.mi,.mo{color:#009999}.sb,.sc,.sd,.s2,.se,.sh,.si,.sx{color:#dd1144}.sr{color:#009926}.s1{color:#dd1144}.ss{color:#990073}.bp{color:#999999}.vc,.vg,.vi{color:teal}.il{color:#009999}.gc{color:#999;background-color:#EAF2F5}ul.list,ol.list{margin-left:1em;padding-left:1em}ul.list li{list-style:disc}ol.list li{list-style:decimal}.align-left{text-align:left}.align-right{text-align:right}.break-word{word-break:break-all}.no-wrap{white-space:nowrap}.thin{font-weight:100}.uppercase{text-transform:uppercase}.light-text *,.light-text a{color:white}.light-text a{text-decoration:underline}.auto{margin:0 auto}.block{display:block}.center{text-align:center}.clear{clear:both}.float-left{float:left}.float-right{float:right}.inline{display:inline}.inline-block{display:inline-block}.checkbox,.radio{display:block;line-height:2.2}.box{border-radius:0.15em;border:1px solid #ddd;margin:1em 0;padding:1em}.disabled{color:#BBB}.radius{border-radius:0.15em}.round{border-radius:99em}.opacity-half{opacity:0.5}.gray{color:#666}.gray-medium{color:#999}.gray-light{color:#BBB}.gray-lighter{color:#EEE}.gray-lightest{color:#F9F9F9}.bg{background:#F9F9F9}.bg-black{background:#252525;background:linear-gradient(to bottom right, #222, #333)}.bg-gray{background:#9A9A9A;background:linear-gradient(to bottom right, #888, #CCC)}.bg-blue{background:#1C6AB9;background:linear-gradient(to bottom right, #25639A, #1F9CEA)}.bg-red{background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.bg-green{background:#52BB5C;background:linear-gradient(to bottom right, #73B558, #45D093)}.hide{display:none}.show{display:block}.full{width:100%}.space:after{content:" "}.i2x{font-size:2em}.i3x{font-size:3em}.i4x{font-size:4em}.i5x{font-size:5em}.same-width{text-align:center;width:2em;display:inline-block}@media screen and (max-width: 667px){.space,.hide-on-mobile{display:none}.responsive{width:100%}}@media screen and (max-width: 334px){.responsive-portrait{width:100%}} diff --git a/source/components.html.slim b/source/components.html.slim index f80d0b4..ccab6be 100644 --- a/source/components.html.slim +++ b/source/components.html.slim @@ -47,6 +47,9 @@ title: Vital | Components p Your typical application SASS should look like this: = code('sass') do | + // If you are using rails + // @import sprockets + // Vendor @import normalize @@ -777,36 +780,19 @@ title: Vital | Components # Requires Ruby 1.9.2+, FontForge with Python scripting brew install fontforge --with-python brew install eot-utils - gem install fontcustom p ' Place your - code .svg - ' files into your input path, such as: - code> source/fonts/input. - ' See - code> fontcustom.yml - | to customize or set your own paths. + code> .svg + ' files into your input path. Vital's input path is: + code> icons p ' After installation is complete, run - code fontcustom compile - p - ' You will need to open - code _icons.scss - ' and change - code url - ' to - code font-url - ' . While changing the - code fontcustom.yml - ' templates flag from - code scss - ' to - code scss-rails - ' automatically does this, it also removes the very useful - code $font-icons- - | variables. + code> `rake vital:compile_fonts` + ' See + code> fontcustom.yml + | to customize or set your own paths. p.gray i Please note that some icons (such as those with social names) are blocked by ad-blockers. @@ -818,6 +804,6 @@ title: Vital | Components h1 Syntax Highlighting p - =' link_to 'Rouge', 'https://github.com/jneen/rouge', target: '_blank' + => link_to 'Rouge', 'https://github.com/jneen/rouge', target: '_blank' ' syntax highlighting support is included with code _syntax.sass diff --git a/source/fonts/icons.eot b/source/fonts/icons.eot new file mode 100644 index 0000000..63e1611 Binary files /dev/null and b/source/fonts/icons.eot differ diff --git a/source/fonts/icons.svg b/source/fonts/icons.svg new file mode 100644 index 0000000..86dbe82 --- /dev/null +++ b/source/fonts/icons.svg @@ -0,0 +1,50 @@ + + + + + +Created by FontForge 20160407 at Fri Jun 17 12:02:19 2016 + By Body Taing +Copyright (c) 2016, Body Taing + + + + + + + + + + + + + + + + diff --git a/source/fonts/icons.ttf b/source/fonts/icons.ttf new file mode 100644 index 0000000..acb168a Binary files /dev/null and b/source/fonts/icons.ttf differ diff --git a/source/fonts/icons.woff b/source/fonts/icons.woff new file mode 100644 index 0000000..d85383f Binary files /dev/null and b/source/fonts/icons.woff differ diff --git a/source/get-started.html.slim b/source/get-started.html.slim index 7b75b83..e0721e1 100644 --- a/source/get-started.html.slim +++ b/source/get-started.html.slim @@ -13,7 +13,7 @@ title: Vital | Get Started h2 Quickest (Compiled) p Import into stylesheet or as a stylesheet link tag: p - code https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/stylesheets/vital.min.css + code https://cdn.rawgit.com/doximity/vital/master/releases/v1.1.0/stylesheets/vital.min.css hr h2 Recommended (Source) p diff --git a/source/stylesheets/_icons.sass b/source/stylesheets/_icons.sass new file mode 100644 index 0000000..be3f066 --- /dev/null +++ b/source/stylesheets/_icons.sass @@ -0,0 +1,80 @@ +// +// Icon Font: icons +// + +// 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 + font-family: "icons" + src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot"), "../fonts/icons.eot")) + src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot?#iefix"), "../fonts/icons.eot?#iefix")) format("embedded-opentype"), url(if($vital-sass-asset-helper, vital-font-path("icons.woff"), "../fonts/icons.woff")) format("woff"), url(if($vital-sass-asset-helper, vital-font-path("icons.ttf"), "../fonts/icons.ttf")) format("truetype"), url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg") + font-weight: normal + font-style: normal + +@media screen and (-webkit-min-device-pixel-ratio: 0) + @font-face + font-family: "icons" + src: url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg") + +[data-icon]:before + content: attr(data-icon) + +[data-icon]:before, +.icon-arrow-updown:before, +.icon-check:before, +.icon-clock:before, +.icon-close:before, +.icon-close-empty:before, +.icon-close-outline:before, +.icon-menu:before, +.icon-vital:before + display: inline-block + font-family: "icons" + font-style: normal + font-weight: normal + font-variant: normal + line-height: 1 + text-decoration: inherit + text-rendering: optimizeLegibility + text-transform: none + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + font-smoothing: antialiased + +.icon-arrow-updown:before + content: char("f100") + +.icon-check:before + content: char("f101") + +.icon-clock:before + content: char("f102") + +.icon-close:before + content: char("f103") + +.icon-close-empty:before + content: char("f104") + +.icon-close-outline:before + content: char("f105") + +.icon-menu:before + content: char("f106") + +.icon-vital:before + content: char("f107") + +$font-icons-icon-arrow-updown: char("f100") +$font-icons-icon-check: char("f101") +$font-icons-icon-clock: char("f102") +$font-icons-icon-close: char("f103") +$font-icons-icon-close-empty: char("f104") +$font-icons-icon-close-outline: char("f105") +$font-icons-icon-menu: char("f106") +$font-icons-icon-vital: char("f107") diff --git a/source/stylesheets/_icons.scss b/source/stylesheets/_icons.scss deleted file mode 100644 index 3c95ed7..0000000 --- a/source/stylesheets/_icons.scss +++ /dev/null @@ -1,64 +0,0 @@ -// -// Icon Font: icons -// - -@font-face { - font-family: "icons"; - src: font-url("fonts/output/icons.eot"); - src: font-url("fonts/output/icons.eot?#iefix") format("embedded-opentype"), - font-url("fonts/output/icons.woff") format("woff"), - font-url("fonts/output/icons.ttf") format("truetype"), - font-url("fonts/output/icons.svg#icons") format("svg"); - font-weight: normal; - font-style: normal; -} - -@media screen and (-webkit-min-device-pixel-ratio:0) { - @font-face { - font-family: "icons"; - src: font-url("fonts/output/icons.svg#icons") format("svg"); - } -} - -[data-icon]:before { content: attr(data-icon); } - -[data-icon]:before, -.icon-arrow-updown:before, -.icon-check:before, -.icon-clock:before, -.icon-close:before, -.icon-close-empty:before, -.icon-close-outline:before, -.icon-menu:before, -.icon-vital:before { - display: inline-block; - font-family: "icons"; - font-style: normal; - font-weight: normal; - font-variant: normal; - line-height: 1; - text-decoration: inherit; - text-rendering: optimizeLegibility; - text-transform: none; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; -} - -.icon-arrow-updown:before { content: "\f109"; } -.icon-check:before { content: "\f100"; } -.icon-clock:before { content: "\f10b"; } -.icon-close:before { content: "\f102"; } -.icon-close-empty:before { content: "\f103"; } -.icon-close-outline:before { content: "\f104"; } -.icon-menu:before { content: "\f10a"; } -.icon-vital:before { content: "\f101"; } - -$font-icons-icon-arrow-updown: "\f109"; -$font-icons-icon-check: "\f100"; -$font-icons-icon-clock: "\f10b"; -$font-icons-icon-close: "\f102"; -$font-icons-icon-close-empty: "\f103"; -$font-icons-icon-close-outline: "\f104"; -$font-icons-icon-menu: "\f10a"; -$font-icons-icon-vital: "\f101"; diff --git a/source/stylesheets/_sprockets.sass b/source/stylesheets/_sprockets.sass new file mode 100644 index 0000000..3b0834a --- /dev/null +++ b/source/stylesheets/_sprockets.sass @@ -0,0 +1,7 @@ +// This is here in order to properly reference font files when using sprockets +// and was based on some code found on Twitter Bootstrap and FontAwesome projects + +@function vital-font-path($path) + @return font-path($path) + +$vital-sass-asset-helper: true diff --git a/source/stylesheets/_variables.sass b/source/stylesheets/_variables.sass index b1d2e7b..168331a 100644 --- a/source/stylesheets/_variables.sass +++ b/source/stylesheets/_variables.sass @@ -2,6 +2,8 @@ // Fonts +$vital-sass-asset-helper: false !default + $font: "Helvetica Neue", Helvetica, Sans-Serif !default $code: "Monaco", Menlo, Courier !default $icons: "icons", helvetica, Sans-Serif !default