updated to HTML5 Boilerplate v2.0

Author: nathos

config.ru

@@ -31,6 +31,7 @@ if ENV['RACK_ENV'] != 'production'
 end
 
 # Tweak some Haml configuration options (HTML5 output, double quoted attributes)
+# Remove this if you choose to disable Haml
 require 'haml'
 class Haml::Engine
   alias old_initialize initialize

stylesheets/partials/h5bp/_main.sass

@@ -1,46 +1,46 @@
-// converted from HTML5 Boilerplate - pre-release w/ normalization - 06/28/11
+// converted from HTML5 Boilerplate v2.0 - 08/10/2011
 
 // Default colors
-$h5bp-text-selection: #FF5E99 !default
-$h5bp-webkit-tap:     #FF5E99 !default
+$h5bp-text-selection: #fe57a1 !default
+$h5bp-webkit-tap:     #fe57a1 !default
 $h5bp-link:           #00e !default
-$h5bp-visited-link:   #551a8b !default
+$h5bp-link-hover:     #06e !default
+$h5bp-link-visited:   #551a8b !default
 
 // HTML5 ✰ Boilerplate
 // 
 // What follows is the result of much research on cross-browser styling. 
 // Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 // Kroc Camen, and the H5BP dev community and team.
+// 
+// Detailed information about this CSS: h5bp.com/css
 
 
 // ==========================================================================
-// HTML5 element display
+// HTML5 display definitions
 // ==========================================================================
 
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
   display: block
-audio[controls], canvas, video
+audio, canvas, video
   display: inline-block
   *display: inline
   *zoom: 1
-
+audio:not([controls])
+  display: none
+[hidden]
+  display: none
 
 // ==========================================================================
 // Base
 // ==========================================================================
 
 // 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
-//    http://clagnut.com/blog/348/#c790
 // 2. Force vertical scrollbar in non-IE
-// 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
-//    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
-// 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
-//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
-
+// 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 html
   font-size: 100%
   overflow-y: scroll
-  -webkit-tap-highlight-color: $h5bp-text-selection
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
 
@@ -53,10 +53,9 @@ body, button, input, select, textarea
   font-family: sans-serif
   color: #222
 
+// Remove text-shadow in selection highlight: h5bp.com/i
 // These selection declarations have to be separate
-// No text-shadow: twitter.com/miketaylr/status/12228805301
-// Also: hot pink!
-
+// Also: hot pink! (or customize the background color to match your design)
 ::-moz-selection
   background: $h5bp-text-selection
   color: #fff
@@ -74,11 +73,13 @@ body, button, input, select, textarea
 a
   color: $h5bp-link
   &:visited
-    color: $h5bp-visited-link
+    color: $h5bp-link-visited
+  &:hover
+    color: $h5bp-link-hover
   &:focus
     outline: thin dotted
 
-  // Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test
+  // Improve readability when focused and hovered in all browsers: h5bp.com/h
   &:hover, &:active
     outline: 0
 
@@ -118,7 +119,7 @@ mark
   font-style: italic
   font-weight: bold
 
-// Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59
+// Redeclare monospace font family: h5bp.com/j
 pre, code, kbd, samp
   font-family: monospace, monospace
   _font-family: 'courier new', monospace
@@ -139,7 +140,7 @@ q
 small
   font-size: 85%
 
-// Position subscript and superscript content without affecting line-height: gist.github.com/413930
+// Position subscript and superscript content without affecting line-height: h5bp.com/k
 sub, sup
   font-size: 75%
   line-height: 0
@@ -162,6 +163,7 @@ dd
   margin: 0 0 0 40px
 nav ul, nav ol
   list-style: none
+  list-style-image: none
   margin: 0
   padding: 0
 
@@ -170,15 +172,14 @@ nav ul, nav ol
 // Embedded content
 // ==========================================================================
 
-// Improve image quality when scaled in IE7
-// code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
-
+// 1. Improve image quality when scaled in IE7: h5bp.com/d
+// 2. Remove the gap between images and borders on image containers: h5bp.com/e
 img
   border: 0
   -ms-interpolation-mode: bicubic
+  vertical-align: middle
 
 // Correct overflow displayed oddly in IE9 
-
 svg:not(:root)
   overflow: hidden
 
@@ -202,22 +203,20 @@ fieldset
   margin: 0
   padding: 0
 
+// Indicate that 'label' will shift focus to the associated form element
+label
+  cursor: pointer
+
 // 1. Correct color not inheriting in IE6/7/8/9 
 // 2. Correct alignment displayed oddly in IE6/7 
-
 legend
   border: 0
   *margin-left: -7px
   padding: 0
 
-// Indicate that 'label' will shift focus to the associated form element
-label
-  cursor: pointer
-
 // 1. Correct font-size not inheriting in all browsers
 // 2. Remove margins in FF3/4 S5 Chrome
 // 3. Define consistent vertical alignment display in all browsers
-
 button, input, select, textarea
   font-size: 100%
   margin: 0
@@ -226,38 +225,42 @@ button, input, select, textarea
 
 // 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 // 2. Correct inner spacing displayed oddly in IE6/7
-
 button, input
   line-height: normal
   *overflow: visible
+  
+// Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+table button, table input
+  *overflow: auto
 
 // 1. Display hand cursor for clickable form elements
 // 2. Allow styling of clickable form elements in iOS
-
 button, input[type="button"], input[type="reset"], input[type="submit"]
   cursor: pointer
   -webkit-appearance: button
 
 // Consistent box sizing and appearance
-
 input[type="checkbox"], input[type="radio"]
   box-sizing: border-box
 input[type="search"]
+  -webkit-appearance: textfield
   -moz-box-sizing: content-box
   -webkit-box-sizing: content-box
   box-sizing: content-box
+input[type="search"]::-webkit-search-decoration
+  -webkit-appearance: none
 
-//  Remove inner padding and border in FF3/4
-//  www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
-
+// Remove inner padding and border in FF3/4: h5bp.com/l 
 button::-moz-focus-inner, input::-moz-focus-inner
   border: 0
   padding: 0
 
-// Remove default vertical scrollbar in IE6/7/8/9 */
+// 1. Remove default vertical scrollbar in IE6/7/8/9 
+// 2. Allow only vertical resizingtextarea
 textarea
   overflow: auto
   vertical-align: top
+  resize: vertical
 
 // Colors for form validity
 input:valid, textarea:valid
@@ -272,4 +275,6 @@ input:invalid, textarea:invalid
 
 table
   border-collapse: collapse
-  border-spacing: 0
+  border-spacing: 0
+td
+  vertical-align: top

stylesheets/partials/h5bp/_mediaqueries.sass

@@ -19,16 +19,15 @@
 // ==========================================================================
  
 @media print
-  // Black prints faster: sanbeiji.com/archives/953
-  a, a:visited
-    color: #444 !important
-    text-decoration: underline
+  // Black prints faster: h5bp.com/s
   *
     background: transparent !important
     color: black !important
     text-shadow: none !important
     filter: none !important
     -ms-filter: none !important
+  a, a:visited
+    text-decoration: underline
   a[href]:after
     content: " (" attr(href) ")"
   abbr[title]:after
@@ -40,7 +39,7 @@
     border: 1px solid #999
     page-break-inside: avoid
   thead
-    // css-discuss.incutio.com/wiki/Printing_Tables
+    // h5bp.com/t
     display: table-header-group
   tr, img
     page-break-inside: avoid

stylesheets/partials/h5bp/_nonsemantichelpers.sass

@@ -6,22 +6,22 @@
 // For image replacement
 .ir
   display: block
+  border: 0
   text-indent: -999em
   overflow: hidden
+  background-color: transparent
   background-repeat: no-repeat
   text-align: left
   direction: ltr
   br
     display: none
 
-// Hide for both screenreaders and browsers:
-// css-discuss.incutio.com/wiki/Screenreader_Visibility
+// Hide from both screenreaders and browsers: h5bp.com/u
 .hidden
-  display: none
+  display: none !important
   visibility: hidden
 
-// Hide only visually, but have it available for screenreaders: by Jon Neal.
-// www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden
+// Hide only visually, but have it available for screenreaders: h5bp.com/v
 .visuallyhidden
   border: 0
   clip: rect(0 0 0 0)
@@ -32,7 +32,7 @@
   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
+  // Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
   &.focusable:active, &.focusable:focus
     clip: auto
     height: auto

stylesheets/screen.sass

@@ -5,10 +5,11 @@
 @import "compass"
 
 // HTML5 Boilerplate Colors - uncomment to override defaults
-// $h5bp-text-selection: #FF5E99
-// $h5bp-webkit-tap:     #FF5E99
+// $h5bp-text-selection: #fe57a1
+// $h5bp-webkit-tap:     #fe57a1
 // $h5bp-link:           #00e
-// $h5bp-visited-link:   #551a8b
+// $h5bp-link-hover:     #06e
+// $h5bp-link-visited:   #551a8b
 
 @import "partials/h5bp/main"