html5-boilerplate 0.1.7 → 0.2.0

data/README.md

@@ -28,7 +28,7 @@ Rails Installation
     
     app/stylesheets/style.scss
     app/stylesheets/handheld.scss
-    app/stylesheets/partials/_defaults.scss
+    app/stylesheets/partials/_base.scss
     app/stylesheets/partials/_example.scss
     app/stylesheets/partials/_page.scss
     
@@ -51,6 +51,8 @@ Rails Installation
     
     config/compass.rb
     config/initializers/compass.rb
+    config/google.yml
+    config/nginx.conf
 
 The Scss files above will automatically get compiled to your Sass compilation directory:
 
@@ -71,7 +73,10 @@ The haml will compile to the equivalent of html5-boilerplate's index.html,
 but with all comments stripped out, and some additional rails stuff
 like csrf_meta_tags, flashes and the Rails jQuery driver.
 
-This has only been tested on Rails3, but should work fine on Rails2.
+You can set your own Google Analytics Account ID and your Google API Key
+either as ENV variables, or inside config/google.yml.
+
+This extension has only been tested on Rails3.
 
 
 Stand Alone Installation
@@ -94,7 +99,7 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
     
     src/style.scss
     src/handheld.scss
-    src/partials/_defaults.scss
+    src/partials/_base.scss
     src/partials/_example.scss
     src/partials/_page.scss
     

data/VERSION

@@ -1 +1 @@
-0.1.7
+0.2.0

data/lib/app/helpers/html5_boilerplate_helper.rb

@@ -0,0 +1,47 @@
+module Html5BoilerplateHelper
+  # Create a named haml tag to wrap IE conditional around a block
+  # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+  def ie_tag(name=:body, attrs={}, &block)
+    attrs.symbolize_keys!
+    haml_concat("<!--[if lt IE 7 ]> #{ tag(name, add_class('ie6', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 7 ]>    #{ tag(name, add_class('ie7', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 8 ]>    #{ tag(name, add_class('ie8', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 9 ]>    #{ tag(name, add_class('ie9', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if (gt IE 9)|!(IE)]><!-->".html_safe)
+    haml_tag name, attrs do
+      haml_concat("<!--<![endif]-->".html_safe)
+      block.call
+    end
+  end
+
+  def ie_html(attrs={}, &block)
+    ie_tag(:html, attrs, &block)
+  end
+
+  def ie_body(attrs={}, &block)
+    ie_tag(:body, attrs, &block)
+  end
+
+  def google_account_id
+    ENV['GOOGLE_ACCOUNT_ID'] || google_config(:google_account_id) || ''
+  end
+
+  def google_api_key
+    ENV['GOOGLE_API_KEY'] || google_config(:google_api_key) || ''
+  end
+
+private
+
+  def add_class(name, attrs)
+    classes = attrs[:class] || ''
+    classes.strip!
+    classes = ' ' + classes if !classes.blank?
+    classes = name + classes
+    attrs.merge(:class => classes)
+  end
+
+  def google_config(key)
+    configs = YAML.load_file(File.join(Rails.root, 'config', 'google.yml'))[Rails.env.to_sym] rescue {}
+    configs[key]
+  end
+end

data/lib/html5-boilerplate.rb

@@ -1 +1,6 @@
-Compass::Frameworks.register("html5-boilerplate", :path => "#{File.dirname(__FILE__)}/..")
+Compass::Frameworks.register("html5-boilerplate", :path => "#{File.dirname(__FILE__)}/..")
+
+if defined?(ActionController)
+  require File.join(File.dirname(__FILE__), 'app', 'helpers', 'html5_boilerplate_helper')
+  ActionController::Base.helper(Html5BoilerplateHelper)
+end

data/stylesheets/_html5-boilerplate.scss

@@ -1,13 +1,13 @@
 @import "html5-boilerplate/reset";
 @import "html5-boilerplate/fonts";
-@import "html5-boilerplate/base";
+@import "html5-boilerplate/styles";
 @import "html5-boilerplate/helpers";
 @import "html5-boilerplate/media";
 
 @mixin html5-boilerplate {
   @include html5-boilerplate-reset;
   @include html5-boilerplate-fonts;
-  @include html5-boilerplate-base;
+  @include html5-boilerplate-styles;
   @include html5-boilerplate-helpers;
   @include html5-boilerplate-media;
 }

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -47,7 +47,7 @@ $base-line-height: 1.231 !default;
 //   .big .bigger
 //     +font-size(18px, 16px)
 //
-// For more information see the table found at http://developer.yahoo.com/yui/fonts/#fontsize
+// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize
 @mixin font-size($size, $base-font-size: $base-font-size) {
   font-size: percentage($size / $base-font-size);
 }

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -1,10 +1,11 @@
+@import "compass/utilities/text/replacement";
+@import "compass/utilities/general/clearfix";
+
 //
 // Non-semantic helper classes
+// It's better to include these mixins in your own styles
 //
 
-@import "compass/utilities/text/replacement";
-@import "compass/utilities/general/clearfix";
-
 @mixin html5-boilerplate-helpers {
   .ir { @include image-replacement; }
 
@@ -53,5 +54,7 @@
 @mixin invisible { visibility: hidden; }
 
 // The Magnificent CLEARFIX
-// Now using pie-clearfix from Compass
-// since it's exactly the same
+@mixin magnificent-clearfix {
+  @warn "The 'magnificent-clearfix' mixin has been deprecated. Use 'pie-clearfix' in compass core instead.";
+  @include pie-clearfix;
+}

data/stylesheets/html5-boilerplate/{_base.scss → _styles.scss}

@@ -11,7 +11,7 @@ $list-left-margin: 1.8em !default;
 // Minimal base styles
 //
 
-@mixin html5-boilerplate-base {
+@mixin html5-boilerplate-styles {
   body, select, input, textarea { color: $font-color; }
 
   html { @include force-scrollbar; }

data/templates/project/_head.html.haml

@@ -10,6 +10,8 @@
   %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
   
   %title
+    == #{controller.controller_name.titleize} - #{controller.action_name.titleize}
+    
   %meta{:content => "", :name => "description"}/
   %meta{:content => "", :name => "author"}/
   

data/templates/project/_javascripts.html.haml

@@ -1,5 +1,6 @@
 -# Grab Google CDN's jQuery
-- if defined?(google_api_key) && !google_api_key.blank?
+-# Looks for google_api_key first in ENV['GOOGLE_API_KEY'] then in config/google.yml
+- if !google_api_key.blank?
   = javascript_include_tag "http://www.google.com/jsapi?key=#{google_api_key}"
   :javascript
     google.load("jquery", "1.4.2");
@@ -23,14 +24,13 @@
   = javascript_include_tag 'profiling/yahoo-profiling.min', 'profiling/config'
 
 -# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
--# define a google_account_id helper that returns your site's ID
-- if defined?(google_account_id) && !google_account_id.blank?
-  :javascript
-    var _gaq = [['_setAccount', '#{google_account_id}'], ['_trackPageview']];
-    (function(d, t) {
-     var g = d.createElement(t),
-         s = d.getElementsByTagName(t)[0];
-     g.async = true;
-     g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-     s.parentNode.insertBefore(g, s);
-    })(document, 'script');
+-# Looks for google_account_id first in ENV['GOOGLE_ACCOUNT_ID'] then in config/google.yml
+:javascript
+  var _gaq = [['_setAccount', '#{google_account_id}'], ['_trackPageview']];
+  (function(d, t) {
+   var g = d.createElement(t),
+       s = d.getElementsByTagName(t)[0];
+   g.async = true;
+   g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+   s.parentNode.insertBefore(g, s);
+  })(document, 'script');

data/templates/project/application.html.haml

@@ -1,15 +1,14 @@
 !!! 5
+-#
+  Use the ie_html tag below instead of the %html tag if you prefer
+  the IE conditionals on the HTML tag instead of the body tag
+  http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+  
+-# ie_html :lang => 'en', :class => 'no-js' do
 %html.no-js{:lang => "en"}
   = render :partial => 'layouts/head'
-
-  -# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-  <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
-  <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
-  <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
-  <!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
-  <!--[if (gt IE 9)|!(IE)]><!-->
-  %body
-    <!--<![endif]-->
+  
+  - ie_body :class => "#{controller.controller_name}" do
     #container
       %header#header
         = render :partial => 'layouts/header'
@@ -18,6 +17,6 @@
         = yield
       %footer#footer
         = render :partial => 'layouts/footer'
-
+        
     -# Javascript at the bottom for fast page loading
     = render :partial => 'layouts/javascripts'

data/templates/project/files/google.yml

@@ -0,0 +1,18 @@
+# Html5BoilerplateHelper will first check your ENV
+# for each key before using the these yml values
+# e.g. ENV['GOOGLE_ACCOUNT_ID'] || :google_account_id
+defaults: &defaults
+  :google_account_id: 'UA-XXXXX-X'  # ENV['GOOGLE_ACCOUNT_ID']
+  :google_api_key: ''               # ENV['GOOGLE_API_KEY']
+
+:development:
+  <<: *defaults
+
+:test:
+  <<: *defaults
+
+:staging:
+  <<: *defaults
+
+:production:
+  <<: *defaults

data/templates/project/files/htaccess

@@ -16,6 +16,10 @@
   </IfModule>
 </IfModule>
 
+# Because X-UA-Compatible isn't sent to non-IE (to save header bytes),
+#   We need to inform proxies that content changes based on UA
+Header append Vary User-Agent
+
 
 # hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
 # Disabled. Uncomment to serve cross-domain ajax requests
@@ -49,8 +53,8 @@ AddEncoding gzip                      svgz
 
 # webfonts
 AddType application/vnd.ms-fontobject eot
-AddType font/ttf                      ttf
-AddType font/otf                      otf
+AddType font/truetype                 ttf
+AddType font/opentype                 otf
 AddType font/woff                     woff
 
 AddType text/cache-manifest           manifest

data/templates/project/manifest.rb

@@ -1,8 +1,8 @@
 description "Compass extention for HTML5 Boilerplate located at http://html5boilerplate.com"
 
-stylesheet 'style.scss', :media => 'screen, projection'
+stylesheet 'style.scss', :media => 'all'
 stylesheet 'handheld.scss', :media => 'handheld'
-stylesheet 'partials/_defaults.scss'
+stylesheet 'partials/_base.scss'
 stylesheet 'partials/_example.scss'
 stylesheet 'partials/_page.scss'
 
@@ -14,6 +14,7 @@ if Compass.configuration.project_type == :rails
   file '_header.html.haml', :to => 'app/views/layouts/_header.html.haml'
   file '_javascripts.html.haml', :to => 'app/views/layouts/_javascripts.html.haml'
   file '_stylesheets.html.haml', :to => 'app/views/layouts/_stylesheets.html.haml'
+  file 'files/google.yml', :to => 'config/google.yml'
   file 'files/nginx.conf', :to => 'config/nginx.conf'
   javascript 'javascripts/dd_belatedpng.js', :to => 'dd_belatedpng.js'
   javascript 'javascripts/jquery-1.4.2.min.js', :to => 'jquery-1.4.2.min.js'

data/templates/project/partials/_base.scss

@@ -0,0 +1,23 @@
+// This file must be imported before loading html5-boilerplate
+
+$base-font-family: unquote('sans-serif');  // default font-family
+
+$base-font-size: 13px;  // default font-size for YUI fonts
+
+$base-line-height: 1.231;  // default line-height for YUI fonts
+
+$font-color: #444;
+
+$link-color: #607890;
+
+$link-hover-color: #036;
+
+$link-active-color: #607890;
+
+$link-visited-color: #607890;
+
+$selected-font-color: #fff;  // color for selected text
+
+$selected-background-color: #ff5E99;  // bg-color for selected text
+
+$list-left-margin: 1.8em;  // left margin for ul an ol

data/templates/project/partials/_example.scss

@@ -54,7 +54,7 @@ sup { @include sup; }
 .visuallyhidden { @include visually-hidden; }
 
 .clearfix {
-  @include pie-clearfix; // Already defined by compass
+  @include pie-clearfix;  // defined by compass core
 }
 
 

data/templates/project/partials/_page.scss

@@ -6,7 +6,7 @@
 //-----------------------------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  // This might not be the best choice if you are
+  // Bold might not be the best choice if you are
   // embedding font faces that are already bold
   font-weight: bold;
 }
@@ -16,7 +16,9 @@ strong, th {
 }
 
 small {
-  @include font-size(11px);  // This is approx 85%
+  // Use font-size mixin to convert to percentage for YUI
+  // http://developer.yahoo.com/yui/3/cssfonts/#fontsize
+  @include font-size(11px);  // approx 85% when base-font-size eq 13px
 }
 
 // Add the 'required' attribute on your

data/templates/project/style.scss

@@ -1,8 +1,7 @@
 // First, set some default constants
-// to be used by html5-boilerplate
-@import "partials/defaults";
+@import "partials/base";
 
-// Then, we'll import the compass extension
+// Then we'll import the compass extension
 @import "html5-boilerplate";
 
 // Now you can choose to include the whole
@@ -13,7 +12,7 @@
 // sections you want to include
 //@include html5-boilerplate-reset;
 //@include html5-boilerplate-fonts;
-//@include html5-boilerplate-base;
+//@include html5-boilerplate-styles;
 //@include html5-boilerplate-helpers;
 //@include html5-boilerplate-media;
 

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 1
-  - 7
-  version: 0.1.7
+  - 2
+  - 0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Peter Gumeson
@@ -45,14 +45,15 @@ files:
 - LICENSE
 - VERSION
 - templates/project/files/htaccess
+- lib/app/helpers/html5_boilerplate_helper.rb
 - lib/html5-boilerplate.rb
 - stylesheets/_html5-boilerplate.scss
-- stylesheets/html5-boilerplate/_base.scss
 - stylesheets/html5-boilerplate/_fonts.scss
 - stylesheets/html5-boilerplate/_handheld.scss
 - stylesheets/html5-boilerplate/_helpers.scss
 - stylesheets/html5-boilerplate/_media.scss
 - stylesheets/html5-boilerplate/_reset.scss
+- stylesheets/html5-boilerplate/_styles.scss
 - templates/project/_flashes.html.haml
 - templates/project/_footer.html.haml
 - templates/project/_head.html.haml
@@ -64,6 +65,7 @@ files:
 - templates/project/files/apple-touch-icon.png
 - templates/project/files/crossdomain.xml
 - templates/project/files/favicon.ico
+- templates/project/files/google.yml
 - templates/project/files/nginx.conf
 - templates/project/files/robots.txt
 - templates/project/files/web.config
@@ -79,7 +81,7 @@ files:
 - templates/project/javascripts/profiling/yahoo-profiling.min.js
 - templates/project/javascripts/rails.js
 - templates/project/manifest.rb
-- templates/project/partials/_defaults.scss
+- templates/project/partials/_base.scss
 - templates/project/partials/_example.scss
 - templates/project/partials/_page.scss
 - templates/project/style.scss

data/templates/project/partials/_defaults.scss

@@ -1,23 +0,0 @@
-// This file must be imported before loading html5-boilerplate
-
-$base-font-family: unquote('sans-serif');
-
-$base-font-size: 13px;
-
-$base-line-height: 1.231;
-
-$font-color: #444;
-
-$link-color: #607890;
-
-$link-hover-color: #036;
-
-$link-active-color: #607890;
-
-$link-visited-color: #607890;
-
-$selected-font-color: #fff;
-
-$selected-background-color: #FF5E99;
-
-$list-left-margin: 1.8em;