webfontspecimen 0.3.0 → 0.4

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA1: 
+  metadata.gz: 212684468cc88a57c2de72c7dd4adf4bf69810f7
+  data.tar.gz: ddaaca3018127e48f0b62db74607de858ed7b72c
+SHA512: 
+  metadata.gz: 30fe5096768310820c1db7b3f79221f492427f1f66b2a5aa2e22c8b6099846abba7b60f5cccbc790d5a8e5597b2019c69bb23affaa9ae8e9913eb3fa90872d1c
+  data.tar.gz: 19c8186c42a5948fe482bf99e1526aacfcf65b50b8806c517fbe8f2cc79be184f8a9d3c91db5acb9420c46fac06fda1d54ac8520f16f93acb658a995b31f25de

data/stylesheets/wfs/_base.scss

@@ -1,11 +1,13 @@
 /* Fonts ----------------------------------------------- */
 $font-type: serif !default;
-$font-face: Georgia !default;
-$font-stack: $font-face, $font-type !default;
+$font-name: Georgia !default;
+$pretty-font-name: $font-name !default;
+$font-stack: $font-name, $font-type !default;
+$font-style: normal !default;
 
 @mixin font-stack {
   font-family: $font-stack; 
-  font-style: normal; 
+  font-style: $font-style; 
 }
 
 body {
@@ -121,7 +123,7 @@ a:active {
 -----------------------------------------*/
 .bodysize {
 	overflow: hidden;
-	background: #fff image-url("grid.gif") -5px 9px repeat;
+	background: #fff inline-image("grid.gif") -5px 9px repeat;
 	}
 .bodysize table {
 	width: 100%;
@@ -176,7 +178,7 @@ a:active {
 -----------------------------------------*/
 .grayscale {
 	clear: both;
-	background: #fff image-url("black.gif") top right repeat-y;
+	background: #fff inline-image("black.gif") top right repeat-y;
 	}
 .grayscale p span {
 	display: block;
@@ -233,4 +235,25 @@ a:active {
 	}
 p.upp {
 	text-align: left;
-	}
+	}
+
+// Add Font Name to page using CSS Pseudo Classes rather than replacing {FONT NAME}. Hide {FONT NAME} on H1 and Table Head (note: you can't target <title> with pseudo classes).
+ 
+h1 {
+  span {
+    display: none;
+  }
+  &:before {
+    content: $pretty-font-name;
+  }
+}
+table {
+  th:first-child {
+    span {
+      display: none;
+    }
+    &:before {
+      content: $pretty-font-name;
+    }
+  }
+}           

data/templates/project/README.mkdn

@@ -0,0 +1 @@
+Add your fonts to this folder.

data/templates/project/_type_specimen_1.scss

@@ -0,0 +1,62 @@
+/* Welcome to WebFontSpecimen
+ * Based on Nice Web Type's tool by the same name
+ * http://webfontspecimen.com/ */
+
+// Imports -----------------------------------*/
+@import "compass/css3/font-face";
+
+
+//
+// Web Font Specimen Usage:
+// ========================
+// 
+//  1. Add your typeface(s) to your specified "fonts" folder.
+//     - This is already specified as "fonts_dir" in your "config.rb" file.
+//     - Or link to fonts from google, typekit, or other services
+//
+//  2. For multiple specimens
+//     - Duplicate `_type_specimen_1.scss`
+//     - add @import "_type_specimen_NEW_NUMBER.scss;" to specimen.scss 
+//
+//  3. Add your font name and file path to "$font-name" and "$font-file-name" to "_type_specimen_1.scss"
+//    - Optional: add your `$pretty-font-name` (displays on the `specimen.html` page)
+//
+//  4. Make adjustments to "specimen.html"
+//     - For multiple specimens duplicate and rename for each font being sure to change the stylesheet link as needed.
+//
+//  5. Enjoy!
+//
+
+
+// Font Type ---------------------------------*/
+$font-type: serif;
+
+/* Standard ----------------------------------*/
+// Font Name i.e. "DroidSerifRegular"
+$font-name: "YourFontsCSSName";
+// File path minus extension i.e "DroidSerif/DroidSerif-Regular-webfont"
+$font-file-name: "type_file";
+$font-weight: normal !default;
+$font-style: normal !default;
+
+// Pretty Font name for displaying on the specimen.html page i.e. "Droid Serif Regular" 
+// If it's left commented out it will default to $font-name
+// $pretty-font-name: "Your Font's Name";
+
+@include font-face(
+  $font-name, 
+  font-files(
+    "#{$font-file-name}.woff", woff, 
+    "#{$font-file-name}.ttf", truetype,
+    "#{$font-file-name}.svg##{$font-name}", svg
+  ), 
+  "#{$font-file-name}.eot",
+  $font-weight, 
+  $font-style
+);
+
+$font-stack: $font-name, $font-type;
+
+// Import WebFontSpecimen -------------------------------------------*/
+// Leave this below your font settings
+@import "webfontspecimen";

data/templates/project/config.rb

@@ -0,0 +1,27 @@
+require 'webfontspecimen'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+fonts_dir = "fonts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+ relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/templates/project/manifest.rb

@@ -1,7 +1,23 @@
-stylesheet '_specimen.scss', :media => "screen, projection"
-image 'black.gif'
-image 'grid.gif'
-html 'specimen.html'
+# use a Custom config.rb to add the css and fonts folders
+no_configuration_file!
+skip_compilation!
+
+file 'config.rb', :like => :file, :to => "config.rb"
+
+# Stylesheets Import
+file 'specimen.scss', :like => :stylesheet, :media => 'screen, projection', :to => 'specimen.scss'
+file '_type_specimen_1.scss', :like => :stylesheet, :media => 'screen, projection', :to => '_type_specimen_1.scss'
+
+# Image Import
+file 'black.gif', :like => :image, :to => 'black.gif'
+file 'grid.gif', :like => :image, :to => 'grid.gif' 
+
+# HTML Import
+file 'specimen.html', :like => :html, :to => 'specimen.html'
+
+# Font Import 
+# Note: Using :font puts the files in stylesheets/fonts despite setting fonts_dir in config.rb. Adding README.mkdn to create fonts folder (won't be created otherwise)
+file "README.mkdn", :like => :file, :to => "fonts/README.mkdn"
 
 description "A Compass port of Nice Web Type's Web Font Specimen tool - http://webfontspecimen.com/"
 
@@ -12,5 +28,5 @@ or duplicate for multiple specimens.
 
 welcome_message %Q{
 Please refer to the README or 'specimen.html' files for instructions.
-}
-
+To get started 'cd' into your project and run 'compass compile'.
+}

data/templates/project/specimen.html

@@ -7,22 +7,20 @@
   
   Using Web Font Specimen =======================================================
   
-  
   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
+     - This is already specified as "fonts_dir" in your "config.rb" file.
+     - Or link to fonts from google, typekit, 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
+  2. For multiple specimens
+     - Duplicate `_type_specimen_1.scss`
+     - add @import "_type_specimen_NEW_NUMBER.scss;" to specimen.scss 
 
-  3. Include your font in the provided specimen.scss "font-face" mixin
+  3. Add your font name and file path to "$font-name" and "$font-file-name" to "_type_specimen_1.scss"
+    - Optional: add your `$pretty-font-name` (displays on the `specimen.html` page)
+
+  4. Make adjustments to "specimen.html"
+     - For multiple specimens duplicate and rename for each font being sure to change the stylesheet link as needed.
 
-  4. Make adjustments to this file
-     - For multiple specimens duplicate and rename for each font
-       being sure to change the stylesheet link as needed.
-     - Search for and replace "{FONT NAME}" with your font name
-     
   5. Enjoy!
      
   ==============================================================================
@@ -35,7 +33,7 @@
   <!-- 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>
+  <title>Web Font Specimen</title>
   <link rel="stylesheet" href="css/specimen.css" type="text/css" media="screen" charset="utf-8">
 
 </head>
@@ -47,7 +45,7 @@
 
 <!-- NAME OF TYPEFACE -->
 <div class="grid_16">
-	<h1>{FONT NAME}</h1>
+	<h1><span>{FONT NAME}</span></h1> 
 </div>
 
 
@@ -83,7 +81,7 @@
 	<div class="bodysize">
 		<table>
 		<tr>
-			<th>{FONT NAME}</th>
+			<th><span>{FONT NAME}</span></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>

data/templates/project/specimen.scss

@@ -0,0 +1 @@
+@import "_type_specimen_1.scss";

metadata

@@ -1,21 +1,16 @@
 --- !ruby/object:Gem::Specification 
 name: webfontspecimen
 version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 0
-  - 3
-  - 0
-  version: 0.3.0
+  version: "0.4"
 platform: ruby
 authors: 
 - Eric Meyer
+- Mark Reilly
 autorequire: 
 bindir: bin
 cert_chain: []
 
-date: 2010-08-15 00:00:00 -06:00
-default_executable: 
+date: 2013-11-07 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -24,15 +19,13 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 10
-        - 0
         version: 0.10.0
   type: :runtime
   version_requirements: *id001
-description: A Compass port of Nice Web Type's Web Font Specimen tool
-email: eric@oddbird.net
+description: A Compass port of Nice Web Type's (Tim Brown) Web Font Specimen tool http://webfontspecimen.com/
+email: 
+- eric@oddbird.net
+- mark@alienresident.net
 executables: []
 
 extensions: []
@@ -45,14 +38,18 @@ files:
 - stylesheets/_webfontspecimen.scss
 - stylesheets/wfs/_960.scss
 - stylesheets/wfs/_base.scss
-- templates/project/_specimen.scss
+- templates/project/_type_specimen_1.scss
 - templates/project/black.gif
+- templates/project/config.rb
 - templates/project/grid.gif
 - templates/project/manifest.rb
+- templates/project/README.mkdn
 - templates/project/specimen.html
-has_rdoc: true
+- templates/project/specimen.scss
 homepage: http://www.oddbird.net/
-licenses: []
+licenses: 
+- CC BY 3.0
+metadata: {}
 
 post_install_message: 
 rdoc_options: []
@@ -61,24 +58,19 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
   requirements: 
-  - - ">="
+  - &id002 
+    - ">="
     - !ruby/object:Gem::Version 
-      segments: 
-      - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
   requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
+  - *id002
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 2.1.8
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: A Compass port of Nice Web Type's Web Font Specimen tool
 test_files: []
 

data/templates/project/_specimen.scss

@@ -1,51 +0,0 @@
-/* Welcome to WebFontSpecimen
- * Based on Nice Web Type's tool by the same name
- * http://webfontspecimen.com/ */
-
-// Imports -----------------------------------*/
-@import "compass/css3/font-face";
-
-
-//
-// Web Font Specimen Usage:
-// ========================
-// 
-// 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 your font below
-// 
-// 4. Make adjustments to "specimen.html"
-//    - For multiple specimens duplicate and rename for each font
-//      being sure to change the stylesheet link as needed.
-//    - Search for and replace "{FONT NAME}" with your font name
-//
-// 5. Enjoy!
-//
-
-
-// Font Type ---------------------------------*/
-$font-type: serif;
-
-/* Standard ----------------------------------*/
-$font-face: "Name Your Font";
-@include font-face(
-  $font-face, 
-  font-files(
-    "type_file.woff", woff, 
-    "type_file.ttf", truetype,
-    "type_file.svg#Type-Name", svg
-  ), 
-  "type_file.eot"
-);
-
-$font-stack: $font-face, $font-type;
-
-// Import WebFontSpecimen -------------------------------------------*/
-// Leave this below your font settings
-@import "webfontspecimen";