compass-h5bp 0.0.5 → 0.1.0

data/.gitignore

@@ -4,3 +4,4 @@ Gemfile.lock
 pkg/*
 .rvmrc
 test/project/css/*.css
+vendor/bundle

data/README.md

@@ -1,10 +1,7 @@
 Compass H5bp
 =========================
 
-This is a Compass extension of Html5 mixins extracted from v3 on Html5 Boilerplate
-by Paul Irish and Divya Manian. This gem provides only the CSS mixins and not the
-html or javascript templates.  This makes sense because any implementation of
-Html5 Boilerplate should be specific to the language and framework it's built on.
+This is a Compass extension of Html5 mixins extracted from v4 of [Html5 Boilerplate](http://html5boilerplate.com). This gem provides only the CSS mixins and not the html or javascript templates.  This makes sense because any implementation of Html5 Boilerplate should be specific to the language and framework it's built on.
 
 Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
 
@@ -36,8 +33,13 @@ compass library before you can use any of the mixins:
 Then include the mixins that make up the Normalize portion of Html5
 Boilerplate's styles. http://necolas.github.com/normalize.css
 
+You can include all of Normalize at once:
+
+    @include h5bp-normalize;
+
+ Or pull in only the portions of Normalize you want:
+
     @include h5bp-display;
-    @include h5bp-selection;
     @include h5bp-base;
     @include h5bp-links;
     @include h5bp-typography;
@@ -47,16 +49,20 @@ Boilerplate's styles. http://necolas.github.com/normalize.css
     @include h5bp-forms;
     @include h5bp-tables;
 
-Now you can define your own custom CSS here.
+Next you can include the opinionated default base styles:
 
-Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix`):
-
-    @include h5bp-helpers;
+    @include h5bp-base-styles;
 
 You can include the default Html5 Boilerplate Chrome Frame notification styling:
 
     @include h5bp-chromeframe;
 
+Now you can define your own custom CSS here.
+
+Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix`):
+
+    @include h5bp-helpers;
+
 Finally, you can include H5bp's predefined print style media query:
 
     @include h5bp-media;

data/compass-h5bp.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
   s.authors     = ["Peter Gumeson"]
   s.email       = ["gumeson@gmail.com"]
   s.homepage    = "http://rubygems.org/gems/compass-h5bp"
-  s.summary     = %q{ Compass extension for Html5 Boilerplate v2.0 }
-  s.description = %q{ Compass extension of Html5 mixins extracted from v2 of Paul Irish's Html5 Boilerplate project }
+  s.summary     = %q{ Compass extension for Html5 Boilerplate v4.0 }
+  s.description = %q{ Compass extension of Html5 mixins extracted from v4 of the Html5 Boilerplate project (h5bp.com) }
 
   s.rubyforge_project = "compass-h5bp"
 

data/lib/compass/h5bp/version.rb

@@ -1,6 +1,6 @@
 module Compass
   module H5bp
-    VERSION = "0.0.5"
-    HTML5_BOILERPLATE_VERSION = "3.0.2"
+    VERSION = "0.1.0"
+    HTML5_BOILERPLATE_VERSION = "4.0.0"
   end
 end

data/stylesheets/_h5bp.scss

@@ -3,10 +3,8 @@
 // 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
 
 @import "h5bp/normalize";
-@import "h5bp/chromeframe";
+@import "h5bp/main";
 @import "h5bp/helpers";
 @import "h5bp/media";

data/stylesheets/h5bp/_chromeframe.scss

@@ -1,7 +1,2 @@
-//
-// Chrome Frame Prompt
-//
-
-@mixin h5bp-chromeframe {
-  .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
-}
+// Deprecation warning
+@warn "The chromeframe mixin has moved to _main.scss file starting with Boilerplate version 4.0";

data/stylesheets/h5bp/_helpers.scss

@@ -1,5 +1,5 @@
 //
-// Non-semantic helper classes
+// Helper classes
 //
 
 @mixin h5bp-helpers {
@@ -16,14 +16,25 @@
 
 }
 
-// For image replacement
+// Image replacement
 @mixin image-replacement($img: none, $x: 50%, $y: 50%) {
-  display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  // IE 6/7 fallback
+  *text-indent: -9999px;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 100%;
+  }
+
   @if $img != none {
     background-image: image-url($img);
     background-position: $x $y;
   }
-  br { display: none; }
 }
 
 // Uses image dimensions
@@ -41,18 +52,56 @@
 
 // Hide only visually, but have it available for screenreaders: h5bp.com/v
 @mixin visually-hidden {
-  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
-  &.focusable:active, &.focusable:focus {
-    clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  
+  // 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;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
   }
 }
 
 // Hide visually and from screenreaders, but maintain layout
-@mixin invisible { visibility: hidden; }
+@mixin invisible {
+  visibility: hidden;
+}
 
-// Contain floats: h5bp.com/q
+// Clearfix: contain floats
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    `contenteditable` attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that receive the `clearfix` class.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
 @mixin micro-clearfix {
-  &:before, &:after { content: ""; display: table; }
-  &:after { clear: both; }
-  & { *zoom: 1; }
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+
+  &:after {
+    clear: both;
+  }
+
+  // For IE 6/7 only
+  // Include this rule to trigger hasLayout and contain floats.
+  & {
+    *zoom: 1;
+  }
 }

data/stylesheets/h5bp/_main.scss

@@ -0,0 +1,83 @@
+$line-height: 1.4 !default;
+$font-color: #222 !default;
+$font-family: sans-serif !default;
+$font-size: 1em !default;
+$selected-font-color: #fff !default;
+$selected-background-color: #b3d4fc !default;
+
+@mixin h5bp-main {
+  @include h5bp-base-styles;
+  @include h5bp-chromeframe;
+}
+
+//
+// Base styles: opinionated defaults
+//
+@mixin h5bp-base-styles {
+
+  html,
+  button,
+  input,
+  select,
+  textarea {
+      color: $font-color;
+  }
+
+  body {
+      font-size: $font-size;
+      line-height: $line-height;
+  }
+
+  // Remove text-shadow in selection highlight: h5bp.com/i
+  // These selection declarations have to be separate.
+  // Customize the background color to match your design.
+  ::-moz-selection {
+      background: $selected-background-color;
+      text-shadow: none;
+  }
+
+  ::selection {
+      background: $selected-background-color;
+      text-shadow: none;
+  }
+
+  // A better looking default horizontal rule
+  hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px solid #ccc;
+      margin: 1em 0;
+      padding: 0;
+  }
+
+  // Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+  img {
+      vertical-align: middle;
+  }
+
+  // Remove default fieldset styles.
+  fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+  }
+
+  // Allow only vertical resizing of textareas.
+  textarea {
+      resize: vertical;
+  }
+}
+
+//
+// Chrome Frame Prompt
+//
+
+@mixin h5bp-chromeframe {
+  .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+  }
+}

data/stylesheets/h5bp/_media.scss

@@ -8,16 +8,68 @@
 }
 
 @mixin h5bp-media-print {
-  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } // Black prints faster: h5bp.com/s
-  a, a:visited { text-decoration: underline; }
-  a[href]:after { content: " (" attr(href) ")"; }
-  abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // Don't show links for images, or javascript/internal links
-  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-  thead { display: table-header-group; } // h5bp.com/t
-  tr, img { page-break-inside: avoid; }
-  img { max-width: 100% !important; }
-  @page { margin: 0.5cm; }
-  p, h2, h3 { orphans: 3; widows: 3; }
-  h2, h3 { page-break-after: avoid; }
+    * {
+        background: transparent !important;
+        color: #000 !important; // Black prints faster: h5bp.com/s
+        box-shadow:none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    //
+    // Don't show links for images, or javascript/internal links
+    //
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; // h5bp.com/t
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
 }

data/stylesheets/h5bp/_normalize.scss

@@ -1,23 +1,10 @@
 //
-// Normalize
+// Normalize v1.0.1 | MIT License | git.io/normalize
 //
 
-$line-height: 1.4 !default;
-$font-color: #222 !default;
-$font-family: sans-serif !default;
-$font-size: 1em !default;
-$link-color: #00e !default;
-$link-hover-color: #06e !default;
-$link-visited-color: #551a8b !default;
-$selected-font-color: #fff !default;
-$selected-background-color: #fe57a1 !default;
-$invalid-background-color: #f0dddd !default;
-
-
 @mixin h5bp-normalize {
   @include h5bp-display;
   @include h5bp-base;
-  @include h5bp-selection;
   @include h5bp-links;
   @include h5bp-typography;
   @include h5bp-lists;
@@ -31,10 +18,43 @@ $invalid-background-color: #f0dddd !default;
 // Html5 display definitions
 @mixin h5bp-display {
 
-  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-  audio:not([controls]) { display: none; }
-  [hidden] { display: none; }
+  // Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  nav,
+  section,
+  summary {
+      display: block;
+  }
+
+  // Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+  audio,
+  canvas,
+  video {
+      display: inline-block;
+      *display: inline;
+      *zoom: 1;
+  }
+
+  // Prevents modern browsers from displaying `audio` without controls.
+  // Remove excess height in iOS 5 devices.
+  audio:not([controls]) {
+      display: none;
+      height: 0;
+  }
+
+  // Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+  // and Safari 4.
+  // Known issue: no IE 6 support.
+  [hidden] {
+      display: none;
+  }
 
 }
 
@@ -42,39 +62,53 @@ $invalid-background-color: #f0dddd !default;
 // Base
 @mixin h5bp-base {
 
-  // 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
-  // 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
-
-  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-
-  html, button, input, select, textarea { font-family: $font-family; color: $font-color; }
-
-  body { margin: 0; font-size: $font-size; line-height: $line-height; }
+  // 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+  //    `em` units.
+  // 2. Prevents iOS text size adjust after orientation change, without disabling
+  //    user zoom.
+  html {
+      font-size: 100%; // 1
+      -webkit-text-size-adjust: 100%; // 2
+      -ms-text-size-adjust: 100%; // 2
+  }
+
+  // Addresses `font-family` inconsistency between `textarea` and other form
+  // elements.
+
+  html,
+  button,
+  input,
+  select,
+  textarea {
+      font-family: sans-serif;
+  }
+
+  // Addresses margins handled incorrectly in IE 6/7.
+
+  body {
+      margin: 0;
+  }
 
 }
 
+// Deprecation
 @mixin h5bp-selection {
-  
-  // Remove text-shadow in selection highlight: h5bp.com/i
-  // These selection declarations have to be separate
-  // Also: hot pink! (or customize the background color to match your design)
-
-  ::-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; }
-
+  @warn "The selection mixin has been removed. The selection code is in the h5bp-base-styles mixin starting with Boilerplate version 4.0.";
 }
 
-
 // Links
 @mixin h5bp-links {
 
-  a { color: $link-color; }
-  a:visited { color: $link-visited-color; }
-  a:hover { color: $link-hover-color; }
-  a:focus { outline: thin dotted; }
+  // Addresses `outline` inconsistency between Chrome and other browsers.
+  a:focus {
+      outline: thin dotted;
+  }
 
-  // Improve readability when focused and hovered in all browsers: h5bp.com/h
-  a:hover, a:active { outline: 0; }
+  // Improves readability when focused and also mouse hovered in all browsers.
+  a:active,
+  a:hover {
+      outline: 0;
+  }
 
 }
 
@@ -82,35 +116,121 @@ $invalid-background-color: #f0dddd !default;
 // Typography
 @mixin h5bp-typography {
 
-  abbr[title] { border-bottom: 1px dotted; }
-
-  b, strong { font-weight: bold; }
-
-  blockquote { margin: 1em 40px; }
-
-  dfn { font-style: italic; }
-
-  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
-
-  ins { background: #ff9; color: #000; text-decoration: none; }
-
-  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
-
-  // Redeclare monospace font family: h5bp.com/j
-  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
-
-  // Improve readability of pre-formatted text in all browsers
-  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
-
-  q { quotes: none; }
-  q:before, q:after { content: ""; content: none; }
-
-  small { font-size: 85%; }
-
-  // Position subscript and superscript content without affecting line-height: h5bp.com/k
-  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-  sup { top: -0.5em; }
-  sub { bottom: -0.25em; }
+  // Addresses font sizes and margins set differently in IE 6/7.
+  // Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+  // and Chrome.
+  h1 {
+      font-size: 2em;
+      margin: 0.67em 0;
+  }
+
+  h2 {
+      font-size: 1.5em;
+      margin: 0.83em 0;
+  }
+
+  h3 {
+      font-size: 1.17em;
+      margin: 1em 0;
+  }
+
+  h4 {
+      font-size: 1em;
+      margin: 1.33em 0;
+  }
+
+  h5 {
+      font-size: 0.83em;
+      margin: 1.67em 0;
+  }
+
+  h6 {
+      font-size: 0.75em;
+      margin: 2.33em 0;
+  }
+
+  // Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+  abbr[title] {
+      border-bottom: 1px dotted;
+  }
+
+  // Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+  b,
+  strong {
+      font-weight: bold;
+  }
+
+  blockquote {
+      margin: 1em 40px;
+  }
+
+  // Addresses styling not present in Safari 5 and Chrome.
+  dfn {
+      font-style: italic;
+  }
+
+  // Addresses styling not present in IE 6/7/8/9.
+  mark {
+      background: #ff0;
+      color: #000;
+  }
+
+  // Addresses margins set differently in IE 6/7.
+  p,
+  pre {
+      margin: 1em 0;
+  }
+
+  // Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+  code,
+  kbd,
+  pre,
+  samp {
+      font-family: monospace, serif;
+      _font-family: 'courier new', monospace;
+      font-size: 1em;
+  }
+
+  // Improves readability of pre-formatted text in all browsers.
+  pre {
+      white-space: pre;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+  }
+
+  // Addresses CSS quotes not supported in IE 6/7.
+  q {
+      quotes: none;
+  }
+
+  // Addresses `quotes` property not supported in Safari 4.
+  q:before,
+  q:after {
+      content: '';
+      content: none;
+  }
+
+  // Addresses inconsistent and variable font size in all browsers.
+  small {
+      font-size: 80%;
+  }
+
+  // Prevents `sub` and `sup` affecting `line-height` in all browsers.
+  sub,
+  sup {
+      font-size: 75%;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+  }
+
+  sup {
+      top: -0.5em;
+  }
+
+  sub {
+      bottom: -0.25em;
+  }
 
 }
 
@@ -118,9 +238,24 @@ $invalid-background-color: #f0dddd !default;
 // Lists
 @mixin h5bp-lists {
 
-  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
-  dd { margin: 0 0 0 40px; }
-  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+  // Addresses margins set differently in IE 6/7.
+  dl,
+  menu,
+  ol,
+  ul {
+      margin: 1em 0;
+  }
+
+  dd {
+      margin: 0 0 0 40px;
+  }
+
+  // Addresses paddings set differently in IE 6/7.
+  menu,
+  ol,
+  ul {
+      padding: 0 0 0 40px;
+  }
 
 }
 
@@ -128,14 +263,17 @@ $invalid-background-color: #f0dddd !default;
 // Embedded content
 @mixin h5bp-embeds {
 
-  // 1. Improve image quality when scaled in IE7: h5bp.com/d
-  // 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
-
-  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+  // 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+  // 2. Improves image quality when scaled in IE 7.
+  img {
+      border: 0; /* 1 */
+      -ms-interpolation-mode: bicubic; /* 2 */
+  }
 
-  // Correct overflow not hidden in IE9
-
-  svg:not(:root) { overflow: hidden; }
+  // Corrects overflow displayed oddly in IE 9.
+  svg:not(:root) {
+      overflow: hidden;
+  }
 
 }
 
@@ -143,7 +281,10 @@ $invalid-background-color: #f0dddd !default;
 // Figures
 @mixin h5bp-figures {
 
-  figure { margin: 0; }
+  // Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+  figure {
+      margin: 0;
+  }
 
 }
 
@@ -151,55 +292,112 @@ $invalid-background-color: #f0dddd !default;
 // Forms
 @mixin h5bp-forms {
 
-  form { margin: 0; }
-  fieldset { border: 0; 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; white-space: normal; }
-
-   // 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; vertical-align: baseline; *vertical-align: middle; }
-
-   // 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
-
-  button, input { line-height: normal; }
-
-   // 1. Display hand cursor for clickable form elements
-   // 2. Allow styling of clickable form elements in iOS
-   // 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
-
-  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
-
-   // Re-set default cursor for disabled elements
-
-  button[disabled], input[disabled] { cursor: default; }
-
-   // Consistent box sizing and appearance
-
-  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
-  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, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
-
-   // Remove inner padding and border in FF3/4: h5bp.com/l
-
-  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-
-   // 1. Remove default vertical scrollbar in IE6/7/8/9
-   // 2. Allow only vertical resizing
-
-  textarea { overflow: auto; vertical-align: top; resize: vertical; }
-
-  // Colors for form validity
-  input:valid, textarea:valid {  }
-  input:invalid, textarea:invalid { background-color: $invalid-background-color; }
+  // Corrects margin displayed oddly in IE 6/7.
+  form {
+      margin: 0;
+  }
+
+  // Define consistent border, margin, and padding.
+  fieldset {
+      border: 1px solid #c0c0c0;
+      margin: 0 2px;
+      padding: 0.35em 0.625em 0.75em;
+  }
+
+  // 1. Corrects color not being inherited in IE 6/7/8/9.
+  // 2. Corrects text not wrapping in Firefox 3.
+  // 3. Corrects alignment displayed oddly in IE 6/7.
+  legend {
+      border: 0; // 1
+      padding: 0;
+      white-space: normal; // 2
+      *margin-left: -7px; // 3
+  }
+
+  // 1. Corrects font size not being inherited in all browsers.
+  // 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+  //    and Chrome.
+  // 3. Improves appearance and consistency in all browsers.button,
+  input,
+  select,
+  textarea {
+      font-size: 100%; // 1
+      margin: 0; // 2
+      vertical-align: baseline; // 3
+      *vertical-align: middle; // 3
+  }
+
+  // Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+  // the UA stylesheet.
+  button,
+  input {
+      line-height: normal;
+  }
+
+  // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+  //    and `video` controls.
+  // 2. Corrects inability to style clickable `input` types in iOS.
+  // 3. Improves usability and consistency of cursor style between image-type
+  //    `input` and others.
+  // 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+  //    Known issue: inner spacing remains in IE 6.
+  button,
+  html input[type="button"], // 1
+  input[type="reset"],
+  input[type="submit"] {
+      -webkit-appearance: button; // 2
+      cursor: pointer; // 3
+      *overflow: visible;  // 4
+  }
+
+  // Re-set default cursor for disabled elements.
+  button[disabled],
+  input[disabled] {
+      cursor: default;
+  }
+
+  // 1. Addresses box sizing set to content-box in IE 8/9.
+  // 2. Removes excess padding in IE 8/9.
+  // 3. Removes excess padding in IE 7.
+  //    Known issue: excess padding remains in IE 6.
+  input[type="checkbox"],
+  input[type="radio"] {
+      box-sizing: border-box; // 1
+      padding: 0; // 2
+      *height: 13px; // 3
+      *width: 13px; // 3
+  }
+
+  // 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+  // 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+  //    (include `-moz` to future-proof).
+  input[type="search"] {
+      -webkit-appearance: textfield; // 1
+      -moz-box-sizing: content-box;
+      -webkit-box-sizing: content-box; // 2
+      box-sizing: content-box;
+  }
+
+  // Removes inner padding and search cancel button in Safari 5 and Chrome
+  // on OS X.
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none;
+  }
+
+  // Removes inner padding and border in Firefox 3+.
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+  }
+
+  // 1. Removes default vertical scrollbar in IE 6/7/8/9.
+  // 2. Improves readability and alignment in all browsers.
+  textarea {
+      overflow: auto; // 1
+      vertical-align: top; // 2
+  }
 
 }
 
@@ -207,7 +405,10 @@ $invalid-background-color: #f0dddd !default;
 // Tables
 @mixin h5bp-tables {
 
-  table { border-collapse: collapse; border-spacing: 0; }
-  td { vertical-align: top; }
+  // Remove most spacing between table cells.
+  table {
+      border-collapse: collapse;
+      border-spacing: 0;
+  }
 
 }