compass-h5bp 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/.gitignore ADDED
@@ -0,0 +1,5 @@
1
+ *.gem
2
+ .bundle
3
+ Gemfile.lock
4
+ pkg/*
5
+ .rvmrc
data/Gemfile ADDED
@@ -0,0 +1,3 @@
1
+ source "http://rubygems.org"
2
+
3
+ gemspec
data/LICENSE ADDED
@@ -0,0 +1,20 @@
1
+ Copyright (c) 2011 Peter Gumeson
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining
4
+ a copy of this software and associated documentation files (the
5
+ "Software"), to deal in the Software without restriction, including
6
+ without limitation the rights to use, copy, modify, merge, publish,
7
+ distribute, sublicense, and/or sell copies of the Software, and to
8
+ permit persons to whom the Software is furnished to do so, subject to
9
+ the following conditions:
10
+
11
+ The above copyright notice and this permission notice shall be
12
+ included in all copies or substantial portions of the Software.
13
+
14
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,67 @@
1
+ Compass H5bp
2
+ =========================
3
+
4
+ This is a Compass extension of Html5 mixins extracted from v2 on Html5 Boilerplate
5
+ by Paul Irish and Divya Manian. This gem provides only the CSS mixins and not the
6
+ html or javascript templates. This makes sense because any implementation of
7
+ Html5 Boilerplate should be specific to the language and framework it's built on.
8
+
9
+ Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
10
+
11
+ Or, you can read more about compass extensions [here](http://compass-style.org/help/tutorials/extensions/).
12
+
13
+
14
+ Installation
15
+ =========================
16
+
17
+ gem install compass-h5bp
18
+
19
+ Or, in your Gemfile
20
+
21
+ gem 'compass-h5bp'
22
+
23
+ Then run
24
+
25
+ $ bundle install
26
+
27
+
28
+ Usage
29
+ =========================
30
+
31
+ Inside your Scss (or Sass) file, you first need to import the `h5bp`
32
+ compass library before you can use any of the mixins:
33
+
34
+ @import "h5bp";
35
+
36
+ Then include the mixins that make up the Normalize portion of Html5
37
+ Boilerplate's styles. http://necolas.github.com/normalize.css
38
+
39
+ @include h5bp-display;
40
+ @include h5bp-base;
41
+ @include h5bp-links;
42
+ @include h5bp-typography;
43
+ @include h5bp-lists;
44
+ @include h5bp-embeds;
45
+ @include h5bp-figures;
46
+ @include h5bp-forms;
47
+ @include h5bp-tables;
48
+
49
+ Now you can define your own custom CSS here.
50
+
51
+ Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix`):
52
+
53
+ @include h5bp-helpers;
54
+
55
+ Finally, you can include H5bp's predefined print style media query:
56
+
57
+ @include h5bp-media;
58
+
59
+
60
+ License
61
+ ========
62
+
63
+ HTML5 Boilerplate created by by Paul Irish and Divya Manian
64
+ http://html5boilerplate.com
65
+
66
+ Copyright (c) 2011 Peter Gumeson
67
+ See [LICENSE](https://github.com/sporkd/compass-h5bp/blob/master/LICENSE) for full license.
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require 'bundler/gem_tasks'
@@ -0,0 +1,23 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "compass/h5bp/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "compass-h5bp"
7
+ s.version = Compass::H5bp::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.authors = ["Peter Gumeson"]
10
+ s.email = ["gumeson@gmail.com"]
11
+ s.homepage = "http://rubygems.org/gems/compass-h5bp"
12
+ s.summary = %q{ Compass extension for Html5 Boilerplate v2.0 }
13
+ s.description = %q{ Compass extension of Html5 mixins extracted from v2 of Paul Irish's Html5 Boilerplate project }
14
+
15
+ s.rubyforge_project = "compass-h5bp"
16
+
17
+ s.files = `git ls-files`.split("\n")
18
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
19
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
20
+ s.require_paths = ["lib"]
21
+
22
+ s.add_dependency("compass")
23
+ end
@@ -0,0 +1 @@
1
+ require "compass/h5bp"
@@ -0,0 +1,7 @@
1
+ require "compass/h5bp/version"
2
+
3
+ module Compass
4
+ module H5bp
5
+ Compass::Frameworks.register("compass-h5bp", :path => "#{File.dirname(__FILE__)}/../..")
6
+ end
7
+ end
@@ -0,0 +1,6 @@
1
+ module Compass
2
+ module H5bp
3
+ VERSION = "0.0.1"
4
+ HTML5_BOILERPLATE_VERSION = "2.0"
5
+ end
6
+ end
@@ -0,0 +1,11 @@
1
+ // HTML5 ✰ Boilerplate
2
+ //
3
+ // What follows is the result of much research on cross-browser styling.
4
+ // Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
5
+ // Kroc Camen, and the H5BP dev community and team.
6
+ //
7
+ // Detailed information about this CSS: h5bp.com/css
8
+
9
+ @import "h5bp/normalize";
10
+ @import "h5bp/helpers";
11
+ @import "h5bp/media";
@@ -0,0 +1,56 @@
1
+ //
2
+ // Non-semantic helper classes
3
+ //
4
+
5
+ @mixin h5bp-helpers {
6
+
7
+ .ir { @include image-replacement; }
8
+
9
+ .hidden { @include hidden; }
10
+
11
+ .visuallyhidden { @include visually-hidden; }
12
+
13
+ .clearfix { @include micro-clearfix; }
14
+
15
+ }
16
+
17
+ // For image replacement
18
+ @mixin image-replacement($img: none, $x: 50%, $y: 50%) {
19
+ display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0;
20
+ @if $img != none {
21
+ background-image: image-url($img);
22
+ background-position: $x $y;
23
+ }
24
+ br { display: none; }
25
+ }
26
+
27
+ // Uses image dimensions
28
+ @mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
29
+ @include image-replacement($img, $x, $y);
30
+ width: image-width($img);
31
+ height: image-height($img);
32
+ }
33
+
34
+ // Hide from both screenreaders and browsers: h5bp.com/u
35
+ @mixin hidden {
36
+ display: none !important;
37
+ visibility: hidden;
38
+ }
39
+
40
+ // Hide only visually, but have it available for screenreaders: h5bp.com/v
41
+ @mixin visually-hidden {
42
+ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
43
+ &.focusable:active, &.focusable:focus {
44
+ clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
45
+ }
46
+ }
47
+
48
+ // Hide visually and from screenreaders, but maintain layout
49
+ @mixin invisible { visibility: hidden; }
50
+
51
+ // Contain floats: h5bp.com/q
52
+ @mixin micro-clearfix {
53
+ &:before, &:after { content: ""; display: table; }
54
+ &:after { clear: both; }
55
+ *zoom: 1;
56
+ }
@@ -0,0 +1,25 @@
1
+ // Print styles
2
+ // Inlined to avoid required HTTP connection: h5bp.com/r
3
+
4
+ @mixin h5bp-media {
5
+
6
+ @media print {
7
+ @include media-print;
8
+ }
9
+
10
+ }
11
+
12
+ @mixin media-print {
13
+ * { 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
14
+ a, a:visited { text-decoration: underline; }
15
+ a[href]:after { content: " (" attr(href) ")"; }
16
+ abbr[title]:after { content: " (" attr(title) ")"; }
17
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } // Don't show links for images, or javascript/internal links
18
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
19
+ thead { display: table-header-group; } // h5bp.com/t
20
+ tr, img { page-break-inside: avoid; }
21
+ img { max-width: 100% !important; }
22
+ @page { margin: 0.5cm; }
23
+ p, h2, h3 { orphans: 3; widows: 3; }
24
+ h2, h3 { page-break-after: avoid; }
25
+ }
@@ -0,0 +1,203 @@
1
+ //
2
+ // Normalize
3
+ //
4
+
5
+ $line-height: 1.4 !default;
6
+ $font-color: #222 !default;
7
+ $link-color: #00e !default;
8
+ $link-hover-color: #06e !default;
9
+ $link-visited-color: #551a8b !default;
10
+ $selected-font-color: #fff !default;
11
+ $selected-background-color: #ff5e99 !default;
12
+ $invalid-background-color: #f0dddd !default;
13
+
14
+
15
+ @mixin h5bp-normalize {
16
+ @include h5bp-display;
17
+ @include h5bp-base;
18
+ @include h5bp-links;
19
+ @include h5bp-typography;
20
+ @include h5bp-lists;
21
+ @include h5bp-embeds;
22
+ @include h5bp-figures;
23
+ @include h5bp-forms;
24
+ @include h5bp-tables;
25
+ }
26
+
27
+
28
+ // Html5 display definitions
29
+ @mixin h5bp-display {
30
+
31
+ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
32
+ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
33
+ audio:not([controls]) { display: none; }
34
+ [hidden] { display: none; }
35
+
36
+ }
37
+
38
+
39
+ // Base
40
+ @mixin h5bp-base {
41
+
42
+ // 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
43
+ // 2. Force vertical scrollbar in non-IE
44
+ // 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
45
+
46
+ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
47
+
48
+ body { margin: 0; font-size: 1em; line-height: $line-height; }
49
+
50
+ body, button, input, select, textarea { font-family: sans-serif; color: $font-color; }
51
+
52
+ // Remove text-shadow in selection highlight: h5bp.com/i
53
+ // These selection declarations have to be separate
54
+ // Also: hot pink! (or customize the background color to match your design)
55
+
56
+ ::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
57
+ ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
58
+
59
+ }
60
+
61
+
62
+ // Links
63
+ @mixin h5bp-links {
64
+
65
+ a { color: $link-color; }
66
+ a:visited { color: $link-visited-color; }
67
+ a:hover { color: $link-hover-color; }
68
+ a:focus { outline: thin dotted; }
69
+
70
+ // Improve readability when focused and hovered in all browsers: h5bp.com/h
71
+ a:hover, a:active { outline: 0; }
72
+
73
+ }
74
+
75
+
76
+ // Typography
77
+ @mixin h5bp-typography {
78
+
79
+ abbr[title] { border-bottom: 1px dotted; }
80
+
81
+ b, strong { font-weight: bold; }
82
+
83
+ blockquote { margin: 1em 40px; }
84
+
85
+ dfn { font-style: italic; }
86
+
87
+ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
88
+
89
+ ins { background: #ff9; color: #000; text-decoration: none; }
90
+
91
+ mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
92
+
93
+ // Redeclare monospace font family: h5bp.com/j
94
+ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
95
+
96
+ // Improve readability of pre-formatted text in all browsers
97
+ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
98
+
99
+ q { quotes: none; }
100
+ q:before, q:after { content: ""; content: none; }
101
+
102
+ small { font-size: 85%; }
103
+
104
+ // Position subscript and superscript content without affecting line-height: h5bp.com/k
105
+ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
106
+ sup { top: -0.5em; }
107
+ sub { bottom: -0.25em; }
108
+
109
+ }
110
+
111
+
112
+ // Lists
113
+ @mixin h5bp-lists {
114
+
115
+ ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
116
+ dd { margin: 0 0 0 40px; }
117
+ nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
118
+
119
+ }
120
+
121
+
122
+ // Embedded content
123
+ @mixin h5bp-embeds {
124
+
125
+ // 1. Improve image quality when scaled in IE7: h5bp.com/d
126
+ // 2. Remove the gap between images and borders on image containers: h5bp.com/e
127
+
128
+ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
129
+
130
+ // Correct overflow not hidden in IE9
131
+
132
+ svg:not(:root) { overflow: hidden; }
133
+
134
+ }
135
+
136
+
137
+ // Figures
138
+ @mixin h5bp-figures {
139
+
140
+ figure { margin: 0; }
141
+
142
+ }
143
+
144
+
145
+ // Forms
146
+ @mixin h5bp-forms {
147
+
148
+ form { margin: 0; }
149
+ fieldset { border: 0; margin: 0; padding: 0; }
150
+
151
+ // Indicate that 'label' will shift focus to the associated form element
152
+ label { cursor: pointer; }
153
+
154
+ // 1. Correct color not inheriting in IE6/7/8/9
155
+ // 2. Correct alignment displayed oddly in IE6/7
156
+
157
+ legend { border: 0; *margin-left: -7px; padding: 0; }
158
+
159
+ // 1. Correct font-size not inheriting in all browsers
160
+ // 2. Remove margins in FF3/4 S5 Chrome
161
+ // 3. Define consistent vertical alignment display in all browsers
162
+
163
+ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
164
+
165
+ // 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
166
+
167
+ button, input { line-height: normal; }
168
+
169
+ // 1. Display hand cursor for clickable form elements
170
+ // 2. Allow styling of clickable form elements in iOS
171
+ // 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
172
+
173
+ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
174
+
175
+ // Consistent box sizing and appearance
176
+
177
+ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
178
+ input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
179
+ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
180
+
181
+ // Remove inner padding and border in FF3/4: h5bp.com/l
182
+
183
+ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
184
+
185
+ // 1. Remove default vertical scrollbar in IE6/7/8/9
186
+ // 2. Allow only vertical resizing
187
+
188
+ textarea { overflow: auto; vertical-align: top; resize: vertical; }
189
+
190
+ // Colors for form validity
191
+ input:valid, textarea:valid { }
192
+ input:invalid, textarea:invalid { background-color: $invalid-background-color; }
193
+
194
+ }
195
+
196
+
197
+ // Tables
198
+ @mixin h5bp-tables {
199
+
200
+ table { border-collapse: collapse; border-spacing: 0; }
201
+ td { vertical-align: top; }
202
+
203
+ }
metadata ADDED
@@ -0,0 +1,72 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-h5bp
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Peter Gumeson
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2011-11-20 00:00:00.000000000 -08:00
13
+ default_executable:
14
+ dependencies:
15
+ - !ruby/object:Gem::Dependency
16
+ name: compass
17
+ requirement: &2168804760 !ruby/object:Gem::Requirement
18
+ none: false
19
+ requirements:
20
+ - - ! '>='
21
+ - !ruby/object:Gem::Version
22
+ version: '0'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: *2168804760
26
+ description: ! ' Compass extension of Html5 mixins extracted from v2 of Paul Irish''s
27
+ Html5 Boilerplate project '
28
+ email:
29
+ - gumeson@gmail.com
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - .gitignore
35
+ - Gemfile
36
+ - LICENSE
37
+ - README.md
38
+ - Rakefile
39
+ - compass-h5bp.gemspec
40
+ - lib/compass-h5bp.rb
41
+ - lib/compass/h5bp.rb
42
+ - lib/compass/h5bp/version.rb
43
+ - stylesheets/_h5bp.scss
44
+ - stylesheets/h5bp/_helpers.scss
45
+ - stylesheets/h5bp/_media.scss
46
+ - stylesheets/h5bp/_normalize.scss
47
+ has_rdoc: true
48
+ homepage: http://rubygems.org/gems/compass-h5bp
49
+ licenses: []
50
+ post_install_message:
51
+ rdoc_options: []
52
+ require_paths:
53
+ - lib
54
+ required_ruby_version: !ruby/object:Gem::Requirement
55
+ none: false
56
+ requirements:
57
+ - - ! '>='
58
+ - !ruby/object:Gem::Version
59
+ version: '0'
60
+ required_rubygems_version: !ruby/object:Gem::Requirement
61
+ none: false
62
+ requirements:
63
+ - - ! '>='
64
+ - !ruby/object:Gem::Version
65
+ version: '0'
66
+ requirements: []
67
+ rubyforge_project: compass-h5bp
68
+ rubygems_version: 1.6.2
69
+ signing_key:
70
+ specification_version: 3
71
+ summary: Compass extension for Html5 Boilerplate v2.0
72
+ test_files: []