Fixed an incorrect call to html5bp main mixin

Clarified mixin names. Completed 404 styles and renamed the document. Suitably modified the README.
sporkd · Feb 11, 2015 · a168821 · a168821
1 parent 32f3b34
commit a168821
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -1,72 +1,85 @@
-# Compass html5bp
+# An HTML5 Boilerplate Extension for Compass
 
-This is a [Compass extension](http://compass-style.org/help/tutorials/extensions/) of HTML5 mixins extracted from v5 of [HTML5 Boilerplate](http://html5boilerplate.com), forked from Peter Gumeson's original gem, [compass-h5bp](https://github.com/sporkd/compass-h5bp).
-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](http://compass-style.org/help/tutorials/extensions/) of HTML5 mixins extracted from v5 of the [HTML5 Boilerplate](http://html5boilerplate.com), forked from Peter Gumeson's original gem, [compass-h5bp](https://github.com/sporkd/compass-h5bp).
+
+This gem provides only the CSS mixins and not the HTML or JavaScript templates. Implementation of these and similar files ought to be managed by the framework and language your project is built upon.
 
 ## Installation
 
 ### Two options:
-* A raw install using gem:
+* Install using gem:
 `gem install compass-html5bp`
 
 * Or, if you're using [Bundler](http://gembundler.com/), you can install it via `bundle install` by placing the following line in your Gemfile: `gem 'compass-html5bp'`
 
 ## Usage
 
 First, you must add the plugin to your `config.rb` (your Compass configuration file). This can be done be placing an
-import line at the top of the file and is required to add the compass plugin to the sass load paths:
+import line at the top of the file and is required to add the Compass plugin to the Sass load paths:
 
     require 'compass-html5bp'
 
-### HTML5BP SCSS File Order
-The following order ensures your custom modifications to the HTML Boilerplate styles will work as expected, by following the outline provided in the upstream HTML5 Boilerplate CSS.
-
-1. Inside your SCSS (or Sass) file, you must import the `html5bp` compass library before you can use any of the mixins:
+Inside your SCSS (or Sass) file, you must import the `html5bp` compass library before you can use any of the mixins:
 
     @import "html5bp";
 
-2. Include the mixins that make up the [Normalize](http://necolas.github.com/normalize.css) portion of the HTML5
-Boilerplate styles.
+### Simple Implementation
+1. Include the html5bp mixin:
+
+        @include html5bp;
+
+2. *Optional:* Redefine the mixin `html5bp-custom` to declare custom modifications to the HTML5 Boilerplate styles.
+
+### Advanced Implementation
+To selectively import only certain elements, observe the following order. This ensures your custom modifications to the HTML Boilerplate styles will work as expected, by following the outline provided in the upstream HTML5 Boilerplate CSS.
 
-You can include all of Normalize at once:
+1. Include the mixins that make up the [Normalize](http://necolas.github.com/normalize.css) portion of the HTML5
+Boilerplate styles. You can include all of Normalize at once:
 
-    @include html5bp-normalize;
+        @include html5bp-normalize;
 
  Or pull in only the portions of Normalize you want:
 
-    @include html5bp-base;
-    @include html5bp-display;
-    @include html5bp-links;
-    @include html5bp-semantics;
-    @include html5bp-embedded;
-    @include html5bp-grouping;
-    @include html5bp-forms;
-    @include html5bp-tables;
+        @include normalize-base;
+        @include normalize-display;
+        @include normalize-links;
+        @include normalize-semantics;
+        @include normalize-embedded;
+        @include normalize-grouping;
+        @include normalize-forms;
+        @include normalize-tables;
 
-3. *Optional:* Include the opinionated default base styles:
+2. Include the opinionated default base styles:
 
-    @include html5bp-base-styles;
+        @include html5bp-base-styles;
 
-4. *Optional:* You can include the styling for the browser upgrade warning:
+3. You can include the styling for the browser upgrade warning:
 
-    @include html5bp-browserupgrade;
+        @include html5bp-browserupgrade;
 
-5. *Optional:* Define your custom modifications to the HTML5 Boilerplate styles here.
+4. Provide styling to the 404 page (requires that you specify the class `errorpage` for the html of the 404 document):
 
-6. *Optional:* Let html5bp define some semantic helper classes. (e.g. `.clearfix`):
+        @include html5bp-errorpage;
 
-    @include html5bp-helpers;
+5. Define your custom modifications to the HTML5 Boilerplate styles here.
 
-7. *Optional:* Include html5bp's predefined print style media query:
+6. Let html5bp define some semantic helper classes. (e.g. `.clearfix`):
 
-    @include html5bp-media;
+        @include html5bp-helpers;
+
+    There are also specific mixins provided in `html5bp-helpers` you can call instead.
+
+7. Include html5bp's predefined print style media query:
+
+        @include html5bp-media;
 
 ## Caveats
 
-If you're coming from [compass-h5bp](https://github.com/sporkd/compass-h5bp), be aware several normalize mixins have had their name changed, and any mixin or feature that had been marked for deprecation has been removed. That being said, migration should be relatively simple.
+If you're coming from [compass-h5bp](https://github.com/sporkd/compass-h5bp), be aware that several mixins have had their name changed, and any mixin or feature that had been marked for deprecation has been removed. That being said, migration should be relatively simple.
+
+The order for the "Advanced Implementation" matters. It's important to note that "custom modifications to the HTML5 Boilerplate styles" means only that - the rest of your SCSS goes below everything listed.
 
-I am no rubyist, so if I've botched any patches to the Ruby-specific stuff, please do open an issue or, better, submit a pull request.
+I am no Rubyist, so if I've botched any patches to the Ruby-specific stuff, please do open an issue or, better, submit a pull request. (For one, I know the tests could be better.)
 
 Then again, I might have botched anything else as well, so any contributions are very welcome.
 

diff --git a/lib/compass/html5bp/version.rb b/lib/compass/html5bp/version.rb
@@ -1,6 +1,6 @@
 module Compass
   module Html5bp
-    VERSION = "0.2.1"
+    VERSION = "0.3"
     HTML5_BOILERPLATE_VERSION = "5.0"
   end
 end
diff --git a/stylesheets/_html5bp.scss b/stylesheets/_html5bp.scss
@@ -7,17 +7,17 @@
 @import "html5bp/normalize";
 @import "html5bp/main";
 @import "html5bp/browserupgrade"
-@import "html5bp/404"
+@import "html5bp/errorpage"
 @import "html5bp/helpers";
 @import "html5bp/media";
 
 @mixin html5bp-custom {
-    // Redefine this mixin to add custom modifications to h5bp styles.
+    // Redefine this mixin to add custom modifications to H5BP styles.
 }
 
 @mixin html5bp {
     @include html5bp-normalize;
-    @include html5bp-base;
+    @include html5bp-main;
     @include html5bp-display;
     @include html5bp-links;
     @include html5bp-semantics;
@@ -27,7 +27,7 @@
     @include html5bp-tables;
     @include html5bp-base-styles;
     @include html5bp-browserupgrade;
-    @include html5bp-404;
+    @include html5bp-errorpage;
     @include html5bp-custom
     @include html5bp-helpers;
     @include html5bp-media;

diff --git a/stylesheets/html5bp/_404.scss b/stylesheets/html5bp/_404.scss
diff --git a/stylesheets/html5bp/_errorpage.scss b/stylesheets/html5bp/_errorpage.scss
@@ -0,0 +1,45 @@
+@mixin "html5bp-errorpage" {
+    html.errorpages {
+        color: #888;
+        display: table;
+        font-family: sans-serif;
+        height: 100%;
+        text-align: center;
+        width: 100%;
+
+        * {
+            line-height: 1.2;
+            margin: 0;
+        }
+
+        body {
+            display: table-cell;
+            vertical-align: middle;
+            margin: 2em auto;
+        }
+
+        h1 {
+            color: #555;
+            font-size: 2em;
+            font-weight: 400;
+        }
+
+        p {
+            margin: 0 auto;
+            width: 280px;
+        }
+
+        @media only screen and (max-width: 280px) {
+
+            body, p {
+                width: 95%;
+            }
+
+            h1 {
+                font-size: 1.5em;
+                margin: 0 0 0.3em;
+            }
+
+        }
+    }
+}
diff --git a/stylesheets/html5bp/_normalize.scss b/stylesheets/html5bp/_normalize.scss
@@ -1,17 +1,17 @@
 // normalize.css v3.0.2 | MIT License | git.io/normalize
 @mixin html5bp-normalize {
-  @include html5bp-base;
-  @include html5bp-display;
-  @include html5bp-links;
-  @include html5bp-semantics;
-  @include html5bp-embedded;
-  @include html5bp-grouping;
-  @include html5bp-forms;
-  @include html5bp-tables;
+  @include normalize-base;
+  @include normalize-display;
+  @include normalize-links;
+  @include normalize-semantics;
+  @include normalize-embedded;
+  @include normalize-grouping;
+  @include normalize-forms;
+  @include normalize-tables;
 }
 
 // Base
-@mixin html5bp-base {
+@mixin normalize-base {
   // 1. Set default font family to sans-serif.
   // 2. Prevent iOS text size adjust after orientation change, without
   //    disabling user zoom.
@@ -28,7 +28,7 @@
 }
 
 // HTML5 display definitions
-@mixin html5bp-display {
+@mixin normalize-display {
   // Correct `block` display not defined for any HTML5 element in IE 8/9.
   // Correct `block` display not defined for `details` or `summary` in IE 10/11
   // and Firefox.
@@ -75,7 +75,7 @@
 }
 
 // Links
-@mixin html5bp-links {
+@mixin normalize-links {
   // Remove the gray background color from active links in IE 10.
   a {
     background-color: transparent;
@@ -89,7 +89,7 @@
 }
 
 // Text-level semantics
-@mixin html5bp-semantics {
+@mixin normalize-semantics {
   // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   abbr[title] {
     border-bottom: 1px dotted;
@@ -143,7 +143,7 @@
 }
 
 // Embedded content
-@mixin html5bp-embedded {
+@mixin normalize-embedded {
   // Remove border when inside `a` element in IE 8/9/10.
   img {
     border: 0;
@@ -156,7 +156,7 @@
 }
 
 // Grouping content
-@mixin html5bp-grouping {
+@mixin normalize-grouping {
   // Address margin not present in IE 8/9 and Safari.
   figure {
     margin: 1em 40px;
@@ -185,7 +185,7 @@
 }
 
 // Forms
-@mixin html5bp-forms {
+@mixin normalize-forms {
   // Known limitation: by default, Chrome and Safari on OS X allow very limited
   // styling of `select`, unless a `border` property is set.
   // 1. Correct color not being inherited.
@@ -311,7 +311,7 @@
 }
 
 // Tables
-@mixin html5bp-tables {
+@mixin normalize-tables {
   // Remove most spacing between table cells.
   table {
     border-collapse: collapse;