html5-boilerplate 0.1.6 → 0.1.7

data/README.md

@@ -3,7 +3,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
+stand-alone HTML5 projects, or Rails applications with fully integrated HTML5
 Haml and Sass (Scss) templates.
 
 Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
@@ -28,8 +28,9 @@ Rails Installation
     
     app/stylesheets/style.scss
     app/stylesheets/handheld.scss
-    app/stylesheets/partials/_base.scss
-    app/stylesheets/partials/_html5_boilerplate.scss
+    app/stylesheets/partials/_defaults.scss
+    app/stylesheets/partials/_example.scss
+    app/stylesheets/partials/_page.scss
     
     public/404.html
     public/.htaccess
@@ -93,8 +94,9 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
     
     src/style.scss
     src/handheld.scss
-    src/partials/_base.scss
-    src/partials/_html5_boilerplate.scss
+    src/partials/_defaults.scss
+    src/partials/_example.scss
+    src/partials/_page.scss
     
     js/dd_belatedpng.js
     js/jquery-1.4.2.min.js

data/VERSION

@@ -1 +1 @@
-0.1.6
+0.1.7

data/stylesheets/_html5-boilerplate.scss

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

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

@@ -1,63 +1,32 @@
 $font-color: #444 !default;  //looks better than black: twitter.com/H_FJ/statuses/11800719859
-
 $link-color: #607890 !default;
-
 $link-hover-color: #036 !default;
-
 $link-active-color: #607890 !default;
-
 $link-visited-color: #607890 !default;
-
 $selected-font-color: #fff !default;
-
-$selected-background-color: #ff5e99 !default;
-
 $selected-background-color: #ff5e99 !default;
-
-$valid-input-background-color: #ddf0dd !default;
-
-$invalid-input-background-color: #f0dddd !default;
-
-$invalid-input-shadow-color: red !default;
-
-
-@import "compass/css3/border-radius";
-@import "compass/css3/box-shadow";
-
+$list-left-margin: 1.8em !default;
 
 //
-// minimal base styles
+// Minimal base styles
 //
 
-@mixin html5-boilerplate-page {
+@mixin html5-boilerplate-base {
   body, select, input, textarea { color: $font-color; }
 
-  h1, h2, h3, h4, h5, h6 { @include bold-font; }
-
-  html {
-    @include force-scrollbar;
-  }
+  html { @include force-scrollbar; }
 
   a, a:active, a:visited { color: $link-color; }
   a:hover { color: $link-hover-color; }
 
-  ul, ol { margin-left: 1.8em; }
+  ul, ol { margin-left: $list-left-margin; }
   ol { list-style-type: decimal; }
 
-  small { @include small-font; }
-  strong, th { @include bold-font; }
-
   td, td img { vertical-align: top; }
 
-  sub { vertical-align: sub; font-size: smaller; }
-  sup { vertical-align: super; font-size: smaller; }
-
-  input:valid {
-    @include valid-input;
-  }
-  input:invalid {
-    @include invalid-input;
-  }
+  sub { @include sub; }
+  
+  sup { @include sup; }
 
   @include accessible-focus;
 
@@ -74,9 +43,12 @@ $invalid-input-shadow-color: red !default;
   @include ie-hacks;
 }
 
-// maxvoltar.com/archive/-webkit-font-smoothing
-@mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
+@mixin sub{ 
+  vertical-align: sub; font-size: smaller;
+}
+
+@mixin sup{ 
+  vertical-align: super; font-size: smaller;
 }
 
 // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
@@ -84,14 +56,6 @@ $invalid-input-shadow-color: red !default;
   a:hover, a:active { outline: none; }
 }
 
-@mixin small-font {
-  font-size: 85%;
-}
-
-@mixin bold-font {
-  font-weight: bold;
-}
-
 // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
 @mixin quoted-pre {
   pre {
@@ -117,14 +81,6 @@ $invalid-input-shadow-color: red !default;
   label, input[type=button], input[type=submit], button { cursor: pointer; }
 }
 
-// colors for form validity
-@mixin valid-input {
-}
-@mixin invalid-input {
-  @include border-radius(1px);
-  @include box-shadow($invalid-input-shadow-color, 0, 0, 5px, 0);
-}
-
 // These selection declarations have to be separate.
 // No text-shadow: twitter.com/miketaylr/status/12228805301 
 // Also: hot pink.

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -1,21 +1,53 @@
+$base-font-family: unquote("sans-serif") !default;
+$base-font-size: 13px !default;
+$base-line-height: 1.231 !default;
+
 //
-// fonts.css from the YUI Library: developer.yahoo.com/yui/
-// Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
+// fonts.css from the YUI Library: developer.yahoo.com/yui/fonts
 //
 // There are two custom edits:
 // * remove arial, helvetica from explicit font stack
 // * we normalize monospace styles ourselves
 //
+// Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
+//
 
-@mixin html5-boilerplate-fonts {
-  body { font:13px/1.231 sans-serif; *font-size:small; } // hack retained to preserve specificity
+@mixin html5-boilerplate-fonts($family: $base-font-family, $size: $base-font-size, $line-height: $base-line-height) {
+  body { 
+    font-size: $size;
+    font-family: $family;
+    line-height: $line-height; // hack retained to preserve specificity
+    *font-size: small;
+  }
 
-  table { font-size:inherit; font: 100%; }
+  table { font-size: inherit; font: 100%; }
 
-  select, input, textarea, button { font:99% sans-serif; }
+  select, input, textarea, button { font: 99% $family; }
 
   // normalize monospace sizing 
   // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
   // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
   pre, code, kbd, samp { font-family: monospace, sans-serif; }
 }
+
+// maxvoltar.com/archive/-webkit-font-smoothing
+@mixin font-smoothing {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Sets the font size specified in pixels using percents so that the base
+// font size changes and 1em has the correct value. When nesting font size
+// declarations, within the DOM tree, the base_font_size must be the parent's
+// effective font-size in pixels.
+// Usage Examples:
+//   .big
+//     +font-size(16px)
+//   .bigger
+//     +font-size(18px)
+//   .big .bigger
+//     +font-size(18px, 16px)
+//
+// For more information see the table found at http://developer.yahoo.com/yui/fonts/#fontsize
+@mixin font-size($size, $base-font-size: $base-font-size) {
+  font-size: percentage($size / $base-font-size);
+}

data/stylesheets/html5-boilerplate/_media.scss

@@ -12,7 +12,7 @@
   }
 
   @media screen and (max-device-width: 480px) {
-    @include media-mobile(false);
+    @include media-mobile;
   }
 }
 
@@ -60,6 +60,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; }
   }
 }

data/templates/project/_footer.html.haml

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

data/templates/project/manifest.rb

@@ -2,8 +2,9 @@ description "Compass extention for HTML5 Boilerplate located at http://html5boil
 
 stylesheet 'style.scss', :media => 'screen, projection'
 stylesheet 'handheld.scss', :media => 'handheld'
-stylesheet 'partials/_base.scss'
-stylesheet 'partials/_html5_boilerplate.scss'
+stylesheet 'partials/_defaults.scss'
+stylesheet 'partials/_example.scss'
+stylesheet 'partials/_page.scss'
 
 if Compass.configuration.project_type == :rails
   file 'application.html.haml', :to => 'app/views/layouts/application.html.haml'

data/templates/project/partials/{_base.scss → _defaults.scss}

@@ -1,4 +1,10 @@
-// This file must be imported before html5-boilerplate/page
+// 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;
 
@@ -14,8 +20,4 @@ $selected-font-color: #fff;
 
 $selected-background-color: #FF5E99;
 
-$valid-input-background-color: #ddf0dd;
-
-$invalid-input-background-color: #f0dddd;
-
-$invalid-input-shadow-color: red;
+$list-left-margin: 1.8em;

data/templates/project/partials/{_html5_boilerplate.scss → _example.scss}

@@ -1,46 +1,33 @@
 //--------------------------------
-// Reset
+// CSS Reset
 //--------------------------------
 @include html5-boilerplate-reset;
 
 
 //--------------------------------
-// Fonts
+// Base Fonts
 //--------------------------------
-@include html5-boilerplate-fonts;
+@include html5-boilerplate-fonts($base-font-family, $base-font-size, $base-line-height);
 
 
 //--------------------------------
-// Page
+// Minimal Base Styles
 //--------------------------------
 body, select, input, textarea { color: $font-color; }
 
-h1, h2, h3, h4, h5, h6 { @include bold-font; }
-
-html {
-  @include force-scrollbar;
-}
+html { @include force-scrollbar; }
 
 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; }
-
-small { @include small-font; }
-strong, th { @include bold-font; }
+ul, ol { margin-left: $list-left-margin; }
+ol { list-style-type: decimal; }
 
 td, td img { vertical-align: top; }
 
-sub { vertical-align: sub; font-size: smaller; }
-sup { vertical-align: super; font-size: smaller; }
+sub { @include sub; }
 
-input:valid {
-  @include valid-input;
-}
-input:invalid {
-  @include invalid-input;
-}
+sup { @include sup; }
 
 @include accessible-focus;
 

data/templates/project/partials/_page.scss

@@ -0,0 +1,43 @@
+@import "compass/css3";
+
+//-----------------------------------------------
+// The following html5-boilerplate styles should
+// probably be customized for each site
+//-----------------------------------------------
+
+h1, h2, h3, h4, h5, h6 {
+  // This might not be the best choice if you are
+  // embedding font faces that are already bold
+  font-weight: bold;
+}
+
+strong, th {
+  font-weight: bold;
+}
+
+small {
+  @include font-size(11px);  // This is approx 85%
+}
+
+// Add the 'required' attribute on your
+// inputs if you want to use these
+input:valid {}
+input:invalid {
+  @include border-radius(1px);
+  @include box-shadow(red, 0, 0, 5px, 0);
+}
+
+
+//-----------------------------------
+// Add your own custom styles below
+//-----------------------------------
+
+body {}
+
+#container {}
+
+header {}
+
+#main {}
+
+footer {}

data/templates/project/style.scss

@@ -1,22 +1,25 @@
 // First, set some default constants
 // to be used by html5-boilerplate
-@import "partials/base";
+@import "partials/defaults";
 
 // Then, we'll import the compass extension
 @import "html5-boilerplate";
 
-// Now you can choose to include the
-// whole enchilada with just one line
+// Now you can choose to include the whole
+// enchilada by uncommeting this line
 //@include html5-boilerplate;
 
 // Or, you can pick and choose only the
 // sections you want to include
 //@include html5-boilerplate-reset;
 //@include html5-boilerplate-fonts;
-//@include html5-boilerplate-page;
+//@include html5-boilerplate-base;
 //@include html5-boilerplate-helpers;
 //@include html5-boilerplate-media;
 
-// Or, you can import this partial if you want
-// full controll over which mixins to include
-@import "partials/html5_boilerplate";
+// Or else, you can import this partial if you
+// want more controll over which mixins to use
+@import "partials/example";
+
+// Finally, put your own styles in this partial
+@import "partials/page";

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 1
-  - 6
-  version: 0.1.6
+  - 7
+  version: 0.1.7
 platform: ruby
 authors: 
 - Peter Gumeson
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-08-27 00:00:00 -07:00
+date: 2010-08-29 00:00:00 -07:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -47,11 +47,11 @@ files:
 - templates/project/files/htaccess
 - 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/_page.scss
 - stylesheets/html5-boilerplate/_reset.scss
 - templates/project/_flashes.html.haml
 - templates/project/_footer.html.haml
@@ -79,8 +79,9 @@ files:
 - templates/project/javascripts/profiling/yahoo-profiling.min.js
 - templates/project/javascripts/rails.js
 - templates/project/manifest.rb
-- templates/project/partials/_base.scss
-- templates/project/partials/_html5_boilerplate.scss
+- templates/project/partials/_defaults.scss
+- templates/project/partials/_example.scss
+- templates/project/partials/_page.scss
 - templates/project/style.scss
 has_rdoc: true
 homepage: http://github.com/sporkd/compass-html5-boilerplate