├── .gitignore ├── README.markdown ├── font-stack.gemspec └── lib ├── font-stack.rb ├── stylesheets └── _font-stack.scss └── templates └── .gitignore /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | .project -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Font-stack 2 | A [Compass](http://compass-style.org/) plugin that provides a library of CSS font stacks configured as [Sass](http://sass-lang.com/) variables. 3 | Each font stack tries to provide fallback fonts for Windows, Mac and Linux that have roughly the same characteristics as the primary font in the stack. 4 | 5 | ## Installation 6 | 7 | Install the plugin: 8 | 9 | sudo gem install font-stack 10 | 11 | To add font-stack to an existing compass project add the following line to your compass configuration file: 12 | 13 | require 'font-stack' 14 | 15 | ## Example Usage 16 | 17 | @import "font-stack" 18 | 19 | body { font-family: $tahoma-font-stack; } 20 | h1 { font-family: $palatino-font-stack; } 21 | code { font-family: $monospace-font-stack; } 22 | .signature { font-family: $cursive-font-stack; } 23 | 24 | ## List of Font Stacks 25 | 26 | http://github.com/lloydk/font-stack/blob/master/lib/stylesheets/_font-stack.scss 27 | 28 | 29 | ## Todo 30 | 31 | - Add additional fonts to the cursive font-stack 32 | - Add mixins 33 | 34 | 35 | ## Credits 36 | 37 | Serif and sans-serif font stacks from: 38 | [www.awayback.com - A Revised Font Stack](http://www.awayback.com/revised-font-stack) 39 | 40 | 41 | Monospace font stack from: 42 | [articles.sitepoint.com - 8 Definitive Web Font Stacks](http://articles.sitepoint.com/article/eight-definitive-font-stacks) 43 | 44 | 45 | Cursive font stack from: 46 | [www.codestyle.org - Build better CSS font stacks, Cursive font stack featuring Bradley Hand ITC](http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml) 47 | -------------------------------------------------------------------------------- /font-stack.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | 3 | Gem::Specification.new do |gemspec| 4 | gemspec.name = "font-stack" 5 | gemspec.version = "0.1.2" 6 | gemspec.platform = Gem::Platform::RUBY 7 | gemspec.authors = ["Lloyd Kupchanko"] 8 | gemspec.email = "lloyd@lloydk.ca" 9 | gemspec.homepage = "http://github.com/lloydk/font-stack" 10 | gemspec.summary = %q{A library of CSS font stacks} 11 | gemspec.description = "Font-stack is a Compass plugin that provides a library of CSS font stacks." 12 | 13 | gemspec.rubygems_version = "1.3.6" 14 | 15 | gemspec.require_path = "lib" 16 | gemspec.files = ["README.markdown", "font-stack.gemspec", "lib/font-stack.rb", "lib/stylesheets/_font-stack.scss"] 17 | 18 | gemspec.add_dependency('sass', '>= 3.0.0') 19 | end 20 | 21 | -------------------------------------------------------------------------------- /lib/font-stack.rb: -------------------------------------------------------------------------------- 1 | Compass::Frameworks.register('font-stack', 2 | :stylesheets_directory => File.join(File.dirname(__FILE__), 'stylesheets'), 3 | :templates_directory => File.join(File.dirname(__FILE__), 'templates')) 4 | -------------------------------------------------------------------------------- /lib/stylesheets/_font-stack.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Serif and sans-serif font stacks from: 3 | // 4 | // A Revised Font Stack 5 | // http://www.awayback.com/revised-font-stack 6 | // 7 | // 8 | // Monospace font stack from: 9 | // 10 | // 8 Definitive Web Font Stacks 11 | // http://articles.sitepoint.com/article/eight-definitive-font-stacks 12 | // 13 | // 14 | // Cursive font stack from: 15 | // 16 | // Build better CSS font stacks - Cursive font stack featuring Bradley Hand ITC 17 | // http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml 18 | // 19 | 20 | 21 | // 22 | // Serif font-stacks 23 | // 24 | 25 | $garamond-font-stack: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif !default; 26 | 27 | $lucida-bright-font-stack: "Lucida Bright", Georgia, serif !default; 28 | 29 | $palatino-font-stack: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !default; 30 | 31 | $big-caslon-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default; 32 | 33 | $didot-font-stack: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default; 34 | 35 | $baskerville-font-stack: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif !default; 36 | 37 | $hoefler-text-font-stack: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif !default; 38 | 39 | $bodoni-mt-font-stack: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default; 40 | 41 | $goudy-old-style-font-stack: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif !default; 42 | 43 | $constantia-font-stack: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default; 44 | 45 | $cambria-font-stack: Cambria, Georgia, serif !default; 46 | 47 | $book-antiqua-font-stack: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default; 48 | 49 | 50 | // 51 | // Sans-Serif font-stacks 52 | // 53 | 54 | $optima-font-stack: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif !default; 55 | 56 | $futura-font-stack: Futura, "Trebuchet MS", Arial, sans-serif !default; 57 | 58 | $gill-sans-font-stack: "Gill Sans", "Gill Sans MT", Calibri, sans-serif !default; 59 | 60 | $trebuchet-font-stack: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif !default; 61 | 62 | $helvetica-font-stack: "Helvetica Neue", Arial, Helvetica, sans-serif !default; 63 | 64 | $verdana-font-stack: Verdana, Geneva, sans-serif !default; 65 | 66 | $lucida-grande-font-stack: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default; 67 | 68 | $geneva-font-stack: Geneva, Tahoma, Verdana, sans-serif !default; 69 | 70 | $segoe-font-stack: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default; 71 | 72 | $candara-font-stack: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !default; 73 | 74 | $calibri-font-stack: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !default; 75 | 76 | $franklin-gothic-font-stack: "Franklin Gothic Medium", Arial, sans-serif !default; 77 | 78 | $tahoma-font-stack: Tahoma, Geneva, Verdana, sans-serif !default; 79 | 80 | 81 | // 82 | // Monospace font-stacks 83 | // 84 | // Consolas is not included in this stack because it is much smaller than the other fonts listed in the stack. 85 | // 86 | 87 | $monospace-font-stack: "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default; 88 | 89 | 90 | // 91 | // Cursive font-stacks 92 | // 93 | 94 | $cursive-font-stack: "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", cursive !default; 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /lib/templates/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lloydk/font-stack/4d12f1a2d1de0d554fbabc686ed22899e0c8c5e3/lib/templates/.gitignore --------------------------------------------------------------------------------