Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 88 lines (51 sloc) 3.565 kb
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
1 # An HTML5 Boilerplate Extension for Compass
2588fc2 Peter Gumeson Initial compass-h5bp gem
authored
2
1a13e28 Ron Scott-Adams 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 Ron Scott-Adams 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 Peter Gumeson Updated readme and gemspec
authored
6
b028f82 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
7 ## Installation
5f1369d Peter Gumeson Updated readme and gemspec
authored
8
b028f82 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
9 ### Two options:
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
10 * Install using gem:
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
11 `gem install compass-h5bp`
2588fc2 Peter Gumeson Initial compass-h5bp gem
authored
12
9553bab Ron Scott-Adams 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 Peter Gumeson Initial compass-h5bp gem
authored
14
b028f82 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
15 ## Usage
fba39c0 Darian Moody 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 Ron Scott-Adams 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 Peter Gumeson Initial compass-h5bp gem
authored
19
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
20 require 'compass-h5bp'
5f1369d Peter Gumeson Updated readme and gemspec
authored
21
1a13e28 Ron Scott-Adams 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 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
23
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
24 @import "h5bp";
b028f82 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
25
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
26 ### Simple Implementation
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
27 1. Include the h5bp mixin:
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
28
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
29 @include h5bp;
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
30
1a13e28 Ron Scott-Adams 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 Ron Scott-Adams 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 Peter Gumeson Updated readme and gemspec
authored
35
a168821 Ron Scott-Adams 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 Grady Kuhnline updating the styles to version 4 of boilerplate.
heygrady authored
38
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
39 @include h5bp-normalize;
deb2284 Grady Kuhnline updating the styles to version 4 of boilerplate.
heygrady authored
40
41 Or pull in only the portions of Normalize you want:
42
a168821 Ron Scott-Adams 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 Peter Gumeson Updated readme and gemspec
authored
51
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
52 2. Include the opinionated default base styles:
5f1369d Peter Gumeson Updated readme and gemspec
authored
53
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
54 @include h5bp-base-styles;
6b99ff0 John Nishinaga update scss to 3.0 and add test
jingoro authored
55
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
56 3. You can include the styling for the browser upgrade warning:
6b99ff0 John Nishinaga update scss to 3.0 and add test
jingoro authored
57
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
58 @include h5bp-browserupgrade;
deb2284 Grady Kuhnline updating the styles to version 4 of boilerplate.
heygrady authored
59
a168821 Ron Scott-Adams 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 Grady Kuhnline updating the styles to version 4 of boilerplate.
heygrady authored
61
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
62 @include h5bp-errorpage;
deb2284 Grady Kuhnline updating the styles to version 4 of boilerplate.
heygrady authored
63
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
64 5. Define your custom modifications to the HTML5 Boilerplate styles here.
5f1369d Peter Gumeson Updated readme and gemspec
authored
65
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
66 6. Let h5bp define some semantic helper classes. (e.g. `.clearfix`):
5f1369d Peter Gumeson Updated readme and gemspec
authored
67
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
68 @include h5bp-helpers;
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
69
1a13e28 Ron Scott-Adams 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 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
71
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
72 7. Include h5bp's predefined print style media query:
a168821 Ron Scott-Adams Fixed an incorrect call to html5bp main mixin
tohuw authored
73
1a13e28 Ron Scott-Adams Reverting to h5bp namespace in preparation for a PR
tohuw authored
74 @include h5bp-media;
2588fc2 Peter Gumeson Initial compass-h5bp gem
authored
75
9c66e36 Ron Scott-Adams Fixed includes for normalize & updated docs
tohuw authored
76 ## Caveats
77
9553bab Ron Scott-Adams 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 Ron Scott-Adams 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 Ron Scott-Adams Fixed includes for normalize & updated docs
tohuw authored
81
b028f82 Ron Scott-Adams Refactor and update for v5 Boilerplate
tohuw authored
82 ## Acknowledgments
2588fc2 Peter Gumeson Initial compass-h5bp gem
authored
83
fba39c0 Darian Moody Update README.md
djm authored
84 [HTML5 Boilerplate](http://html5boilerplate.com), created by by Paul Irish and Divya Manian.
5f1369d Peter Gumeson Updated readme and gemspec
authored
85
1a13e28 Ron Scott-Adams 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.