html5-boilerplate 0.3.0 → 0.3.1

data/LICENSE

@@ -1,3 +1,3 @@
-Copyright (c) 2010 Peter Gumeson
+Copyright (c) 2010-2011 Peter Gumeson
 
-http://creativecommons.org/licenses/by/3.0/
+http://creativecommons.org/licenses/by/3.0/

data/README.md

@@ -2,22 +2,57 @@ Compass Html5 Boilerplate
 =========================
 
 HTML5 Boilerplate is a Compass extension based on HTML5 Boilerplate by Paul Irish.
-You can use it to kick-start fully compliant HTML5 applications. Generate either
-stand-alone HTML5 projects, or Rails applications with fully integrated HTML5
-Haml and Sass (Scss) templates.
+You can use it to kick-start fully compliant HTML5 applications. Setup your Rails
+applications with with fully integrated Haml and Sass/Scss templates that implement
+Boilerplate's functionality, or generate stand-alone Html5 Compass projects.
 
 Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
 
+Features
+=========
+(In addition to Html5 Boilerplate itself)
+
+* Html5 Boilerplate stylesheets implemented as a modularized Compass library
+* Lets you pick and choose only the Boilerplate mixins and includes you want
+* Generates sass/scss partials to keep your styleshees organized
+* Generates modularized haml layouts for Rails apps (header, footer, flashes, etc.)
+* Rails helpers to cleanly hide a little of Boilerplate's html complexity
+* Loads minified jQuery in production envs, but uncompressed version in development
+* Rails jquery-ujs driver installed and loaded along with jQuery and Modernizr
+* Setting API Key in google.yml will auto-load jquery from google (async)
+* Setting Analytics ID in google.yml will auto-load google analytics (async)
+* Uses content_for hooks to keep all your javascript and stylesheets in one place
+* Falls back to native Compass for stuff like clearfix and image replacement
+* Fully commented source, but the haml/sass output remains comment free
+* Not tested on animals
+
 Rails Installation
 ==================
 
-    gem install html5-boilerplate
-    cd my_rails_project
+First, make sure the following gems are in your Gemfile
+
+    gem "compass"
+    gem "haml"
+    gem "html5-boilerplate"
+
+Then run the following
+
+    bundle install
     compass init rails -r html5-boilerplate -u html5-boilerplate --force
 
-**This will install the following files in your rails project:**  
 (Using `--force` flag will overwrite any files that may already exist. In most cases this is probably what you want.)
 
+(For a new project, I answer "Yes" to keep my stylesheets in app/stylesheets, but "No" for compiling them into public/stylesheets/compiled.)
+
+Now remove your application.html.erb so that Haml can do its thing
+
+    mv apps/views/layouts/application.html.erb apps/views/layouts/application.html.old
+
+Start your Rails server, and you're done!
+
+
+**Here's a list of the files that compass init installed in your Rails project:**
+
     app/views/layouts/application.html.haml
     app/views/layouts/_flashes.html.haml
     app/views/layouts/_footer.html.haml
@@ -62,17 +97,14 @@ manually add the following line to the top:
 
     require 'html5-boilerplate'
 
-### A few more minor points...
-
-If you still have an application.html.erb in your layouts, you will need to loose
-it now so that Rails will use your shiny new application.html.haml layout instead.
+### A few more points...
 
 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.
+like csrf_meta_tags, flashes and the Rails jquery-ujs driver.
 
 You can set your own Google Analytics Account ID and your Google API Key
-either as ENV variables, or inside config/google.yml.
+either as ENV variables, or inside config/google.yml. (see that file)
 
 This extension has only been tested on Rails3.
 
@@ -80,6 +112,9 @@ This extension has only been tested on Rails3.
 Stand Alone Installation
 ========================
 
+Use this if you're not using Rails, but still want compass and the html5-boilerplate sass libraries,
+It will create a simplified index.html (with haml source), but without the nice Rails helpers.
+
     gem install html5-boilerplate
     compass create my_project -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
 
@@ -89,6 +124,7 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
 **This will create a `my_project` directory containing the following files:**  
 
     index.html
+    index.html.haml
     404.html
     crossdomain.xml
     robots.txt
@@ -124,5 +160,5 @@ License
 HTML5 Boilerplate by Paul Irish  
 (comments left intact in scss files)
 
-Compass Extension Copyright (c) 2010, Peter Gumeson  
+Compass Extension Copyright (c) 2010-2011, Peter Gumeson  
 [http://creativecommons.org/licenses/by/3.0](http://creativecommons.org/licenses/by/3.0)

data/VERSION

@@ -1 +1 @@
-0.3.0
+0.3.1

data/lib/app/helpers/html5_boilerplate_helper.rb

@@ -30,6 +30,22 @@ module Html5BoilerplateHelper
     ENV['GOOGLE_API_KEY'] || google_config(:google_api_key)
   end
 
+  def remote_jquery(version)
+    if Rails.env == 'development'
+      "'jquery', '#{version}', {uncompressed:true}"
+    else
+      "'jquery', '#{version}'"
+    end
+  end
+
+  def local_jquery(version)
+    if Rails.env == 'development'
+      "#{version}/jquery.js"
+    else
+      "#{version}/jquery.min.js"
+    end
+  end
+
 private
 
   def add_class(name, attrs)

data/stylesheets/_html5-boilerplate.scss

@@ -1,3 +1,11 @@
+// HTML5 Boilerplate
+// 
+// Credit is left where credit is due.
+// Much inspiration was taken from these projects:
+// - yui.yahooapis.com/2.8.1/build/base/base.css
+// - camendesign.com/design/
+// - praegnanz.de/weblog/htmlcssjs-kickstart
+
 @import "html5-boilerplate/reset";
 @import "html5-boilerplate/fonts";
 @import "html5-boilerplate/styles";

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -3,7 +3,7 @@ $base-font-size: 13px !default;
 $base-line-height: 1.231 !default;
 
 //
-// Font normalization inspired by  from the YUI Library's fonts.css: developer.yahoo.com/yui
+// Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui
 // Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
 //
 

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -45,6 +45,11 @@
 // www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden
 @mixin visually-hidden {
   border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
+  // Extends the .visuallyhidden class to allow the element to be focusable
+  // when navigated to via the keyboard: drupal.org/node/897638
+  &.focusable:active, &.focusable:focus {
+    clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
+  }
 }
 
 // Hide visually and from screenreaders, but maintain layout

data/stylesheets/html5-boilerplate/_media.scss

@@ -17,8 +17,8 @@
 }
 
 //
-// print styles
-// inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
+// Print styles
+// Inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
 
 @mixin media-print {
   * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
@@ -26,7 +26,7 @@
   a, a:visited { color: #444 !important; text-decoration: underline; }
   a[href]:after { content: " (" attr(href) ")"; }
   abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // don't show links for images, or javascript/internal links
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // Don't show links for images, or javascript/internal links
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
   thead { display: table-header-group; } // css-discuss.incutio.com/wiki/Printing_Tables
   tr, img { page-break-inside: avoid; }
@@ -37,8 +37,8 @@
 
 
 //
-// media queries for responsive design
-// these follow after primary styles so they will successfully override.
+// Media queries for responsive design
+// These follow after primary styles so they will successfully override.
 //
 
 @mixin media-orientation-portrait {
@@ -54,7 +54,7 @@
 @mixin media-mobile($optimize: true) {
   // j.mp/textsizeadjust
   @if not $optimize {
-    // don't allow iOS and WinMobile to mobile-optimize text
-    html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+    // Don't allow iOS and WinMobile to mobile-optimize text
+    html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
   }
 }

data/stylesheets/html5-boilerplate/_reset.scss

@@ -1,16 +1,6 @@
-//
-//  style.css contains a reset, font normalization and some base styles.
-//  
-//  credit is left where credit is due.
-//  much inspiration was taken from these projects:
-//    yui.yahooapis.com/2.8.1/build/base/base.css
-//    camendesign.com/design/
-//    praegnanz.de/weblog/htmlcssjs-kickstart
-//
 //  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 //  v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 //  html5doctor.com/html-5-reset-stylesheet/
-//
 
 @mixin html5-boilerplate-reset {
   html, body, div, span, object, iframe,
@@ -40,17 +30,17 @@
   blockquote:before, blockquote:after,
   q:before, q:after { content:''; content:none; }
 
-  ins { background-color: #ff9; color: #000; text-decoration:none; }
+  ins { background-color: #ff9; color: #000; text-decoration: none; }
 
-  mark { background-color: #ff9; color: #000; font-style:italic; font-weight:bold; }
+  mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
 
   del { text-decoration: line-through; }
 
-  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+  abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
 
-  table { border-collapse:collapse; border-spacing:0; }
+  table { border-collapse: collapse; border-spacing: 0; }
 
-  hr { display: block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
 
-  input, select { vertical-align:middle; }
+  input, select { vertical-align: middle; }
 }

data/stylesheets/html5-boilerplate/_styles.scss

@@ -12,13 +12,8 @@ $list-left-margin: 1.8em !default;
 //
 
 @mixin html5-boilerplate-styles {
-  body, select, input, textarea { color: $font-color; }
-
   html { @include force-scrollbar; }
 
-  a, a:active, a:visited { color: $link-color; }
-  a:hover { color: $link-hover-color; }
-
   ul, ol { margin-left: $list-left-margin; }
   ol { list-style-type: decimal; }
 
@@ -70,7 +65,7 @@ $list-left-margin: 1.8em !default;
   }
 }
 
-// align checkboxes, radios, text inputs with their label
+// Align checkboxes, radios, text inputs with their label
 // by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
 @mixin align-input-labels {
   input[type="radio"] { vertical-align: text-bottom; }
@@ -79,19 +74,19 @@ $list-left-margin: 1.8em !default;
   .ie6 input { vertical-align: text-bottom; }
 }
 
-// hand cursor on clickable input elements
+// Hand cursor on clickable input elements
 @mixin hand-cursor-inputs {
   label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
 }
 
-// webkit browsers add a 2px margin outside the chrome of form elements
+// Webkit browsers add a 2px margin outside the chrome of form elements
 @mixin webkit-reset-form-elements {
   button, input, select, textarea { margin: 0; }
 }
 
 // These selection declarations have to be separate.
 // No text-shadow: twitter.com/miketaylr/status/12228805301 
-// Also: hot pink.
+// Also: hot pink!
 @mixin selected-text {
   ::-moz-selection{ background:$selected-background-color; color: $selected-font-color; text-shadow: none; }
   ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
@@ -102,21 +97,21 @@ $list-left-margin: 1.8em !default;
   a:link { -webkit-tap-highlight-color: $selected-background-color; }
 }
 
-// always force a scrollbar in non-IE
+// Always force a scrollbar in non-IE
 @mixin force-scrollbar {
   overflow-y: scroll;
 }
 
 @mixin ie-hacks {
-  // make buttons play nice in IE:    
+  // Make buttons play nice in IE:    
   // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
   button {  width: auto; overflow: visible; }
 
-  // bicubic resizing for non-native sized IMG: 
+  // Bicubic resizing for non-native sized IMG: 
   // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
   .ie7 img { -ms-interpolation-mode: bicubic; }
 
-  .ie6 legend, .ie7 legend { margin-left: -7px; } // thnx ivannikolic!
+  .ie6 legend, .ie7 legend { margin-left: -7px; }
 }
 
 @mixin no-nav-margins {

data/templates/project/_javascripts.html.haml

@@ -1,11 +1,12 @@
--# Grab Google CDN's jQuery
+-# Grab Google CDN's jQuery, with a protocol relative URL
 -# Looks for google_api_key first in ENV['GOOGLE_API_KEY'] then in config/google.yml
+-# remote_jquery and local_jquery helpers use minified jquery unless Rails.env is development
 - if !google_api_key.blank?
   = javascript_include_tag "//www.google.com/jsapi?key=#{google_api_key}"
   :javascript
-    google.load("jquery", "1.4.4");
+    google.load(#{ remote_jquery("1.5.1") });
 - else
-  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
+  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/#{ local_jquery("1.5.1") }"
 
 -# fall back to local jQuery if necessary
 :javascript
@@ -15,6 +16,7 @@
 
 -# Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb
 /[if lt IE 7 ]
+  = javascript_include_tag 'dd_belatedpng.js'
   :javascript
     //DD_belatedPNG.fix('img, .png_bg');
     

data/templates/project/_stylesheets.html.haml

@@ -1,4 +1,4 @@
--# CSS : implied media="all"
+-# CSS: implied media="all"
 = stylesheet_link_tag 'style', :media => 'all'
 
 -# Uncomment if you are specifically targeting less enabled mobile browsers

data/templates/project/files/htaccess

@@ -91,13 +91,12 @@ AddEncoding gzip                       svgz
 AddType application/vnd.ms-fontobject  eot
 AddType font/truetype                  ttf
 AddType font/opentype                  otf
-AddType font/opentype                  woff
-        # ^ hack to avoid chrome console warning: crbug.com/70283
+AddType application/x-font-woff              woff
 
 # assorted types                                      
 AddType image/x-icon                   ico
 AddType image/webp                     webp
-AddType text/cache-manifest            manifest
+AddType text/cache-manifest            appcache manifest
 AddType text/x-component               htc
 AddType application/x-chrome-extension crx
 AddType application/x-xpinstall        xpi
@@ -110,8 +109,8 @@ AddType application/octet-stream       safariextz
 # ----------------------------------------------------------------------
 
 # e.g. Inside of script.combined.js you could have
-#   <!--#include file="jquery.js" -->
-#   <!--#include file="jquery.idletimer.js" -->
+#   <!--#include file="libs/jquery-1.5.0.min.js" -->
+#   <!--#include file="plugins/jquery.idletimer.js" -->
 # and they would be included into this single file
 
 # this is not in use in the boilerplate as it stands. you may
@@ -183,7 +182,7 @@ AddType application/octet-stream       safariextz
 # Perhaps better to whitelist expires rules? Perhaps.
   ExpiresDefault                          "access plus 1 month"
 
-# cache.manifest needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
+# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
   ExpiresByType text/cache-manifest       "access plus 0 seconds"
 
 # your document html 
@@ -210,6 +209,9 @@ AddType application/octet-stream       safariextz
   ExpiresByType video/mp4                 "access plus 1 month"
   ExpiresByType video/webm                "access plus 1 month"
   
+# htc files  (css3pie)
+  ExpiresByType text/x-component          "access plus 1 month"
+  
 # webfonts
   ExpiresByType font/truetype             "access plus 1 month"
   ExpiresByType font/opentype             "access plus 1 month"
@@ -221,9 +223,11 @@ AddType application/octet-stream       safariextz
   ExpiresByType text/css                  "access plus 2 months"
   ExpiresByType application/javascript    "access plus 2 months"
   ExpiresByType text/javascript           "access plus 2 months"
+  
   <IfModule mod_headers.c>
     Header append Cache-Control "public"
   </IfModule>
+  
 </IfModule>
 
 
@@ -353,6 +357,7 @@ Options -MultiViews
 # custom 404 page
 # ----------------------------------------------------------------------
 
+# You can add custom pages to handle 500 or 403 pretty easily, if you like.
 ErrorDocument 404 /404.html
 
 

data/templates/project/index.html.haml

@@ -26,7 +26,7 @@
     -# %link{ :href => "/favicon.ico", :rel => "shortcut icon" }/
     -# %link{ :href => "/apple-touch-icon.png", :rel => "apple-touch-icon" }/
     
-    -# CSS : implied media="all"
+    -# CSS: implied media="all"
     %link{ :href => "css/style.css?v=1", :media => "all", :rel => "stylesheet" }/
     
     -# Uncomment if you are specifically targeting less enabled mobile browsers
@@ -43,8 +43,8 @@
       
     -# 
       Javascript at the bottom for fast page loading
-      Grab Google CDN's jQuery. fall back to local if necessary
-    %script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" }
+      Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary
+    %script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" }
     :javascript
       !window.jQuery && document.write(unescape('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))
     
@@ -52,8 +52,9 @@
     %script{ :src => "js/script.js?v=1" }
     
     /[if lt IE 7 ]
+      %script{ :src => "js/dd_belatedpng.js" }
       :javascript
-        $.getScript("js/dd_belatedpng.js",function(){ DD_belatedPNG.fix('img, .png_bg'); });
+        //DD_belatedPNG.fix('img, .png_bg');
         
     -#  asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
     -#  change the UA-XXXXX-X to be your site's ID