Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 88 lines (51 sloc) 3.565 kB
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
1 # An HTML5 Boilerplate Extension for Compass
2588fc2 @sporkd Initial compass-h5bp gem
authored
2
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
3 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).
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
4
5 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.
5f1369d @sporkd Updated readme and gemspec
authored
6
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
7 ## Installation
5f1369d @sporkd Updated readme and gemspec
authored
8
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
9 ### Two options:
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
10 * Install using gem:
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
11 `gem install compass-h5bp`
2588fc2 @sporkd Initial compass-h5bp gem
authored
12
9553bab @tohuw Minor clarification to Bundler instructions, fixed #29
tohuw authored
13 * Or, if you're using [Bundler](http://gembundler.com/), you can install it via `bundle install` after placing the following line in your Gemfile: `gem 'compass-h5bp'`
2588fc2 @sporkd Initial compass-h5bp gem
authored
14
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
15 ## Usage
fba39c0 @djm Update README.md
djm authored
16
17 First, you must add the plugin to your `config.rb` (your Compass configuration file). This can be done be placing an
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
18 import line at the top of the file and is required to add the Compass plugin to the Sass load paths:
2588fc2 @sporkd Initial compass-h5bp gem
authored
19
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
20 require 'compass-h5bp'
5f1369d @sporkd Updated readme and gemspec
authored
21
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
22 Inside your SCSS (or Sass) file, you must import the `h5bp` compass library before you can use any of the mixins:
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
23
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
24 @import "h5bp";
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
25
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
26 ### Simple Implementation
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
27 1. Include the h5bp mixin:
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
28
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
29 @include h5bp;
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
30
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
31 2. *Optional:* Redefine the mixin `h5bp-custom` to declare custom modifications to the HTML5 Boilerplate styles.
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
32
33 ### Advanced Implementation
34 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.
5f1369d @sporkd Updated readme and gemspec
authored
35
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
36 1. Include the mixins that make up the [Normalize](http://necolas.github.com/normalize.css) portion of the HTML5
37 Boilerplate styles. You can include all of Normalize at once:
deb2284 @heygrady updating the styles to version 4 of boilerplate.
heygrady authored
38
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
39 @include h5bp-normalize;
deb2284 @heygrady updating the styles to version 4 of boilerplate.
heygrady authored
40
41 Or pull in only the portions of Normalize you want:
42
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
43 @include normalize-base;
44 @include normalize-display;
45 @include normalize-links;
46 @include normalize-semantics;
47 @include normalize-embedded;
48 @include normalize-grouping;
49 @include normalize-forms;
50 @include normalize-tables;
5f1369d @sporkd Updated readme and gemspec
authored
51
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
52 2. Include the opinionated default base styles:
5f1369d @sporkd Updated readme and gemspec
authored
53
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
54 @include h5bp-base-styles;
6b99ff0 @jingoro update scss to 3.0 and add test
jingoro authored
55
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
56 3. You can include the styling for the browser upgrade warning:
6b99ff0 @jingoro update scss to 3.0 and add test
jingoro authored
57
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
58 @include h5bp-browserupgrade;
deb2284 @heygrady updating the styles to version 4 of boilerplate.
heygrady authored
59
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
60 4. Provide styling to the 404 page (requires that you specify the class `errorpage` for the html of the 404 document):
deb2284 @heygrady updating the styles to version 4 of boilerplate.
heygrady authored
61
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
62 @include h5bp-errorpage;
deb2284 @heygrady updating the styles to version 4 of boilerplate.
heygrady authored
63
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
64 5. Define your custom modifications to the HTML5 Boilerplate styles here.
5f1369d @sporkd Updated readme and gemspec
authored
65
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
66 6. Let h5bp define some semantic helper classes. (e.g. `.clearfix`):
5f1369d @sporkd Updated readme and gemspec
authored
67
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
68 @include h5bp-helpers;
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
69
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
70 There are also specific mixins provided in `h5bp-helpers` you can call instead.
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
71
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
72 7. Include h5bp's predefined print style media query:
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
73
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
74 @include h5bp-media;
2588fc2 @sporkd Initial compass-h5bp gem
authored
75
9c66e36 @tohuw Fixed includes for normalize & updated docs
tohuw authored
76 ## Caveats
77
9553bab @tohuw Minor clarification to Bundler instructions, fixed #29
tohuw authored
78 If you're coming from a previous version, 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.
a168821 @tohuw Fixed an incorrect call to html5bp main mixin
tohuw authored
79
80 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.
9c66e36 @tohuw Fixed includes for normalize & updated docs
tohuw authored
81
b028f82 @tohuw Refactor and update for v5 Boilerplate
tohuw authored
82 ## Acknowledgments
2588fc2 @sporkd Initial compass-h5bp gem
authored
83
fba39c0 @djm Update README.md
djm authored
84 [HTML5 Boilerplate](http://html5boilerplate.com), created by by Paul Irish and Divya Manian.
5f1369d @sporkd Updated readme and gemspec
authored
85
1a13e28 @tohuw Reverting to h5bp namespace in preparation for a PR
tohuw authored
86 Copyright (c) 2012 Peter Gumeson.
87 You can read a [summary of the MIT license](https://tldrlegal.com/license/mit-license#summary), or see [LICENSE](https://github.com/tohuw/compass-h5bp/blob/master/LICENSE) for the full license.
Something went wrong with that request. Please try again.