Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

DRY'd the mixin, better docs on font stacks supported, cleanup of the…

… function code and started the web view previews
  • Loading branch information...
commit 4142f2e6a55ea748cda1acf774193ab97920de7d 1 parent 4682599
@adamstac authored
View
1  Gemfile
@@ -11,5 +11,6 @@ group :serve do
gem 'serve', '~> 1.5.1'
gem 'haml', '~> 3.1.3'
gem 'css_parser', '~> 1.2.5'
+ gem 'grid-coordinates'
gem 'maruku', '~> 0.6.0'
end
View
5 Gemfile.lock
@@ -12,6 +12,8 @@ GEM
css_parser (1.2.5)
addressable
fssm (0.2.7)
+ grid-coordinates (1.2.0)
+ compass (>= 0.11.5)
haml (3.1.3)
heroku (2.7.0)
launchy (>= 0.3.2)
@@ -32,7 +34,7 @@ GEM
rest-client (1.6.7)
mime-types (>= 1.16)
rubyzip (0.9.4)
- sass (3.1.7)
+ sass (3.1.10)
serve (1.5.1)
activesupport (~> 3.0)
i18n
@@ -51,6 +53,7 @@ PLATFORMS
DEPENDENCIES
compass (~> 0.11.5)
css_parser (~> 1.2.5)
+ grid-coordinates
haml (~> 3.1.3)
heroku
maruku (~> 0.6.0)
View
116 README.mdown
@@ -1,6 +1,6 @@
# Font Stacks
-Font Stacks is a Sass/Compass extension that provides Sass functions to easily use common web-friendly font-stacks.
+Font Stacks is a Sass and Compass font-family library of common web-friendly font stacks.
## Installation
@@ -48,8 +48,6 @@ The usage is simple. Here are two examples:
As you can see, you simply pass the name of the font-stack to the `font-family()` function or its shorthand counterpart `ff()`, or to the `font-family()` mixin or its shorthand counterpart `ff()`. Simple.
-Review [Font Stacks function code](https://github.com/adamstac/font-stacks/blob/master/stylesheets/font-stacks/_function.scss) for a full list of supported font-stacks. Feel free to fork and contribute.
-
### Defaults
If you'd like to set the default font-family, or override the "Monospace" font-family, I have provided two vars you can set.
@@ -57,6 +55,118 @@ If you'd like to set the default font-family, or override the "Monospace" font-f
$default-font-family
$default-monospace
+## Font Stacks
+
+### Serif
+
+**Baskerville**, *(88.60% on Mac, 49.10% on Windows)*
+
+ Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif
+
+**Big Caslon**, *(85.10% on Mac)*
+
+ "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif
+
+**Bodoni MT**, *(47.89% on Windows)*
+
+ "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
+
+**Book Antiqua**, *(86.09% on Mac)*
+
+ "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif
+
+**Cambria**, *(54.51% on Windows)*
+
+ Cambria, Georgia, serif
+
+**Constantia**, *(53.81% on Windows)*
+
+ Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif
+
+**Didot**, *(87.72% on Mac)*
+
+ Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
+
+**Garamond**, *(23.84% on Mac, 86.24% on Windows)*
+
+ Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif
+
+**Goudy Old Style**, *(51.30% on Windows)*
+
+ "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif
+
+**Hoefler Text**, *(88.70% on Mac, 1.16% on Windows)*
+
+ "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif
+
+**Lucida Bright**, *(64.90% on Mac, 33.84% on Windows, huge x-height)*
+
+ "Lucida Bright", Georgia, serif
+
+**Palatino**, *(79.71% on Mac, 98.04% on Windows)*
+
+ Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
+
+### Sans-serif
+
+**Calibri**, *(54.76% on Windows)*
+
+ Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
+
+**Candara**, *(54.31% on Windows)*
+
+ Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif
+
+**Franklin Gothic Medium**, *(97.89% on Windows)*
+
+ "Franklin Gothic Medium", Arial, sans-serif
+
+**Futura**, *(91.01% on Mac)*
+
+ Futura, "Trebuchet MS", Arial, sans-serif
+
+**Geneva**, *(98.84% on Mac)*
+
+ Geneva, Tahoma, Verdana, sans-serif
+
+**Gill Sans**, *(91.52% on Mac, 51.74% on Windows)*
+
+ "Gill Sans", "Gill Sans MT", Calibri, sans-serif
+
+**Helvetica Neue ~ Helvetica**, *(94.74% on Mac)*
+
+ "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif
+
+**Lucida Grande**, *(99.13% on Mac, 98.25% on Windows)*
+
+ "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
+
+**Optima**, *(90.14% on Mac)*
+
+ Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif
+
+**Segoe**, *(45.04% on Windows)*
+
+ Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif
+
+**Tahoma**, *(99.30% on Windows)*
+
+ Tahoma, Geneva, Verdana, sans-serif
+
+**Trebuchet MS**, *(94.20% on Mac, 99% on Windows)*
+
+ "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
+
+**Verdana**, (96.81% on Mac, 99.40% on Windows)
+
+ Verdana, Geneva, sans-serif
+
+### Monospace
+
+The default Monospace font stack.
+
+ "DejaVu Sans Mono", Menlo, Monaco, Consolas, Courier, monospace
+
## Credits and special thanks
Special thanks to [Amrinder Sandhu](http://amrindersandhu.com/) for his research on web font stacks and article [Revised Font Stacks](http://www.awayback.com/revised-font-stack/). The refactor from [this version](https://github.com/adamstac/bedrock/blob/master/stylesheets/bedrock/typography/text/_font-stacks.scss) as well as the additional support of the various web fonts is largely based on, and because of, his work.
View
4 font-stacks.gemspec
@@ -7,8 +7,8 @@ Gem::Specification.new do |s|
# Gem author details
s.name = "font-stacks"
- s.description = %q{Sass/Compass extension for Sassy access to common web-friendly font-stacks}
- s.summary = %q{Sass/Compass extension that provides Sass functions to easily use common web-friendly font-stacks}
+ s.description = %q{A Sass and Compass font-family library of common web-friendly font stacks}
+ s.summary = %q{Font Stacks is a Sass and Compass font-family library of common web-friendly font stacks.}
s.authors = ["Adam Stacoviak"]
s.email = ["adam@stacoviak.com"]
s.homepage = "https://github.com/adamstac/font-stacks"
View
36 stylesheets/font-stacks/_function.scss
@@ -4,62 +4,50 @@
// Serif
//
- // BASKERVILLE ( 88.60% on Mac, 49.10% on Windows)
@if $family == "Baskerville" {
@return Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
- // BIG CASLON (85.10% on Mac)
@else if $family == "Big Caslon" {
@return "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
-
- // BODONI (47.89% on Windows)
+
@else if $family == "Bodoni MT" {
@return "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}
- // BOOK ANTIQUA (86.09% on Mac)
@else if $family == "Book Antiqua" {
@return "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
-
- // CAMBRIA (54.51% on Windows)
+
@else if $family == "Cambria" {
@return Cambria, Georgia, serif;
}
- // CONSTANTIA (53.81% on Windows)
@else if $family == "Constantia" {
@return Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
- // DIDOT (87.72% on Mac)
@else if $family == "Didot" {
@return Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}
- // GARAMOND (23.84% on Mac, 86.24% on Windows)
@else if $family == "Garamond" {
@return Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}
- // GOUDY OLD STYLE (51.30% on Windows)
@else if $family == "Goudy Old Style" {
@return "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
- // HOEFLER TEXT (88.70% on Mac, 1.16% on Windows)
@else if $family == "Hoefler Text" {
@return "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}
- // LUCIDA BRIGHT (64.90% on Mac, 33.84% on Windows) - huge x-height
@else if $family == "Lucida Bright" {
@return "Lucida Bright", Georgia, serif;
}
- // PALATINO (79.71% on Mac, 98.04% on Windows)
@else if $family == "Palatino" {
@return Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}
@@ -68,71 +56,59 @@
// Sans-serif
//
- // CALIBRI (54.76% on Windows)
@else if $family == "Calibri" {
@return Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
- // CANDARA (54.31% on Windows)
@else if $family == "Candara" {
@return Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
- // FRANKLIN GOTHIC MEDIUM (97.89% on Windows)
@else if $family == "Franklin Gothic Medium" {
@return "Franklin Gothic Medium", Arial, sans-serif;
}
- // FUTURA (91.01% on Mac)
@else if $family == "Futura" {
@return Futura, "Trebuchet MS", Arial, sans-serif;
}
- // GENEVA (98.84% on Mac)
@else if $family == "Geneva" {
@return Geneva, Tahoma, Verdana, sans-serif;
}
-
- // GILL SANS (91.52% on Mac, 51.74% on Windows)
+
@else if $family == "Gill Sans" {
@return "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
- // HELVETICA NEUE (94.74% on Mac)
@else if $family == "Helvetica Neue" {
@return "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
}
- // Alias to "helvetica-neue"
+
+ // Alias to "Helvetica Neue"
@else if $family == "Helvetica" {
@return font-family("Helvetica Neue");
}
-
- // LUCIDA GRANDE (99.13% on Mac, 98.25% on Windows)
+
@else if $family == "Lucida Grande" {
@return "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
- // OPTIMA (90.14% on Mac)
@else if $family == "Optima" {
@return Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
- // SEGOE (45.04% on Windows)
@else if $family == "Segoe" {
@return Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
- // TAHOMA (99.30% on Windows)
@else if $family == "Tahoma" {
@return Tahoma, Geneva, Verdana, sans-serif;
}
- // TREBUCHET (94.20% on Mac, 99% on Windows)
@else if $family == "Trebuchet MS" {
@return "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
- // VERDANA (96.81% on Mac, 99.40% on Windows)
@else if $family == "Verdana" {
@return Verdana, Geneva, sans-serif;
}
View
163 stylesheets/font-stacks/_mixin.scss
@@ -1,168 +1,7 @@
@mixin font-family($family) {
-
- //
- // Serif
- //
-
- // BASKERVILLE ( 88.60% on Mac, 49.10% on Windows)
- @if $family == "Baskerville" {
- font-family: font-family($family);
- }
-
- // BIG CASLON (85.10% on Mac)
- @else if $family == "Big Caslon" {
- font-family: font-family($family);
- }
-
- // BODONI (47.89% on Windows)
- @else if $family == "Bodoni MT" {
- font-family: font-family($family);
- }
-
- // BOOK ANTIQUA (86.09% on Mac)
- @else if $family == "Book Antiqua" {
- font-family: font-family($family);
- }
-
- // CAMBRIA (54.51% on Windows)
- @else if $family == "Cambria" {
- font-family: font-family($family);
- }
-
- // CONSTANTIA (53.81% on Windows)
- @else if $family == "Constantia" {
- font-family: font-family($family);
- }
-
- // DIDOT (87.72% on Mac)
- @else if $family == "Didot" {
- font-family: font-family($family);
- }
-
- // GARAMOND (23.84% on Mac, 86.24% on Windows)
- @else if $family == "Garamond" {
- font-family: font-family($family);
- }
-
- // GOUDY OLD STYLE (51.30% on Windows)
- @else if $family == "Goudy Old Style" {
- font-family: font-family($family);
- }
-
- // HOEFLER TEXT (88.70% on Mac, 1.16% on Windows)
- @else if $family == "Hoefler Text" {
- font-family: font-family($family);
- }
-
- // LUCIDA BRIGHT (64.90% on Mac, 33.84% on Windows) - huge x-height
- @else if $family == "Lucida Bright" {
- font-family: font-family($family);
- }
-
- // PALATINO (79.71% on Mac, 98.04% on Windows)
- @else if $family == "Palatino" {
- font-family: font-family($family);
- }
-
- //
- // Sans-serif
- //
-
- // CALIBRI (54.76% on Windows)
- @else if $family == "Calibri" {
- font-family: font-family($family);
- }
-
- // CANDARA (54.31% on Windows)
- @else if $family == "Candara" {
- font-family: font-family($family);
- }
-
- // FRANKLIN GOTHIC MEDIUM (97.89% on Windows)
- @else if $family == "Franklin Gothic Medium" {
- font-family: font-family($family);
- }
-
- // FUTURA (91.01% on Mac)
- @else if $family == "Futura" {
- font-family: font-family($family);
- }
-
- // GENEVA (98.84% on Mac)
- @else if $family == "Geneva" {
- font-family: font-family($family);
- }
-
- // GILL SANS (91.52% on Mac, 51.74% on Windows)
- @else if $family == "Gill Sans" {
- font-family: font-family($family);
- }
-
- // HELVETICA NEUE (94.74% on Mac)
- @else if $family == "Helvetica Neue" {
- font-family: font-family($family);
- }
-
- // Alias to "Helvetica Neue"
- @else if $family == "Helvetica" {
- font-family: font-family("Helvetica Neue");
- }
-
- // LUCIDA GRANDE (99.13% on Mac, 98.25% on Windows)
- @else if $family == "Lucida Grande" {
- font-family: font-family($family);
- }
-
- // OPTIMA (90.14% on Mac)
- @else if $family == "Optima" {
- font-family: font-family($family);
- }
-
- // SEGOE (45.04% on Windows)
- @else if $family == "Segoe" {
- font-family: font-family($family);
- }
-
- // TAHOMA (99.30% on Windows)
- @else if $family == "Tahoma" {
- font-family: font-family($family);
- }
-
- // TREBUCHET (94.20% on Mac, 99% on Windows)
- @else if $family == "Trebuchet MS" {
- font-family: font-family($family);
- }
-
- // VERDANA (96.81% on Mac, 99.40% on Windows)
- @else if $family == "Verdana" {
- font-family: font-family($family);
- }
-
- //
- // Monospace
- //
-
- @else if $family == "Monospace" {
- font-family: font-family($family);
- }
-
- // Alias to "Monospace"
- @else if $family == "monospace" {
- font-family: font-family("Monospace");
- }
-
- //
- // Else, catch all, fail safe
- //
-
- @else {
- @warn "The font-family you specified wasn't found. The $default-font-family has been returned instead.";
- font-family: font-family($default-font-family);
- }
-
+ font-family: font-family($family);
}
-// Shorthand counterpart
@mixin ff($family) {
@include font-family($family);
}
View
2  test/config.rb
@@ -1,5 +1,7 @@
# Compass Configuration
+require 'grid-coordinates'
+
# HTTP paths
http_path = '/'
http_stylesheets_path = '/stylesheets'
View
142 test/public/stylesheets/stylesheet.css
@@ -1,3 +1,145 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+body {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+ vertical-align: middle;
+}
+
+q, blockquote {
+ quotes: none;
+}
+q:before, q:after, blockquote:before, blockquote:after {
+ content: "";
+ content: none;
+}
+
+a img {
+ border: none;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+ display: block;
+}
+
+.grid-container {
+ zoom: 1;
+ margin-right: auto;
+ margin-left: auto;
+ width: 960px;
+}
+.grid-container:before, .grid-container:after {
+ content: ".";
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ font-size: 0;
+ line-height: 0;
+ width: 0;
+ height: 0;
+}
+.grid-container:after {
+ clear: both;
+}
+
+.grid-full {
+ width: 940px;
+ zoom: 1;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ display: inline;
+ float: left;
+ position: relative;
+ margin-right: 10px;
+ margin-left: 10px;
+}
+.grid-full:before, .grid-full:after {
+ content: ".";
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ font-size: 0;
+ line-height: 0;
+ width: 0;
+ height: 0;
+}
+.grid-full:after {
+ clear: both;
+}
+
+h1 {
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+ font-size: 28px;
+ font-weight: bold;
+ letter-spacing: -1px;
+ text-transform: uppercase;
+ margin: 75px 0;
+}
+
+.family {
+ border-bottom: 3px dashed #aaaaaa;
+ font-size: 26px;
+ margin-bottom: 70px;
+ padding-bottom: 70px;
+}
+
+.super-size {
+ font-size: 110px;
+ margin-top: 30px;
+}
+
+.base, .normal, .bold, .italic {
+ line-height: 1.5;
+ font-size: 30px;
+ margin-bottom: 0;
+}
+
+.normal {
+ font-weight: normal;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.italic {
+ font-style: italic;
+}
+
.garamond {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
View
44 test/sass/stylesheet.sass
@@ -1,7 +1,51 @@
// $default-monospace: Menlo, "DejaVu Sans Mono", Monaco, Consolas, Courier, monospace
+@import compass/reset
+
// Compass extension
@import "../../stylesheets/font-stacks"
+@import "grid-coordinates"
+
+.grid-container
+ +grid-container
+
+.grid-full
+ +grid-full
+
+h1
+ +font-family("Gill Sans")
+ font-size: 28px
+ font-weight: bold
+ letter-spacing: -1px
+ text-transform: uppercase
+ margin: 75px 0
+
+.family
+ border-bottom: 3px dashed #aaa
+ font-size: 26px
+ margin-bottom: 70px
+ padding-bottom: 70px
+
+.super-size
+ font-size: 110px
+ margin-top: 30px
+
+.base
+ line-height: 1.5
+ font-size: 30px
+ margin-bottom: 0
+
+.normal
+ @extend .base
+ font-weight: normal
+
+.bold
+ @extend .base
+ font-weight: bold
+
+.italic
+ @extend .base
+ font-style: italic
//
// Serif
View
13 test/views/_stack.haml
@@ -0,0 +1,13 @@
+.normal
+ %p= lazy_dog
+.bold
+ %p= lazy_dog
+.italic
+ %p= lazy_dog
+.super-size
+ %p The East-Side
+ %p Aluminum
+ %p Franks & Beans
+ %p Weatherman
+ %p Designers
+ %p Heavenly Glory
View
52 test/views/index.haml
@@ -1 +1,51 @@
-- @title = "Compass Extension"
+- @title = "Font Stacks - A Sass/Compass font stack library."
+
+%h1 Font Stacks
+
+.family.garamond
+ %p.font Garamond
+ = render :partial => "stack"
+
+.family.lucida-bright
+ %p.font Lucida Bright
+ = render :partial => "stack"
+
+.family.palatino
+ %p.font Palatino
+ = render :partial => "stack"
+
+.family.big-caslon
+ %p.font Big Caslon
+ = render :partial => "stack"
+
+.family.didot
+ %p.font Didot
+ = render :partial => "stack"
+
+.family.baskerville
+ %p.font Baskerville
+ = render :partial => "stack"
+
+.family.hoefler-text
+ %p.font Hoefler Text
+ = render :partial => "stack"
+
+.family.bodoni-mt
+ %p.font Bodoni MT
+ = render :partial => "stack"
+
+.family.goudy-old-style
+ %p.font Goudy Old Style
+ = render :partial => "stack"
+
+.family.constantia
+ %p.font Constantia
+ = render :partial => "stack"
+
+.family.cambria
+ %p.font Cambria
+ = render :partial => "stack"
+
+.family.book-antiqua
+ %p.font Book Antiqua
+ = render :partial => "stack"
View
4 test/views/layouts/application.haml
@@ -4,4 +4,6 @@
%title= @title
%link{:href => "/stylesheets/stylesheet.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
%body
- = yield
+ .grid-container
+ .grid-full
+ = yield
View
7 test/views/view_helpers.rb
@@ -0,0 +1,7 @@
+module ViewHelpers
+
+ def lazy_dog
+ "The quick brown fox jumps over the lazy dog."
+ end
+
+end
Please sign in to comment.
Something went wrong with that request. Please try again.