html5-boilerplate 0.1.0

data/README.md

@@ -0,0 +1,81 @@
+Compass Html5 Boilerplate
+=========================
+
+A compass extension based on HTML5 Boilerplate by Paul Irish.
+
+Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
+
+
+Rails Installation
+==================
+
+    gem install html5-boilerplate
+    cd my_rails_project
+    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.)
+
+    app/views/layouts/application.html.haml
+    app/views/layouts/_flashes.html.haml
+    app/views/layouts/_footer.html.haml
+    app/views/layouts/_head.html.haml
+    app/views/layouts/_header.html.haml
+    app/views/layouts/_javascripts.html.haml
+    app/views/layouts/_stylesheets.html.haml
+    
+    app/stylesheets/
+    app/stylesheets/style.scss
+    app/stylesheets/handheld.scss
+    app/stylesheets/html5/_base.scss
+    app/stylesheets/html5/_defaults.scss
+    app/stylesheets/html5/_fonts.scss
+    app/stylesheets/html5/_helpers.scss
+    app/stylesheets/html5/_media.scss
+    
+    public/.htaccess
+    public/404.html
+    public/crossdomain.xml
+    public/robots.txt
+    public/javascripts/dd_belatedpng.js
+    public/javascripts/jquery-1.4.2.min.js
+    public/javascripts/modernizr-1.5.min.js
+    public/javascripts/plugins.js
+    public/javascripts/profiling/
+    public/javascripts/rails.js
+    
+    config/compass.rb
+    config/initializers/compass.rb
+
+
+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:
+
+    require 'html5-boilerplate'
+
+### A few more minor points to store into your brainpan...
+
+If you still have an application.html.erb in your layouts, you might want to loose
+it now so that Rails will use your shiny new application.html.haml layout instead.
+
+This has only been tested on Rails3, but should work fine on Rails2.
+
+
+Stand Alone Installation
+========================
+
+    gem install html5-boilerplate
+    compass create myproject -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
+
+The `--javascripts-dir` and `--css-dir` flags are to keep consistent with the original project layout.
+If you omit them, be sure to edit your javascript and style tags accordingly in index.html.
+
+
+License
+=======
+
+HTML5 Boilerplate by Paul Irish  
+(comments left intact in scss files)
+
+Compass Extension Copyright (c) 2010, Peter Gumeson  
+[http://creativecommons.org/licenses/by/3.0](http://creativecommons.org/licenses/by/3.0)

data/lib/html5-boilerplate.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("html5-boilerplate", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_html5-boilerplate.scss

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

data/stylesheets/html5-boilerplate/_base.scss

@@ -0,0 +1,144 @@
+
+$html5-boilerplate-font-family: sans-serif !default;
+
+$html5-boilerplate-fixed-font-family: "Courier New", monospace, serif !default;
+
+$html5-boilerplate-font-size: 13px !default;
+
+$html5-boilerplate-font-color: #444 !default;  //looks better than black: twitter.com/H_FJ/statuses/11800719859
+
+$html5-boilerplate-link-color: #607890 !default;
+
+$html5-boilerplate-link-hover-color: #036 !default;
+
+$html5-boilerplate-link-active-color: #607890 !default;
+
+$html5-boilerplate-link-visited-color: #607890 !default;
+
+$html5-boilerplate-selected-font-color: #fff !default;
+
+$html5-boilerplate-selected-color: #FF5E99 !default;
+
+$html5-boilerplate-selected-font-color: #fff !default;
+
+
+//
+// minimal base styles
+//
+
+@mixin html5-boilerplate-base {
+  body, select, input, textarea { color: $html5-boilerplate-font-color; }
+
+  h1,h2,h3,h4,h5,h6 { @include optimize-legibility; }
+
+  html {
+    @include font-smoothing;
+    @include force-scrollbar;
+  }
+
+  @include accessible-focus;
+
+  a, a:active, a:visited { color: $html5-boilerplate-link-color; }
+  a:hover { color: $html5-boilerplate-link-hover-color; }
+
+  ul { margin-left:30px; }
+  ol { margin-left:30px; list-style-type: decimal; }
+
+  small { @include small; }
+  strong, th { @include strong; }
+
+  td, td img { vertical-align: top; }
+
+  sub { vertical-align: sub; font-size: smaller; }
+  sup { vertical-align: super; font-size: smaller; }
+
+  @include quoted-pre;
+
+  @include align-input-labels;
+
+  @include hand-cursor-inputs;
+
+  @include selected-text;
+
+  @include webkit-tap-highlight;
+
+  @include ie-hacks;
+}
+
+
+// www.aestheticallyloyal.com/public/optimize-legibility/
+@mixin optimize-legibility {
+  font-weight: bold; text-rendering: optimizeLegibility;
+}
+
+// maxvoltar.com/archive/-webkit-font-smoothing
+@mixin font-smoothing {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
+@mixin accessible-focus {
+  a:active { outline: none; }
+  a:focus { outline: thin dotted; }
+}
+
+@mixin small {
+  font-size: 85%;
+}
+
+@mixin strong {
+  font-weight: bold;
+}
+
+// www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
+@mixin quoted-pre {
+  pre {
+    padding: 15px;
+    white-space: pre; /* CSS2 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+    word-wrap: break-word; /* IE */
+  }
+}
+
+// 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; }
+  input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
+  .ie6 input { vertical-align: text-bottom; }
+}
+
+// hand cursor on clickable input elements
+@mixin hand-cursor-inputs {
+  label, input[type=button], input[type=submit], button { cursor: pointer; }
+}
+
+// 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; }
+}
+
+// j.mp/webkit-tap-highlight-color
+@mixin webkit-tap-highlight {
+  a:link { -webkit-tap-highlight-color: #FF5E99; }
+}
+
+// always force a scrollbar in non-IE
+@mixin force-scrollbar {
+  overflow-y: scroll;
+}
+
+@mixin ie-hacks {
+  // 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: 
+  // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+  .ie7 img { -ms-interpolation-mode: bicubic; }
+}
+

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -0,0 +1,38 @@
+//
+// fonts.css from the YUI Library: developer.yahoo.com/yui/
+//           Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
+// 
+// There are three custom edits:
+//  * remove arial, helvetica from explicit font stack
+//  * make the line-height relative and unit-less
+//  * remove the pre, code styles
+//
+
+@mixin html5-boilerplate-fonts {
+  body { @include body-font; }
+
+  table { @include table-font; }
+
+  select, input, textarea { @include input-font; }
+
+  pre, code, kbd, samp { @include monospace-font; }
+}
+
+@mixin body-font {
+  font:$html5-boilerplate-font-size $html5-boilerplate-font-family; *font-size:small; *font:x-small; line-height:1.22;
+}
+
+@mixin input-font {
+  font:99% $html5-boilerplate-font-family;
+}
+
+@mixin table-font {
+  font-size:inherit; font:100%;
+}
+
+// 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
+@mixin monospace-font {
+  font-family: $html5-boilerplate-fixed-font-family;
+}

data/stylesheets/html5-boilerplate/_handheld.scss

@@ -0,0 +1,10 @@
+@mixin html5-boilerplate-handheld {
+  * { @include handheld; }
+}
+
+@mixin handheld {
+  float: none;       // Screens are not big enough to account for floats
+  font-size: 80%;    // Slightly reducing font size to reduce need to scroll
+  background: #fff;  //  As much contrast as possible
+  color: #000;
+}

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -0,0 +1,48 @@
+//
+// Non-semantic helper classes
+//
+
+@mixin html5-boilerplate-helpers {
+  .ir { @include image-replacement; }
+
+  .hidden { @include hidden; }
+
+  .visuallyhidden { @include visually-hidden; }
+
+  @include magnificent-clearfix;
+}
+
+// for image replacement
+@mixin image-replacement {
+  display:block;
+  text-indent:-999px;
+  overflow:hidden;
+  background-repeat: none;
+}
+
+// Hide for both screenreaders and browsers
+// css-discuss.incutio.com/wiki/Screenreader_Visibility
+@mixin hidden {
+  display:none;
+  visibility:hidden;
+}
+
+// Hide only visually, but have it available for screenreaders
+// www.webaim.org/techniques/css/invisiblecontent/
+// Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal!
+@mixin visually-hidden {
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px);  // IE6, IE7
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Hide visually and from screenreaders, but maintain layout
+@mixin invisible { visibility: hidden; }
+
+// The Magnificent CLEARFIX
+@mixin magnificent-clearfix {
+  .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+  .clearfix { display: inline-block; }
+  * html .clearfix { height: 1%; }  // Hides from IE-mac
+  .clearfix { display: block; }
+}

data/stylesheets/html5-boilerplate/_media.scss

@@ -0,0 +1,63 @@
+@mixin html5-boilerplate-media {
+  @media print {
+    @include media-print;
+  }
+
+  @media all and (orientation:portrait) { 
+    @include media-orientation-portrait;
+  }
+
+  @media all and (orientation:landscape) {
+    @include media-orientation-landscape;
+  }
+
+  @media screen and (max-device-width: 480px) {
+    @include media-mobile;
+  }
+}
+
+//
+// print styles
+// inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
+
+@mixin media-print {
+  * { background: transparent !important; color: #444 !important; text-shadow: none; }
+
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+
+  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; }
+
+  @page { margin: 0.5cm; }
+
+  p, h2, h3 { orphans: 3; widows: 3; }
+
+  h2, h3{ page-break-after: avoid; }
+}
+
+
+//
+// Media queries for responsive design
+//
+
+@mixin media-orientation-portrait {
+  // Style adjustments for portrait mode goes here
+}
+
+@mixin media-orientation-landscape {
+  // Style adjustments for landscape mode goes here
+}
+
+// Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
+// Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
+@mixin media-mobile {
+  // Prevent iOS, WinMobile from adjusting font size
+  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
+}

data/stylesheets/html5-boilerplate/_reset.scss

@@ -0,0 +1,64 @@
+//
+//  style.css contains a reset, font normalization and some base styles.
+//  
+//  credit is left where credit is due.
+//  additionally, 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.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
+//  html5doctor.com/html-5-reset-stylesheet/
+//
+
+@mixin html5-boilerplate-reset {
+  html, body, div, span, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  abbr, address, cite, code,
+  del, dfn, em, img, ins, kbd, q, samp,
+  small, strong, sub, sup, var,
+  b, i,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, figure, footer, header, 
+  hgroup, menu, nav, section, menu,
+  time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+  }
+
+  article, aside, figure, footer, header, 
+  hgroup, nav, section { display:block; }
+
+  nav ul { list-style:none; }
+
+  blockquote, q { quotes:none; }
+
+  blockquote:before, blockquote:after,
+  q:before, q:after { content:''; content:none; }
+
+  a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
+
+  ins { background-color:#ff9; color:#000; text-decoration:none; }
+
+  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 #000; cursor:help; }
+
+  //
+  // tables still need cellspacing="0" in the markup
+  table { border-collapse:collapse; border-spacing:0; }
+
+  hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+
+  input, select { vertical-align:middle; }
+}