html5-boilerplate 0.1.2 → 0.1.3

data/README.md

@@ -4,7 +4,7 @@ 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 Compass projects, or Rails applications with fully integrated
-Haml and Sass (scss) templates.
+Haml and Sass (Scss) templates.
 
 Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
 
@@ -51,10 +51,10 @@ Rails Installation
     config/compass.rb
     config/initializers/compass.rb
 
-The Scss files above will get compiled to your Sass compilation dir:
+The Scss files above will automatically get compiled to your Sass compilation directory:
 
-    public/stylesheets/**/style.css
-    public/stylesheets/**/handheld.css
+    public/stylesheets/style.css
+    public/stylesheets/handheld.css
 
 **Note:** If you already have a config/compass.rb file in your project, you may need to
 manually add the following line to the top:
@@ -110,7 +110,8 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
     nginx.conf
     web.config
 
-The SCSS files above will get compiled to your Sass compilation dir:
+Run `compass watch my_project` and the SCSS files above will automatically
+get compiled to your Sass compilation directory whenever a change is made:
 
     css/style.css
     css/handheld.css

data/VERSION

@@ -1 +1 @@
-0.1.2
+0.1.3

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -14,10 +14,7 @@
 
 // for image replacement
 @mixin image-replacement {
-  display: block;
-  text-indent: -999px;
-  overflow:hidden;
-  background-repeat: none;
+  display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left;
 }
 
 // Hide for both screenreaders and browsers

data/stylesheets/html5-boilerplate/_page.scss

@@ -1,16 +1,22 @@
-$html5-boilerplate-font-color: #444 !default;  //looks better than black: twitter.com/H_FJ/statuses/11800719859
+$font-color: #444 !default;  //looks better than black: twitter.com/H_FJ/statuses/11800719859
 
-$html5-boilerplate-link-color: #607890 !default;
+$link-color: #607890 !default;
 
-$html5-boilerplate-link-hover-color: #036 !default;
+$link-hover-color: #036 !default;
 
-$html5-boilerplate-link-active-color: #607890 !default;
+$link-active-color: #607890 !default;
 
-$html5-boilerplate-link-visited-color: #607890 !default;
+$link-visited-color: #607890 !default;
 
-$html5-boilerplate-selected-font-color: #fff !default;
+$selected-font-color: #fff !default;
 
-$html5-boilerplate-selected-color: #FF5E99 !default;
+$selected-background-color: #FF5E99 !default;
+
+$selected-background-color: #FF5E99 !default;
+
+$valid-input-background-color: #ddf0dd !default;
+
+$invalid-input-background-color: #f0dddd !default;
 
 
 //
@@ -18,17 +24,17 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
 //
 
 @mixin html5-boilerplate-page {
-  body, select, input, textarea { color: $html5-boilerplate-font-color; }
+  body, select, input, textarea { color: $font-color; }
 
-  h1,h2,h3,h4,h5,h6 { @include bold-font; }
+  h1, h2, h3, h4, h5, h6 { @include bold-font; }
 
   html {
     @include font-smoothing;
     @include force-scrollbar;
   }
 
-  a, a:active, a:visited { color: $html5-boilerplate-link-color; }
-  a:hover { color: $html5-boilerplate-link-hover-color; }
+  a, a:active, a:visited { color: $link-color; }
+  a:hover { color: $link-hover-color; }
 
   ul { margin-left: 30px; }
   ol { margin-left: 30px; list-style-type: decimal; }
@@ -48,6 +54,8 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
   @include align-input-labels;
 
   @include hand-cursor-inputs;
+  
+  @include input-validation;
 
   @include selected-text;
 
@@ -89,7 +97,8 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
 // by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
 @mixin align-input-labels {
   input[type="radio"] { vertical-align: text-bottom; }
-  input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
+  input[type="checkbox"] { vertical-align: bottom; }
+  .ie7 input[type="checkbox"] { vertical-align: baseline; }
   .ie6 input { vertical-align: text-bottom; }
 }
 
@@ -98,17 +107,23 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
   label, input[type=button], input[type=submit], button { cursor: pointer; }
 }
 
+/* colors for form validity */
+@mixin input-validation {
+  input:invalid { background-color: $invalid-input-background-color; }
+  input:valid   { background-color: $valid-input-background-color; }
+}
+
 // These selection declarations have to be separate.
 // No text-shadow: twitter.com/miketaylr/status/12228805301 
 // Also: hot pink.
 @mixin selected-text {
-  ::-moz-selection{ background:$html5-boilerplate-selected-color; color: $html5-boilerplate-selected-font-color; text-shadow: none; }
-  ::selection { background: $html5-boilerplate-selected-color; color: $html5-boilerplate-selected-font-color; text-shadow: none; }
+  ::-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; }
 }
 
 // j.mp/webkit-tap-highlight-color
 @mixin webkit-tap-highlight {
-  a:link { -webkit-tap-highlight-color: $html5-boilerplate-selected-color; }
+  a:link { -webkit-tap-highlight-color: $selected-background-color; }
 }
 
 // always force a scrollbar in non-IE

data/stylesheets/html5-boilerplate/_reset.scss

@@ -35,7 +35,7 @@
   }                  
 
   article, aside, details, figcaption, figure,
-  footer, header, hgroup, menu, nav, section, summary { 
+  footer, header, hgroup, menu, nav, section { 
       display:block;
   }
 
@@ -54,7 +54,7 @@
 
   del { text-decoration: line-through; }
 
-  abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
+  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
 
   //
   // tables still need cellspacing="0" in the markup

data/templates/project/partials/_base.scss

@@ -1,15 +1,19 @@
 // This file must be imported before html5-boilerplate/page
 
-$html5-boilerplate-font-color: #444;
+$font-color: #444;
 
-$html5-boilerplate-link-color: #607890;
+$link-color: #607890;
 
-$html5-boilerplate-link-hover-color: #036;
+$link-hover-color: #036;
 
-$html5-boilerplate-link-active-color: #607890;
+$link-active-color: #607890;
 
-$html5-boilerplate-link-visited-color: #607890;
+$link-visited-color: #607890;
 
-$html5-boilerplate-selected-font-color: #fff;
+$selected-font-color: #fff;
 
-$html5-boilerplate-selected-color: #FF5E99;
+$selected-background-color: #FF5E99;
+
+$valid-input-background-color: #ddf0dd;
+
+$invalid-input-background-color: #f0dddd;

data/templates/project/partials/_html5_boilerplate.scss

@@ -13,17 +13,17 @@
 //--------------------------------
 // Page
 //--------------------------------
-body, select, input, textarea { color: $html5-boilerplate-font-color; }
+body, select, input, textarea { color: $font-color; }
 
-h1,h2,h3,h4,h5,h6 { @include bold-font; }
+h1, h2, h3, h4, h5, h6 { @include bold-font; }
 
 html {
   @include font-smoothing;
   @include force-scrollbar;
 }
 
-a, a:active, a:visited { color: $html5-boilerplate-link-color; }
-a:hover { color: $html5-boilerplate-link-hover-color; }
+a, a:active, a:visited { color: $link-color; }
+a:hover { color: $link-hover-color; }
 
 ul { margin-left: 30px; }
 ol { margin-left: 30px; list-style-type: decimal; }
@@ -44,6 +44,8 @@ sup { vertical-align: super; font-size: smaller; }
 
 @include hand-cursor-inputs;
 
+@include input-validation;
+
 @include selected-text;
 
 @include webkit-tap-highlight;

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 1
-  - 2
-  version: 0.1.2
+  - 3
+  version: 0.1.3
 platform: ruby
 authors: 
 - Peter Gumeson
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-08-19 00:00:00 -07:00
+date: 2010-08-20 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency