webfontspecimen 0.2.0 → 0.3.0.rc1

data/stylesheets/wfs/_960.scss

@@ -1,12 +1,12 @@
 /*
 	960 Grid System ~ Core CSS.
 	Learn more ~ http://960.gs/
-  
+
 	Licensed under GPL and MIT.
-	*/
+*/
 
 /* `Containers
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12,
 .container_16 {
@@ -16,7 +16,7 @@
 }
 
 /* `Grid >> Global
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .grid_1,
 .grid_2,
@@ -61,7 +61,7 @@
 }
 
 /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .alpha {
 	margin-left: 0;
@@ -72,7 +72,7 @@
 }
 
 /* `Grid >> 12 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12 .grid_1 {
 	width: 60px;
@@ -107,7 +107,7 @@
 }
 
 /* `Grid >> 16 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_16 .grid_1 {
 	width: 40px;
@@ -158,7 +158,7 @@
 }
 
 /* `Prefix Extra Space >> Global
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12 .prefix_3,
 .container_16 .prefix_4 {
@@ -176,7 +176,7 @@
 }
 
 /* `Prefix Extra Space >> 12 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12 .prefix_1 {
 	padding-left: 80px;
@@ -211,7 +211,7 @@
 }
 
 /* `Prefix Extra Space >> 16 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_16 .prefix_1 {
 	padding-left: 60px;
@@ -262,7 +262,7 @@
 }
 
 /* `Suffix Extra Space >> Global
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12 .suffix_3,
 .container_16 .suffix_4 {
@@ -280,7 +280,7 @@
 }
 
 /* `Suffix Extra Space >> 12 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_12 .suffix_1 {
 	padding-right: 80px;
@@ -315,7 +315,7 @@
 }
 
 /* `Suffix Extra Space >> 16 Columns
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 .container_16 .suffix_1 {
 	padding-right: 60px;
@@ -366,7 +366,7 @@
 }
 
 /* `Clear Floated Elements
- ----------------------------------------------------------------------------------------------------*/
+----------------------------------------------------------------------------------------------------*/
 
 /* http://sonspring.com/journal/clearing-floats */
 

data/stylesheets/wfs/_base.scss

@@ -1,50 +1,18 @@
 /* Fonts ----------------------------------------------- */
 $font-type: serif !default;
+$font-face: Georgia !default;
+$font-stack: $font-face, $font-type !default;
 
-$normal-font-face: Georgia !default;
-$italic-font-face: $normal-font-face !default;
-$bold-font-face: $normal-font-face !default;
-
-$normal-font-stack: $normal-font-face, $font-type !default;
-$italic-font-stack: $italic-font-face, $font-type !default;
-$bold-font-stack: $bold-font-face, $font-type !default;
-
-@mixin normal {
-  font-family: $normal-font-stack; 
+@mixin font-stack {
+  font-family: $font-stack; 
   font-style: normal; 
 }
 
-@mixin italic {
-  @if $italic-font-face != $normal-font-face {
-    font-family: $italic-font-stack; 
-  } @else {
-    font-style: italic;
-  }
-}
-
-@mixin bold {
-  @if $bold-font-face != $normal-font-face {
-    font-family: $bold-font-stack; 
-  } @else {
-    font-weight: bold;
-  } 
-}
-
-/* Font Specimen ----------------------------------------------- */
-body, .typeface1 {
-  @include normal; }
-
-.typeface2 {
-  font-family: Verdana; }
-
-em {
-  @include italic; }
-
-strong {
-  @include bold; }
+body {
+  @include font-stack; }
 
 /* General
- ----------------------------------------------- */
+----------------------------------------------- */
 body {
 	margin: 0 0 72px;
 	font-size: 13px;
@@ -57,78 +25,37 @@ body {
 	padding-bottom: 36px;
 	}
 #header {
-	padding-top: 24px;
+	padding-top: 12px;
 	border-top: 16px #ddddd2 solid;
 	}
-.dim {
-	background-color: #ddddd2;
-	color: #333;
-	}
-.dim .container_16 { background-color: #fcfcf3; }
-.dim, .dim .upp { text-align: center; }
-
-.dark {
-	background-color: #111112;
-	color: #fff;
-	}
-.dark .container_16 { background-color: #000; }
-
 #footer {
 	padding-bottom: 36px;
 	border-top: 24px #ddddd2 solid;
-	font: 13px/21px Verdana;
+	font: 13px/21px Verdana, sans-serif;
 	color: #888882;
 	}
 #footer span { margin: 0; }
 
 
-/* Type
- ----------------------------------------------- */
+/* Headings & labels
+----------------------------------------------- */
 h1 {
-	font-size: 96px;
-	line-height: 96px;
+	font: 36px/48px Verdana;
 	font-weight: normal;
-	border-bottom: 2px #eeeee2 solid;
 	}
 h2 {
 	font: normal 13px/18px Verdana, sans-serif;
 	color: #c00;
 	}
-h3 {
-	font-size: 24px;
-	line-height: 24px;
-	font-weight: normal;
-	}
-h4 {
-	font-weight: normal;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	}
-h5 + p { margin-top: 0; }
-h2, p, ul, ol { margin: 18px 0; }
-ul {
-	list-style-type: square;
-	margin-left: 28px;
-	}
-ol {
-	list-style-type: decimal;
-	margin-left: 28px;
-	}
-.dropcap:first-letter {
-	float: left;
-	margin: 0 10px 4px 0;
-	font-size: 48px;
-	line-height: 48px;
-	font-variant: normal;
-	}
-.dropcap:first-line {
-	font-variant: small-caps;
-	letter-spacing: 1px;
+h2, p { margin: 18px 0; }
+
+span {
+	color: #999;
 	}
 
 
 /* Links
- -----------------------------------------*/
+-----------------------------------------*/
 a {
 	text-decoration: none;
 	padding: 3px 0;
@@ -147,59 +74,11 @@ a:active {
 	}
 
 
-/* Body size comparison
- -----------------------------------------*/
-p.char-compare {
-	font-size: 72px;
-	line-height: 96px;
-	color: #ddd;
-	text-decoration: underline;
-	}
-.char-compare .typeface1 {
-	margin-right: 0;
-	color: #333;
-	border-bottom: 1px #999 solid;
-	border-top: 1px #999 solid;
-	}
-.char-compare .typeface2 {
-	color: #333;
-	background-color: #eeeee2;
-	border-bottom: 1px #999 solid;
-	border-top: 1px #999 solid;
-	}
-
-
-/* Leading
- -----------------------------------------*/
-.l-less { line-height: 16px; }
-.l-mid { line-height: 18px; }
-.l-more { line-height: 21px; }
-.l-most { line-height: 24px; }
-
-
-/* Measure
- -----------------------------------------*/
-.m-widest { width: 900px; }
-.m-wide { width: 700px; }
-.m-mid { width: 450px; }
-.m-narrow { width: 300px; }
-
-.small {
-	font-size: 11px;
-	line-height: 14px;
-	}
-.small .m-mid { width: 350px; }
-.small .m-narrow { width: 250px; }
-.small .m-mini {
-	font-size: 9px;
-	line-height: 13px;
-	width: 200px;
-	}
-
+/* Text sample, reusable sizes
+-----------------------------------------*/
+.s { line-height: 1.4em; }
+.ls { letter-spacing: 0.05em; }
 
-/* Size
- -----------------------------------------*/
-.s { line-height: 1.5em; }
 .s9 { font-size: 9px; }
 .s10 { font-size: 10px; }
 .s11 { font-size: 11px; }
@@ -212,43 +91,112 @@ p.char-compare {
 .s24 { font-size: 24px; }
 .s30 { font-size: 30px; }
 .s36 { font-size: 36px; }
-.s42 { font-size: 42px; line-height: 60px; }
-.s96 { font-size: 96px; line-height: 96px; }
-.s300 { font-size: 300px; line-height: 300px;}
+.s42 { font-size: 42px; }
+.s50 { font-size: 50px; }
+.s56 { font-size: 56px; }
+.s60 { font-size: 60px; }
+.s96 { font-size: 96px; }
 
-.container_16 span {
-	margin-right: 6px;
-	color: #999;
-	}
 .s span {
 	display: block;
 	float: left;
 	width: 80px;
 	margin-left: -96px;
 	margin-right: 0;
+	font-size: 13px;
+	font-family: Verdana, sans-serif;
 	text-align: right;
+	}
+
+
+/* Characters
+-----------------------------------------*/
+.charset .s {
+	margin: 10px 0;
+	line-height: 1.1em;
+	}
+
+
+/* Body size comparison
+-----------------------------------------*/
+.bodysize {
+	overflow: hidden;
+	background: #fff image-url("grid.gif") -5px 9px repeat;
+	}
+.bodysize table {
+	width: 100%;
+	font-size: 90px;
+	line-height: 140px;
+	}
+.bodysize table th {
+	padding: 0 0 6px 12px;
+	border-bottom: 1px #eeeee2 solid;
+	font: normal 13px Verdana, sans-serif;
+	text-align: left;
+	color: #333;
+	background-color: #fff;
+	}
+.bodysize a { padding-bottom: 1px; }
+.bodysize a:link,
+.bodysize a:visited {
 	color: #999;
+	background-color: transparent;
+	}
+.bodysize a:hover {
+	color: #c00;
+	background-color: transparent;
+	}
+.bodysize a:active {
+	color: #fff;
+	background-color: #000;
 	}
 
+.bodysize table td {
+	xbackground-color: #e2e2d9;
+	xborder: 3px #fff solid;
+	padding: 6px;
+	}
+.bodysize table td span {
+	margin: 0;
+	padding: 0;
+	color: #333;
+	background-color: transparent;
+	}
+.bodysize table td span:hover {
+	background-color: rgba(255,255,200,0.2);
+	border-top: 1px #c00 solid;
+	border-bottom: 1px #c00 solid;
+	}
+.bodysize .typeface2 { font-family: Arial, Helvetica, sans-serif; }
+.bodysize .typeface3 { font-family: "Times New Roman", Times, serif; }
+.bodysize .typeface4 { font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; }
 
-/* Uppercase
- -----------------------------------------*/
-.upp {
-	text-align: right;
-	text-transform: uppercase;
-	letter-spacing: 1px;
+
+/* Grayscale
+-----------------------------------------*/
+.grayscale {
+	clear: both;
+	background: #fff image-url("black.gif") top right repeat-y;
 	}
-.upp span {
+.grayscale p span {
 	display: block;
-	float: right;
 	width: 80px;
+	font-size: 13px;
+	font-family: Verdana, sans-serif;
+	color: #999;
+	}
+.white p span {
+	float: left;
+	margin-left: -96px;
+	margin-right: 0;
+	text-align: right;
+	}
+.black p span {
+	float: right;
+	margin-left: 0;
 	margin-right: -96px;
 	text-align: left;
 	}
-
-
-/* Grayscale
- -----------------------------------------*/
 .c000 { color: #000; }
 .c333 {	color: #333; }
 .c666 {	color: #666; }
@@ -257,61 +205,32 @@ p.char-compare {
 .cFFF {	color: #fff; }
 
 
-/* Color
- -----------------------------------------*/
-.c {
-	padding: 0 12px;
-	border: 1px #eee solid;
-	color: #000;
-	}
-.c h2 { color: #000; }
-.c000-fff {
-	color: #000;
-	background-color: #fff;
-	}
-.cfff-000 {
-	color: #fff;
-	background-color: #000;
-	border-color: #000;
-	}
-.cfff-000 h2 { color: #c00; }
-.cf00-fff {
-	color: #f00;
-	background-color: #fff;
-	}
-.cf00-000 {
-	color: #f00;
-	background-color: #000;
-	border-color: #000;
-	}
-.cf00-000 h2 { color: #eee; }
-.c0ff-fff {
-	color: #0ff;
-	background-color: #fff;
-	}
-.c0ff-000 {
-	color: #0ff;
-	background-color: #000;
-	border-color: #000;
-	}
-.c0ff-000 h2 { color: #eee; }
-.cfff-f00 {
-	color: #fff;
-	background-color: #f00;
-	border-color: #f00;
-	}
-.c000-f00 {
-	color: #000;
-	background-color: #f00;
-	border-color: #f00;
+/* Size
+-----------------------------------------*/
+.ulc p span.text {
+	white-space: nowrap;
+	overflow: hidden;
+	display: static;
+	float: none;
+	width: auto;
+	margin: 0;
+	font-size: inherit;
+	font-family: inherit;
+	text-align: left;
+	color: #333;
 	}
-.cfff-0ff {
-	color: #fff;
-	background-color: #0ff;
-	border-color: #0ff;
+.ulc .upp p span.text {
+	text-align: right;
+	text-transform: uppercase;
+	letter-spacing: 1px;
 	}
-.c000-0ff {
-	color: #000;
-	background-color: #0ff;
-	border-color: #0ff;
+.upp span {
+	display: block;
+	float: right;
+	width: 80px;
+	margin-right: -96px;
+	text-align: left;
 	}
+p.upp {
+	text-align: left;
+	}

data/templates/project/_specimen.scss

@@ -12,13 +12,13 @@
 // 
 // 1. Add your typeface(s) to your specified "fonts" folder.
 //    - This is specified as "fonts_dir" in your "config.rb" file.
+//    - Or link to fonts from google, typkit, or other services
 // 
 // 2. Rename this file:
 //    - For single specimens simply remove the "_" prefix
 //    - For multiple specimens duplicate and rename for each font
 // 
-// 3. Include each face of your font below
-//    Or comment out any faces that you aren't using.
+// 3. Include your font below
 // 
 // 4. Make adjustments to "specimen.html"
 //    - For multiple specimens duplicate and rename for each font
@@ -33,49 +33,18 @@
 $font-type: serif;
 
 /* Standard ----------------------------------*/
-$normal-font-face: "Name Your Font";
+$font-face: "Name Your Font";
 @include font-face(
-  $normal-font-face, 
+  $font-face, 
   font-files(
     "type_file.woff", woff, 
     "type_file.ttf", truetype,
     "type_file.svg#Type-Name", svg
   ), 
-  "type_file.eot", 
-  postscriptname
+  "type_file.eot"
 );
 
-$normal-font-stack: $normal-font-face, $font-type;
-
-/* Italic ----------------------------------*/
-$italic-font-face: "Name Your Italic Font";
-@include font-face(
-  $italic-font-face, 
-  font-files(
-    "type_file.woff", woff, 
-    "type_file.ttf", truetype,
-    "type_file.svg#Type-Name", svg
-  ), 
-  "type_file.eot", 
-  postscriptname
-);
-
-$italic-font-stack: $italic-font-face, $font-type;
-
-/* Bold ----------------------------------*/
-$bold-font-face: "Name Your Bold Font";
-@include font-face(
-  "Your bold typeface", 
-  font-files(
-    "type_file.woff", woff, 
-    "type_file.ttf", truetype,
-    "type_file.svg#Type-Name", svg
-  ), 
-  "type_file.eot", 
-  postscriptname
-);
-
-$bold-font-stack: $bold-font-face, $font-type;
+$font-stack: $font-face, $font-type;
 
 // Import WebFontSpecimen -------------------------------------------*/
 // Leave this below your font settings

data/templates/project/manifest.rb

@@ -1,4 +1,6 @@
 stylesheet '_specimen.scss', :media => "screen, projection"
+image 'black.gif'
+image 'grid.gif'
 html 'specimen.html'
 
 description "A Compass port of Nice Web Type's Web Font Specimen tool - http://webfontspecimen.com/"

data/templates/project/specimen.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
+  <meta charset="utf-8" />
 
   <!-- 
   
@@ -9,13 +10,13 @@
   
   1. Add your typeface(s) to your specified "fonts" folder.
      - This is specified as "fonts_dir" in your "config.rb" file.
+     - Or link to fonts from google, typkit, or other services
 
   2. Rename the "_specimen" sass file:
      - For single specimens simply remove the "_" prefix
      - For multiple specimens duplicate and rename for each font
 
-  3. Include each face of your font in the proided "font-face" mixins
-     Or comment out any faces that you aren't using.
+  3. Include your font in the provided specimen.scss "font-face" mixin
 
   4. Make adjustments to this file
      - For multiple specimens duplicate and rename for each font
@@ -27,9 +28,12 @@
   ==============================================================================
   
   -->
+  
+  <!-- http://www.phpied.com/conditional-comments-block-downloads/ -->
+  <!--[if IE]><![endif]-->
 
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="chrome=1">
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+  <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"><![endif]-->
 
   <title>{FONT NAME} - Web Font Specimen</title>
   <link rel="stylesheet" href="css/specimen.css" type="text/css" media="screen" charset="utf-8">
@@ -47,215 +51,124 @@
 </div>
 
 
-<!-- HEADINGS, LISTS, EMPHASIS -->
+<!-- TEXT SAMPLE -->
 <div class="grid_8">
-	<h2>Headings, lists, and emphasis</h2>
-	<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<h3>Lorem ipsum <em>dolor</em> sit <strong>amet</strong></h3>
-	<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<ul>
-	  	<li>Duis aute irure dolor in reprehenderit</li>
-	  	<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
-	  	<li>Excepteur sint occaecat cupidatat non proident</li>
-	  	<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-	</ul>
-	<ol>
-	  	<li>Duis aute irure dolor in reprehenderit</li>
-	  	<li>in <em>voluptate velit esse cillum</em> dolore eu fugiat nulla pariatur</li>
-	  	<li>Excepteur sint occaecat cupidatat non proident</li>
-	  	<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
-	</ol>
-	<h4>Consectetur <em>adipisicing</em> elit <strong>voluptate</strong></h4>
-	<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="dropcap">The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
-	<p><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</em></p>
-	<h5>Sed do <em>eiusmod</em> tempor <strong>incididunt</strong></h5>
-	<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
+	<h2>Text sample <span>&#8211; CSS font-size (px) with 1.4em line-height</span></h2>
+	<p class="s s18"><span>18</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221;&hellip;</p>
+	<p class="s s16"><span>16</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive&hellip;</p>
+	<p class="s s14"><span>14</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of&hellip;</p>
+	<p class="s s13"><span>13</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let&hellip;</p>
+	<p class="s s12"><span>12</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original&hellip;</p>
+	<p class="s s11"><span>11</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may&hellip;</p>
+	<p class="s s10"><span>10</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may, he can&#8217;t afford to discard knowledge of what&hellip;</p>
+	<p class="s s9"><span>9</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may, he can&#8217;t afford to discard knowledge of what has gone before or what is now going&hellip;</p>
 </div>
 
 
-<!-- BODY SIZE COMPARISON -->
-<div class="grid_8">
-	<h2>Body size comparison <span>&middot; {FONT NAME} and Verdana</span></h2>
-	<p class="char-compare">
-		<span class="typeface1">a</span><span class="typeface2">a</span>
-		<span class="typeface1">b</span><span class="typeface2">b</span>
-		<span class="typeface1">c</span><span class="typeface2">c</span><br />
-		<span class="typeface1">e</span><span class="typeface2">e</span>
-		<span class="typeface1">f</span><span class="typeface2">f</span>
-		<span class="typeface1">g</span><span class="typeface2">g</span><br />
-		<span class="typeface1">n</span><span class="typeface2">n</span>
-		<span class="typeface1">o</span><span class="typeface2">o</span>
-		<span class="typeface1">t</span><span class="typeface2">t</span><br />
-		<span class="typeface1">A</span><span class="typeface2">A</span>
-		<span class="typeface1">O</span><span class="typeface2">O</span>
-		<span class="typeface1">R</span><span class="typeface2">R</span>
-	</p>
-</div>
-
-
-<!-- LEADING -->
-<div class="grid_8">
-	<h2>Leading <span>&#8211; CSS font-size/line-height (px)</span></h2>
-	<p class="l-less"><span>13/16</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="l-mid"><span>13/18</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="l-more"><span>13/21</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="l-most"><span>13/24</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-</div><div class="clearfix"></div>
-</div><!-- end .container-16 -->
-
-
-<!-- ALPHABET -->
-<div class="dim">
-<div class="container_16 clearfix">
-<div class="grid_16 center">
-	<h2>&middot; 42px &middot;</h2>
-	<p class="s42">The best kind of originality is that which comes after a sound apprenticeship, that which shall</p>
-	<p class="s42"><em>The best kind of originality is that which comes after a sound apprenticeship, that which shall</em></p>
-	<p class="s42 upp ls">abcdefghijklmnopqrstuvwxyz</p>
-	<p class="s42">abcdefghijklmnopqrstuvwxyz</p>
-	<p class="s42 ls">$ &amp; &sect; 1234567890-.,:;&#8212;&#8220;&#8221;?!</p>
+<!-- CHARACTER SET -->
+<div class="grid_8 charset">
+	<h2>Characters</h2>
+	<p class="s s56">A&#8201;B&#8201;C&#8201;D&#8201;E&#8201;F&#8201;G&#8201;H&#8201;I&#8201;J&#8201;K&#8201;L&#8201;M&#8201;N&#8201;O&#8201;P&#8201;Q&#8201;R&#8201;S&#8201;T&#8201;U&#8201;V&#8201;W&#8201;X&#8201;Y&#8201;Z<br />
+	a&#8201;b&#8201;c&#8201;d&#8201;e&#8201;f&#8201;g&#8201;h&#8201;i&#8201;j&#8201;k&#8201;l&#8201;m&#8201;n&#8201;o&#8201;p&#8201;q&#8201;r&#8201;s&#8201;t&#8201;u&#8201;v&#8201;w&#8201;x&#8201;y&#8201;z<br />
+	1&#8201;2&#8201;3&#8201;4&#8201;5&#8201;6&#8201;7&#8201;8&#8201;9&#8201;0&#8201;&amp;&#8201;@&#8201;.&#8201;,&#8201;?&#8201;!&#8201;&#8217;&#8201;&#8220;&#8201;&#8221;&#8201;(&#8201;)</p>
 </div>
 </div><!-- end .container_16 -->
-</div><!-- end .dim -->
 
 
-<!-- MEASURE -->
+<!-- BODY SIZE COMPARISON -->
 <div class="container_16 clearfix">
 <div class="grid_16">
-	<h2>Measure <span>&#8211; CSS font-size/line-height &times; width (px)</span></h2>
-	<p class="m-widest"><span>13/18 &times; 900</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
-	<p class="m-wide"><span>13/18 &times; 700</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to discard knowledge of what has gone before or what is now going on in his own trade and profession. If the printers of today do not wish to be esteemed arrogant when they term this calling of theirs an art, they must be willing, and show that they are willing, to subject it to such laws as have made its</p>
-</div>
-<div class="grid_9">
-	<p class="m-mid"><span>13/18 &times; 450</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="m-narrow"><span>13/18 &times; 300</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-</div>
-<div class="grid_7 small">
-	<p class="m-mid"><span>11/14 &times; 350</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="m-narrow"><span>11/14 &times; 250</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	<p class="m-mini"><span>9/13 &times; 200</span> The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
+	<h2>Body size comparison</h2>
+
+	<div class="bodysize">
+		<table>
+		<tr>
+			<th>{FONT NAME}</th>
+			<th>Arial <a href="http://www.codestyle.org/servlets/FontStack?stack=Arial,Helvetica&generic=sans-serif">stack</a></th>
+			<th>Times <a href="http://www.codestyle.org/servlets/FontStack?stack=Times+New+Roman,Times&generic=serif">stack</a></th>
+			<th>Georgia <a href="http://www.codestyle.org/servlets/FontStack?stack=Georgia,New+Century+Schoolbook,Nimbus+Roman+No9+L&generic=serif">stack</a></th>
+		</tr>
+		<tr>
+			<td><span>Body</span></td>
+			<td class="tf typeface2"><span>Body</span></td>
+			<td class="tf typeface3"><span>Body</span></td>
+			<td class="tf typeface4"><span>Body</span></td>
+		</tr>
+		</table>	
+	</div><!-- end .bodysize -->
+
 </div>
+</div><!-- end .container-16 -->
 
 
-<!-- SIZE -->
-<div class="grid_16">
-	<h2>Size <span>&#8211; CSS font-size (px)</span></h2>
-	<p class="s s36"><span>36</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s30"><span>30</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
-</div><div class="clearfix"></div>
-<div class="grid_10">
-	<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
-</div>
-<div class="grid_6 upp">
-	<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
-</div><div class="clearfix"></div>
-<div class="grid_8">
-	<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
-</div>
-<div class="grid_8 upp">
-	<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s13"><span>13</span> Pack my box with five dozen liquor jugs.</p>
-</div><div class="clearfix"></div>
-<div class="grid_6">
-	<p class="s s12"><span>12</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s11"><span>11</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s10"><span>10</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s9"><span>9</span> Pack my box with five dozen liquor jugs.</p>
-</div>
-<div class="grid_10 upp">
-	<p class="s s14"><span>14</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s16"><span>16</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s18"><span>18</span> Pack my box with five dozen liquor jugs.</p>
-</div><div class="clearfix"></div>
-<div class="grid_16 upp">
-	<p class="s s21"><span>21</span> Pack my box with five dozen liquor jugs.</p>
-	<p class="s s24"><span>24</span> Pack my box with five dozen liquor jugs.</p>
-</div>
+<!-- GRAYSCALE -->
 
+<div class="container_16 clearfix">
+<div class="grid_16 clearfix">
+	<h2>Grayscale <span>&#8211; CSS hex color</span></h2>
+</div>
 
-<!-- GRAYSCALE AND COLOR ON WHITE -->
-<div class="grid_8">
-	<h2>Grayscale <span>&#8211; CSS color (shorthand hexadecimal)</span></h2>
+<div class="grayscale clearfix">
+<div class="grid_8 white">
 	<p class="c000"><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 </div>
-<div class="grid_8">
-	<div class="c000-fff">
-		<h2>Color <span>&#8211; CSS color (shorthand hexadecimal)</span></h2>
-		<p><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-	<div class="cf00-fff">
-		<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-	<div class="c0ff-fff">
-		<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-</div>
-</div><!-- end .container_16 -->
-
 
-<!-- GRAYSCALE AND COLOR ON BLACK -->
-<div class="dark">
-<div class="container_16 clearfix">
-<div class="grid_8">
-	<h2>Grayscale <span>&#8211; CSS color (shorthand hexadecimal)</span></h2>
-	<p class="cfff"><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
+<div class="grid_8 black">
+	<p class="cFFF"><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 	<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
 </div>
-<div class="grid_8">
-	<div class="cfff-000">
-		<h2>Color <span>&#8211; CSS color (shorthand hexadecimal)</span></h2>
-		<p><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-	<div class="c0ff-000">
-		<p><span>#0FF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-	<div class="cf00-000">
-		<p><span>#F00</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
-</div>
-</div><!-- end .container_16 -->
-</div><!-- end .dark -->
+</div><!-- end .grayscale -->
+</div><!-- end .container-16 -->
 
 
-<!-- BLACK AND WHITE ON COLOR -->
-<div class="container_16 clearfix">
-<div class="grid_8">
-	<div class="c cfff-f00">
-		<h2>#FFF on #F00</h2>
-		<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
+<!-- SIZE U&LC -->
+<div class="container_16 ulc clearfix">
+<div class="grid_16">
+	<h2>Size <span>&#8211; CSS font-size (px)</span></h2>
+	<p class="s s36"><span>36</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s30"><span>30</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s24"><span>24</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+</div><div class="clearfix"></div>
+<div class="grid_10">
+	<p class="s s21"><span>21</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s18"><span>18</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
 </div>
+<div class="grid_6 upp">
+	<p class="s s9"><span>9</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s10"><span>10</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+</div><div class="clearfix"></div>
 <div class="grid_8">
-	<div class="c c000-f00">
-		<h2>#000 on #0FF</h2>
-		<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
+	<p class="s s16"><span>16</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s14"><span>14</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s13"><span>13</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
 </div>
-<div class="grid_8">
-	<div class="c cfff-0ff">
-		<h2>#FFF on #0FF</h2>
-		<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
+<div class="grid_8 upp">
+	<p class="s s11"><span>11</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s12"><span>12</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s13"><span>13</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+</div><div class="clearfix"></div>
+<div class="grid_6">
+	<p class="s s12"><span>12</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s11"><span>11</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s10"><span>10</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
+	<p class="s s9"><span>9</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
 </div>
-<div class="grid_8">
-	<div class="c c000-0ff">
-		<h2>#000 on #0FF</h2>
-		<p>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
-	</div>
+<div class="grid_10 upp">
+	<p class="s s14"><span>14</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s16"><span>16</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s18"><span>18</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+</div><div class="clearfix"></div>
+<div class="grid_16 upp">
+	<p class="s s21"><span>21</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s24"><span>24</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
+	<p class="s s30"><span>30</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
 </div>
 </div><!-- end .container_16 -->
 
@@ -264,6 +177,7 @@
 <div id="footer" class="container_12">
 <div class="grid_6 suffix_6">
 	<p>This web font specimen is brought to you by <a href="http://nicewebtype.com/">Nice Web Type</a>.<br />
+	Ported for <a href="http://www.sass-lang.com">Sass</a>/<a href="http://www.compass-style.org/">Compass</a> by <a href="http://www.oddbird.net/">Eric Meyer</a>.<br />
 	<a href="http://webfontspecimen.com/">Grab a copy and test your type</a>. Licensed via <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons</a>.</p>
 </div>
 </div><!-- end #footer -->

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: webfontspecimen
 version: !ruby/object:Gem::Version 
-  prerelease: false
+  prerelease: true
   segments: 
   - 0
-  - 2
+  - 3
   - 0
-  version: 0.2.0
+  - rc1
+  version: 0.3.0.rc1
 platform: ruby
 authors: 
 - Eric Meyer
@@ -14,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-05-18 00:00:00 -06:00
+date: 2010-06-21 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -28,8 +29,7 @@ dependencies:
         - 0
         - 10
         - 0
-        - rc3
-        version: 0.10.0.rc3
+        version: 0.10.0
   type: :runtime
   version_requirements: *id001
 description: A Compass port of Nice Web Type's Web Font Specimen tool
@@ -47,6 +47,8 @@ files:
 - stylesheets/wfs/_960.scss
 - stylesheets/wfs/_base.scss
 - templates/project/_specimen.scss
+- templates/project/black.gif
+- templates/project/grid.gif
 - templates/project/manifest.rb
 - templates/project/specimen.html
 has_rdoc: true
@@ -67,11 +69,13 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
   requirements: 
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version 
       segments: 
-      - 0
-      version: "0"
+      - 1
+      - 3
+      - 1
+      version: 1.3.1
 requirements: []
 
 rubyforge_project: