html5-boilerplate 0.2.1 → 0.2.2

data/VERSION

@@ -1 +1 @@
-0.2.1
+0.2.2

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -5,9 +5,10 @@ $base-line-height: 1.231 !default;
 //
 // fonts.css from the YUI Library: developer.yahoo.com/yui/fonts
 //
-// There are two custom edits:
+// There are three custom edits:
 // * remove arial, helvetica from explicit font stack
 // * we normalize monospace styles ourselves
+// * table font-size is reset in the HTML5 reset above so there is no need to repeat
 //
 // Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
 //
@@ -20,8 +21,6 @@ $base-line-height: 1.231 !default;
     *font-size: small;
   }
 
-  table { font-size: inherit; font: 100%; }
-
   select, input, textarea, button { font: 99% $family; }
 
   // normalize monospace sizing 

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -53,7 +53,7 @@
 // Hide visually and from screenreaders, but maintain layout
 @mixin invisible { visibility: hidden; }
 
-// The Magnificent CLEARFIX
+// The Magnificent CLEARFIX << j.mp/phayesclearfix
 @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/_media.scss

@@ -28,12 +28,14 @@
   a:after { content: " (" attr(href) ")"; } 
 
   abbr:after { content: " (" attr(title) ")"; }
-  
+
   .ir a:after { content: ""; }  // Don't show links for images
-  
+
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-  
-  img { page-break-inside: avoid; }
+
+  thead { display: table-header-group; }  // css-discuss.incutio.com/wiki/Printing_Tables
+
+  tr, img { page-break-inside: avoid; }
 
   @page { margin: 0.5cm; }
 

data/stylesheets/html5-boilerplate/_styles.scss

@@ -25,9 +25,11 @@ $list-left-margin: 1.8em !default;
   td, td img { vertical-align: top; }
 
   sub { @include sub; }
-  
+
   sup { @include sup; }
 
+  textarea { overflow: auto; }  // thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
+
   @include accessible-focus;
 
   @include quoted-pre;
@@ -36,6 +38,8 @@ $list-left-margin: 1.8em !default;
 
   @include hand-cursor-inputs;
 
+  @include webkit-reset-form-elements;
+
   @include selected-text;
 
   @include webkit-tap-highlight;
@@ -81,6 +85,11 @@ $list-left-margin: 1.8em !default;
   label, input[type=button], input[type=submit], button { cursor: pointer; }
 }
 
+// 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.
@@ -107,4 +116,6 @@ $list-left-margin: 1.8em !default;
   // 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!
 }

data/templates/project/_footer.html.haml

@@ -1,2 +1,2 @@
 %small.copyright
-  Copyright © #{Date.today.year}, All rights reserved.
+  Copyright © #{Date.today.year}

data/templates/project/_head.html.haml

@@ -1,26 +1,23 @@
 %head
-  %meta{:charset => "utf-8"}/
-  
-  -# www.phpied.com/conditional-comments-block-downloads/
-  /[if IE]
+  %meta{ :charset => "utf-8" }/
   
   -# 
     Always force latest IE rendering engine (even in intranet) & Chrome Frame
     Remove this if you use the .htaccess
-  %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+  %meta{ :content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible" }/
   
   %title
-    == #{controller.controller_name.titleize} - #{controller.action_name.titleize}
+    == #{ controller.controller_name.titleize } - #{ controller.action_name.titleize }
     
-  %meta{:content => "", :name => "description"}/
-  %meta{:content => "", :name => "author"}/
+  %meta{ :content => "", :name => "description" }/
+  %meta{ :content => "", :name => "author" }/
   
   -# Mobile viewport optimized: j.mp/bplateviewport
-  %meta{:content => "width=device-width; initial-scale=1.0", :name => "viewport"}/
+  %meta{ :content => "width=device-width; initial-scale=1.0", :name => "viewport" }/
   
   -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
-  -# %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
-  -# %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
+  -# %link{ :href => "/favicon.ico", :rel => "shortcut icon" }/
+  -# %link{ :href => "/apple-touch-icon.png", :rel => "apple-touch-icon" }/
   
   = render :partial => 'layouts/stylesheets'
   

data/templates/project/_javascripts.html.haml

@@ -15,7 +15,9 @@
 
 /[if lt IE 7 ]
   = javascript_include_tag 'dd_belatedpng'
-  
+  :javascript
+    DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images
+    
 -#  Append your own using content_for :javascripts
 = yield :javascripts
 

data/templates/project/_stylesheets.html.haml

@@ -1,6 +1,8 @@
 -# CSS : implied media="all"
 = stylesheet_link_tag 'style', :media => 'all'
--# For the less-enabled mobile browsers like Opera Mini
-= stylesheet_link_tag 'handheld', :media => 'handheld'
+
+-# Uncomment if you are specifically targeting less enabled mobile browsers
+-#= stylesheet_link_tag 'handheld', :media => 'handheld'
+
 -# Append your own using content_for :stylesheets
 = yield :stylesheets

data/templates/project/application.html.haml

@@ -1,14 +1,8 @@
 !!! 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"}
+-# http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+-ie_html :lang => 'en', :class => 'no-js' do
   = render :partial => 'layouts/head'
-  
-  - ie_body :class => "#{controller.controller_name}" do
+  %body{ :class => "#{controller.controller_name}" }
     #container
       %header#header
         = render :partial => 'layouts/header'
@@ -17,6 +11,5 @@
         = yield
       %footer#footer
         = render :partial => 'layouts/footer'
-        
     -# Javascript at the bottom for fast page loading
     = render :partial => 'layouts/javascripts'

data/templates/project/files/htaccess

@@ -16,10 +16,13 @@
   </IfModule>
 </IfModule>
 
+<IfModule mod_headers.c>
 # 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
-<IfModule mod_headers.c>
   Header append Vary User-Agent
+# Ensure proxy caching, since gzip is accept-encoding dependent.
+  Header append Vary Accept-Encoding
+# Cache control is set only if mod_headers is enabled, so that's unncessary to declare
 </IfModule>
 
 # hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
@@ -87,7 +90,8 @@ AddType text/x-component              htc
 <IfModule mod_deflate.c>
 
 # html, txt, css, js, json, xml, htc:
-  AddOutputFilterByType DEFLATE text/html text/plain text/css application/x-javascript text/javascript application/javascript application/json text/xml application/xml text/x-component
+  AddOutputFilter DEFLATE text/html text/plain text/css text/javascript application/javascript application/json 
+  AddOutputFilter DEFLATE text/xml application/xml text/x-component
 
 # webfonts and svg:
   <FilesMatch "\.(ttf|otf|eot|svg)$" >
@@ -107,7 +111,7 @@ AddType text/x-component              htc
 #   "access plus 1 week" or so
 
 <IfModule mod_expires.c>
-  Header set cache-control: public
+  Header set Cache-Control "public"
   ExpiresActive on
 
 # Perhaps better to whitelist expires rules? Perhaps.
@@ -184,8 +188,8 @@ FileETag None
   RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
 </IfModule>
 
-# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist (e.g. “/blog/hello”)
-#   webmasterworld.com/apache/3808792.htm
+# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist 
+#   e.g. /blog/hello : webmasterworld.com/apache/3808792.htm
 Options -MultiViews 
 # -Indexes will have Apache block users from browsing folders without a default document
 # Options -Indexes

data/templates/project/files/nginx.conf

@@ -28,7 +28,7 @@ http {
   gzip_min_length 1100;
   gzip_buffers     4 8k;
   gzip_proxied any;
-  gzip_types text/html text/plain text/xml application/xml application/xml+rss text/css application/x-javascript text/javascript application/javascript application/json;
+  gzip_types text/html text/plain text/xml application/xml application/xml+rss text/css text/javascript application/javascript application/json;
 
   gzip_static on;
  
@@ -45,7 +45,7 @@ http {
 
     #static assets
 	location ~* ^.+\.(manifest)$ {
-      expires 0S;
+      expires -1D;
       root   /sites/example.com/public;
       access_log logs/static.log;
     }

data/templates/project/files/web.config

@@ -93,7 +93,6 @@
 					<add mimeType="text/*" enabled="true" />
 					<add mimeType="message/*" enabled="true" />
 					<add mimeType="application/javascript" enabled="true" />
-					<add mimeType="application/x-javascript" enabled="true" />
 					<add mimeType="application/json" enabled="true" />
 					<add mimeType="*/*" enabled="false" />
 				</staticTypes>

data/templates/project/index.html.haml

@@ -1,43 +1,41 @@
 !!! 5
-%html.no-js{:lang => "en"}
+-# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!-->
+%html.no-js{ :lang => "en" }
+  <!--<![endif]-->
   %head
-    %meta{:charset => "utf-8"}/
-    -# www.phpied.com/conditional-comments-block-downloads/
-    /[if IE]
+    %meta{ :charset => "utf-8" }/
     
     -# 
       Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess
-    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+    %meta{ :content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible" }/
     
     %title
-    %meta{:content => "", :name => "description"}/
-    %meta{:content => "", :name => "author"}/
+    %meta{ :content => "", :name => "description" }/
+    %meta{ :content => "", :name => "author" }/
     
     -# Mobile viewport optimized: j.mp/bplateviewport
-    %meta{:content => "width=device-width; initial-scale=1.0", :name => "viewport"}/
+    %meta{ :content => "width=device-width; initial-scale=1.0", :name => "viewport" }/
     
     -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
-    -# %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
-    -# %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
+    -# %link{ :href => "/favicon.ico", :rel => "shortcut icon" }/
+    -# %link{ :href => "/apple-touch-icon.png", :rel => "apple-touch-icon" }/
     
     -# CSS : implied media="all"
-    %link{:href => "css/style.css?v=1", :media => "all", :rel => "stylesheet"}/
+    %link{ :href => "css/style.css?v=1", :media => "all", :rel => "stylesheet" }/
     
-    -# For the less-enabled mobile browsers like Opera Mini
-    %link{:href => "css/handheld.css?v=1", :media => "handheld", :rel => "stylesheet"}/
+    -# Uncomment if you are specifically targeting less enabled mobile browsers
+    -# %link{ :href => "css/handheld.css?v=1", :media => "handheld", :rel => "stylesheet" }/
     
     -# All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects
-    %script{:src => "js/modernizr-1.5.min.js"}
-  
-  -# 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)]><!-->
+    %script{ :src => "js/modernizr-1.5.min.js" }
+    
   %body
-    <!--<![endif]-->
     #container
       %header
       #main
@@ -46,19 +44,21 @@
     -# 
       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.2/jquery.min.js"}
+    %script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" }
     :javascript
       !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
     
-    %script{:src => "js/plugins.js?v=1"}
-    %script{:src => "js/script.js?v=1"}
+    %script{ :src => "js/plugins.js?v=1" }
+    %script{ :src => "js/script.js?v=1" }
     
     /[if lt IE 7 ]
-      <script src="js/dd_belatedpng.js?v=1"></script>
-    
+      %script{ :src => "js/dd_belatedpng.js" }
+      :javascript
+        DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images
+        
     -# yui profiler and profileviewer - remove for production
-    %script{:src => "js/profiling/yahoo-profiling.min.js?v=1"}
-    %script{:src => "js/profiling/config.js?v=1"}
+    %script{ :src => "js/profiling/yahoo-profiling.min.js?v=1" }
+    %script{ :src => "js/profiling/config.js?v=1" }
     
     -#  asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
     -#  change the UA-XXXXX-X to be your site's ID

data/templates/project/partials/_page.scss

@@ -23,11 +23,13 @@ small {
 
 // Add the 'required' attribute on your
 // inputs if you want to use these
-input:valid {}
-input:invalid {
+input:valid, textarea:valid {}
+input:invalid, textarea:invalid {
   @include border-radius(1px);
   @include box-shadow(red, 0, 0, 5px, 0);
 }
+.no-boxshadow input:invalid,
+.no-boxshadow textarea:invalid { background-color: #f0dddd; }
 
 
 //-----------------------------------

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 2
-  - 1
-  version: 0.2.1
+  - 2
+  version: 0.2.2
 platform: ruby
 authors: 
 - Peter Gumeson
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-09-03 00:00:00 -07:00
+date: 2010-09-10 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency