compass-h5bp 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -1,7 +1,9 @@
1
1
  Compass H5bp
2
- =========================
2
+ ============
3
3
 
4
- 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.
4
+ This is a Compass extension of HTML5 mixins extracted from v4 of [HTML5 Boilerplate](http://html5boilerplate.com).
5
+ This gem provides only the CSS mixins and not the HTML or Javascript templates. This makes sense because any
6
+ implementation of HTML5 Boilerplate should be specific to the language and framework it's built on.
5
7
 
6
8
  Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
7
9
 
@@ -9,29 +11,41 @@ Or, you can read more about compass extensions [here](http://compass-style.org/h
9
11
 
10
12
 
11
13
  Installation
12
- =========================
14
+ ============
15
+
16
+ Two options:
17
+
18
+ ---
19
+
20
+ 1) A raw install using gem:
13
21
 
14
22
  gem install compass-h5bp
15
23
 
16
- Or, in your Gemfile
24
+ ---
25
+
26
+ 2) Or, if using [Bundler](http://gembundler.com/). Place the following line in your Gemfile:
17
27
 
18
28
  gem 'compass-h5bp'
19
29
 
20
- Then run
30
+ Then run:
21
31
 
22
32
  $ bundle install
23
33
 
24
34
 
25
35
  Usage
26
- =========================
36
+ =====
37
+
38
+ First, you must add the plugin to your `config.rb` (your Compass configuration file). This can be done be placing an
39
+ import line at the top of the file and is required to add the compass plugin to the sass load paths:
27
40
 
28
- Inside your Scss (or Sass) file, you first need to import the `h5bp`
29
- compass library before you can use any of the mixins:
41
+ require 'compass-h5bp'
42
+
43
+ Then, inside your SCSS (or Sass) file, you must import the `h5bp` compass library before you can use any of the mixins:
30
44
 
31
45
  @import "h5bp";
32
46
 
33
- Then include the mixins that make up the Normalize portion of Html5
34
- Boilerplate's styles. http://necolas.github.com/normalize.css
47
+ Then include the mixins that make up the [Normalize portion](http://necolas.github.com/normalize.css) of HTML5
48
+ Boilerplate's styles.
35
49
 
36
50
  You can include all of Normalize at once:
37
51
 
@@ -69,10 +83,9 @@ Finally, you can include H5bp's predefined print style media query:
69
83
 
70
84
 
71
85
  License
72
- ========
86
+ =======
73
87
 
74
- HTML5 Boilerplate created by by Paul Irish and Divya Manian
75
- http://html5boilerplate.com
88
+ [HTML5 Boilerplate](http://html5boilerplate.com), created by by Paul Irish and Divya Manian.
76
89
 
77
- Copyright (c) 2012 Peter Gumeson
90
+ Copyright (c) 2012 Peter Gumeson.
78
91
  See [LICENSE](https://github.com/sporkd/compass-h5bp/blob/master/LICENSE) for full license.
@@ -9,7 +9,7 @@ Gem::Specification.new do |s|
9
9
  s.authors = ["Peter Gumeson"]
10
10
  s.email = ["gumeson@gmail.com"]
11
11
  s.homepage = "http://rubygems.org/gems/compass-h5bp"
12
- s.summary = %q{ Compass extension for Html5 Boilerplate v4.0 }
12
+ s.summary = %q{ Compass extension for Html5 Boilerplate v4.1 }
13
13
  s.description = %q{ Compass extension of Html5 mixins extracted from v4 of the Html5 Boilerplate project (h5bp.com) }
14
14
 
15
15
  s.rubyforge_project = "compass-h5bp"
@@ -1,6 +1,6 @@
1
1
  module Compass
2
2
  module H5bp
3
- VERSION = "0.1.0"
4
- HTML5_BOILERPLATE_VERSION = "4.0.0"
3
+ VERSION = "0.1.1"
4
+ HTML5_BOILERPLATE_VERSION = "4.1.0"
5
5
  end
6
6
  end
@@ -28,7 +28,7 @@
28
28
  content: "";
29
29
  display: block;
30
30
  width: 0;
31
- height: 100%;
31
+ height: 150%;
32
32
  }
33
33
 
34
34
  @if $img != none {
@@ -1,5 +1,5 @@
1
1
  //
2
- // Normalize v1.0.1 | MIT License | git.io/normalize
2
+ // Normalize v1.1.0 | MIT License | git.io/normalize
3
3
  //
4
4
 
5
5
  @mixin h5bp-normalize {
@@ -18,7 +18,7 @@
18
18
  // Html5 display definitions
19
19
  @mixin h5bp-display {
20
20
 
21
- // Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
21
+ // Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
22
22
  article,
23
23
  aside,
24
24
  details,
@@ -27,13 +27,14 @@
27
27
  footer,
28
28
  header,
29
29
  hgroup,
30
+ main,
30
31
  nav,
31
32
  section,
32
33
  summary {
33
34
  display: block;
34
35
  }
35
36
 
36
- // Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
37
+ // Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
37
38
  audio,
38
39
  canvas,
39
40
  video {
@@ -42,15 +43,14 @@
42
43
  *zoom: 1;
43
44
  }
44
45
 
45
- // Prevents modern browsers from displaying `audio` without controls.
46
+ // Prevent modern browsers from displaying `audio` without controls.
46
47
  // Remove excess height in iOS 5 devices.
47
48
  audio:not([controls]) {
48
49
  display: none;
49
50
  height: 0;
50
51
  }
51
52
 
52
- // Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
53
- // and Safari 4.
53
+ // Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
54
54
  // Known issue: no IE 6 support.
55
55
  [hidden] {
56
56
  display: none;
@@ -62,9 +62,9 @@
62
62
  // Base
63
63
  @mixin h5bp-base {
64
64
 
65
- // 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
65
+ // 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
66
66
  // `em` units.
67
- // 2. Prevents iOS text size adjust after orientation change, without disabling
67
+ // 2. Prevent iOS text size adjust after orientation change, without disabling
68
68
  // user zoom.
69
69
  html {
70
70
  font-size: 100%; // 1
@@ -72,7 +72,7 @@
72
72
  -ms-text-size-adjust: 100%; // 2
73
73
  }
74
74
 
75
- // Addresses `font-family` inconsistency between `textarea` and other form
75
+ // Address `font-family` inconsistency between `textarea` and other form
76
76
  // elements.
77
77
 
78
78
  html,
@@ -83,7 +83,7 @@
83
83
  font-family: sans-serif;
84
84
  }
85
85
 
86
- // Addresses margins handled incorrectly in IE 6/7.
86
+ // Address margins handled incorrectly in IE 6/7.
87
87
 
88
88
  body {
89
89
  margin: 0;
@@ -99,12 +99,12 @@
99
99
  // Links
100
100
  @mixin h5bp-links {
101
101
 
102
- // Addresses `outline` inconsistency between Chrome and other browsers.
102
+ // Address `outline` inconsistency between Chrome and other browsers.
103
103
  a:focus {
104
104
  outline: thin dotted;
105
105
  }
106
106
 
107
- // Improves readability when focused and also mouse hovered in all browsers.
107
+ // Improve readability when focused and also mouse hovered in all browsers.
108
108
  a:active,
109
109
  a:hover {
110
110
  outline: 0;
@@ -116,8 +116,8 @@
116
116
  // Typography
117
117
  @mixin h5bp-typography {
118
118
 
119
- // Addresses font sizes and margins set differently in IE 6/7.
120
- // Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
119
+ // Address font sizes and margins set differently in IE 6/7.
120
+ // Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
121
121
  // and Chrome.
122
122
  h1 {
123
123
  font-size: 2em;
@@ -145,16 +145,16 @@
145
145
  }
146
146
 
147
147
  h6 {
148
- font-size: 0.75em;
148
+ font-size: 0.67em;
149
149
  margin: 2.33em 0;
150
150
  }
151
151
 
152
- // Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
152
+ // Address styling not present in IE 7/8/9, Safari 5, and Chrome.
153
153
  abbr[title] {
154
154
  border-bottom: 1px dotted;
155
155
  }
156
156
 
157
- // Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
157
+ // Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
158
158
  b,
159
159
  strong {
160
160
  font-weight: bold;
@@ -164,24 +164,32 @@
164
164
  margin: 1em 40px;
165
165
  }
166
166
 
167
- // Addresses styling not present in Safari 5 and Chrome.
167
+ // Address styling not present in Safari 5 and Chrome.
168
168
  dfn {
169
169
  font-style: italic;
170
170
  }
171
171
 
172
- // Addresses styling not present in IE 6/7/8/9.
172
+ // Address differences between Firefox and other browsers.
173
+ // Known issue: no IE 6/7 normalization.
174
+ hr {
175
+ -moz-box-sizing: content-box;
176
+ box-sizing: content-box;
177
+ height: 0;
178
+ }
179
+
180
+ // Address styling not present in IE 6/7/8/9.
173
181
  mark {
174
182
  background: #ff0;
175
183
  color: #000;
176
184
  }
177
185
 
178
- // Addresses margins set differently in IE 6/7.
186
+ // Address margins set differently in IE 6/7.
179
187
  p,
180
188
  pre {
181
189
  margin: 1em 0;
182
190
  }
183
191
 
184
- // Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
192
+ // Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
185
193
  code,
186
194
  kbd,
187
195
  pre,
@@ -191,31 +199,31 @@
191
199
  font-size: 1em;
192
200
  }
193
201
 
194
- // Improves readability of pre-formatted text in all browsers.
202
+ // Improve readability of pre-formatted text in all browsers.
195
203
  pre {
196
204
  white-space: pre;
197
205
  white-space: pre-wrap;
198
206
  word-wrap: break-word;
199
207
  }
200
208
 
201
- // Addresses CSS quotes not supported in IE 6/7.
209
+ // Address CSS quotes not supported in IE 6/7.
202
210
  q {
203
211
  quotes: none;
204
212
  }
205
213
 
206
- // Addresses `quotes` property not supported in Safari 4.
214
+ // Address `quotes` property not supported in Safari 4.
207
215
  q:before,
208
216
  q:after {
209
217
  content: '';
210
218
  content: none;
211
219
  }
212
220
 
213
- // Addresses inconsistent and variable font size in all browsers.
221
+ // Address inconsistent and variable font size in all browsers.
214
222
  small {
215
223
  font-size: 80%;
216
224
  }
217
225
 
218
- // Prevents `sub` and `sup` affecting `line-height` in all browsers.
226
+ // Prevent `sub` and `sup` affecting `line-height` in all browsers.
219
227
  sub,
220
228
  sup {
221
229
  font-size: 75%;
@@ -238,7 +246,7 @@
238
246
  // Lists
239
247
  @mixin h5bp-lists {
240
248
 
241
- // Addresses margins set differently in IE 6/7.
249
+ // Address margins set differently in IE 6/7.
242
250
  dl,
243
251
  menu,
244
252
  ol,
@@ -250,27 +258,34 @@
250
258
  margin: 0 0 0 40px;
251
259
  }
252
260
 
253
- // Addresses paddings set differently in IE 6/7.
261
+ // Address paddings set differently in IE 6/7.
254
262
  menu,
255
263
  ol,
256
264
  ul {
257
265
  padding: 0 0 0 40px;
258
266
  }
259
267
 
268
+ // Correct list images handled incorrectly in IE 7.
269
+ nav ul,
270
+ nav ol {
271
+ list-style: none;
272
+ list-style-image: none;
273
+ }
274
+
260
275
  }
261
276
 
262
277
 
263
278
  // Embedded content
264
279
  @mixin h5bp-embeds {
265
280
 
266
- // 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
267
- // 2. Improves image quality when scaled in IE 7.
281
+ // 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
282
+ // 2. Improve image quality when scaled in IE 7.
268
283
  img {
269
- border: 0; /* 1 */
270
- -ms-interpolation-mode: bicubic; /* 2 */
284
+ border: 0; // 1
285
+ -ms-interpolation-mode: bicubic; // 2
271
286
  }
272
287
 
273
- // Corrects overflow displayed oddly in IE 9.
288
+ // Correct overflow displayed oddly in IE 9.
274
289
  svg:not(:root) {
275
290
  overflow: hidden;
276
291
  }
@@ -281,7 +296,7 @@
281
296
  // Figures
282
297
  @mixin h5bp-figures {
283
298
 
284
- // Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
299
+ // Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
285
300
  figure {
286
301
  margin: 0;
287
302
  }
@@ -292,7 +307,7 @@
292
307
  // Forms
293
308
  @mixin h5bp-forms {
294
309
 
295
- // Corrects margin displayed oddly in IE 6/7.
310
+ // Correct margin displayed oddly in IE 6/7.
296
311
  form {
297
312
  margin: 0;
298
313
  }
@@ -304,9 +319,9 @@
304
319
  padding: 0.35em 0.625em 0.75em;
305
320
  }
306
321
 
307
- // 1. Corrects color not being inherited in IE 6/7/8/9.
308
- // 2. Corrects text not wrapping in Firefox 3.
309
- // 3. Corrects alignment displayed oddly in IE 6/7.
322
+ // 1. Correct color not being inherited in IE 6/7/8/9.
323
+ // 2. Correct text not wrapping in Firefox 3.
324
+ // 3. Correct alignment displayed oddly in IE 6/7.
310
325
  legend {
311
326
  border: 0; // 1
312
327
  padding: 0;
@@ -314,10 +329,11 @@
314
329
  *margin-left: -7px; // 3
315
330
  }
316
331
 
317
- // 1. Corrects font size not being inherited in all browsers.
318
- // 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
332
+ // 1. Correct font size not being inherited in all browsers.
333
+ // 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
319
334
  // and Chrome.
320
- // 3. Improves appearance and consistency in all browsers.button,
335
+ // 3. Improve appearance and consistency in all browsers.
336
+ button,
321
337
  input,
322
338
  select,
323
339
  textarea {
@@ -327,19 +343,28 @@
327
343
  *vertical-align: middle; // 3
328
344
  }
329
345
 
330
- // Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
346
+ // Address Firefox 3+ setting `line-height` on `input` using `!important` in
331
347
  // the UA stylesheet.
332
348
  button,
333
349
  input {
334
350
  line-height: normal;
335
351
  }
336
352
 
353
+ // Address inconsistent `text-transform` inheritance for `button` and `select`.
354
+ // All other form control elements do not inherit `text-transform` values.
355
+ // Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
356
+ // Correct `select` style inheritance in Firefox 4+ and Opera.
357
+ button,
358
+ select {
359
+ text-transform: none;
360
+ }
361
+
337
362
  // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
338
363
  // and `video` controls.
339
- // 2. Corrects inability to style clickable `input` types in iOS.
340
- // 3. Improves usability and consistency of cursor style between image-type
364
+ // 2. Correct inability to style clickable `input` types in iOS.
365
+ // 3. Improve usability and consistency of cursor style between image-type
341
366
  // `input` and others.
342
- // 4. Removes inner spacing in IE 7 without affecting normal text inputs.
367
+ // 4. Remove inner spacing in IE 7 without affecting normal text inputs.
343
368
  // Known issue: inner spacing remains in IE 6.
344
369
  button,
345
370
  html input[type="button"], // 1
@@ -352,13 +377,13 @@
352
377
 
353
378
  // Re-set default cursor for disabled elements.
354
379
  button[disabled],
355
- input[disabled] {
380
+ html input[disabled] {
356
381
  cursor: default;
357
382
  }
358
383
 
359
- // 1. Addresses box sizing set to content-box in IE 8/9.
360
- // 2. Removes excess padding in IE 8/9.
361
- // 3. Removes excess padding in IE 7.
384
+ // 1. Address box sizing set to content-box in IE 8/9.
385
+ // 2. Remove excess padding in IE 8/9.
386
+ // 3. Remove excess padding in IE 7.
362
387
  // Known issue: excess padding remains in IE 6.
363
388
  input[type="checkbox"],
364
389
  input[type="radio"] {
@@ -368,8 +393,8 @@
368
393
  *width: 13px; // 3
369
394
  }
370
395
 
371
- // 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
372
- // 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
396
+ // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
397
+ // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
373
398
  // (include `-moz` to future-proof).
374
399
  input[type="search"] {
375
400
  -webkit-appearance: textfield; // 1
@@ -378,22 +403,22 @@
378
403
  box-sizing: content-box;
379
404
  }
380
405
 
381
- // Removes inner padding and search cancel button in Safari 5 and Chrome
406
+ // Remove inner padding and search cancel button in Safari 5 and Chrome
382
407
  // on OS X.
383
408
  input[type="search"]::-webkit-search-cancel-button,
384
409
  input[type="search"]::-webkit-search-decoration {
385
410
  -webkit-appearance: none;
386
411
  }
387
412
 
388
- // Removes inner padding and border in Firefox 3+.
413
+ // Remove inner padding and border in Firefox 3+.
389
414
  button::-moz-focus-inner,
390
415
  input::-moz-focus-inner {
391
416
  border: 0;
392
417
  padding: 0;
393
418
  }
394
419
 
395
- // 1. Removes default vertical scrollbar in IE 6/7/8/9.
396
- // 2. Improves readability and alignment in all browsers.
420
+ // 1. Remove default vertical scrollbar in IE 6/7/8/9.
421
+ // 2. Improve readability and alignment in all browsers.
397
422
  textarea {
398
423
  overflow: auto; // 1
399
424
  vertical-align: top; // 2
@@ -7,12 +7,16 @@ require 'fileutils'
7
7
  PROJECT_DIR = File.join(File.dirname(__FILE__), 'project')
8
8
  ORIGINAL_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'original.css')
9
9
  TEST_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'test.css')
10
+ ORIGINAL_NORMALIZE_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'original_normalize.css')
11
+ TEST_NORMALIZE_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'test_normalize.css')
10
12
 
11
13
  class CompassH5bpTest < Test::Unit::TestCase
12
14
 
13
15
  def test_compass_version_matches_original
14
16
  FileUtils.rm_f ORIGINAL_OUTPUT_PATH
15
17
  FileUtils.rm_f TEST_OUTPUT_PATH
18
+ FileUtils.rm_f ORIGINAL_NORMALIZE_OUTPUT_PATH
19
+ FileUtils.rm_f TEST_NORMALIZE_OUTPUT_PATH
16
20
  Compass.reset_configuration!
17
21
  Compass.configuration do |config|
18
22
  config.environment = :production
@@ -28,7 +32,10 @@ class CompassH5bpTest < Test::Unit::TestCase
28
32
  compiler.run
29
33
  original_css = read_and_normalize(ORIGINAL_OUTPUT_PATH)
30
34
  test_css = read_and_normalize(TEST_OUTPUT_PATH)
35
+ original_normalize_css = read_and_normalize(ORIGINAL_NORMALIZE_OUTPUT_PATH)
36
+ test_normalize_css = read_and_normalize(TEST_NORMALIZE_OUTPUT_PATH)
31
37
  assert_equal original_css, test_css
38
+ assert_equal original_normalize_css, test_normalize_css
32
39
  end
33
40
 
34
41
  def read_and_normalize(file)
@@ -129,7 +129,7 @@ textarea {
129
129
  content: "";
130
130
  display: block;
131
131
  width: 0;
132
- height: 100%;
132
+ height: 150%;
133
133
  }
134
134
 
135
135
  /*
@@ -221,8 +221,10 @@ textarea {
221
221
  body { margin: 0; } //HACK
222
222
  }
223
223
 
224
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
225
- only screen and (min-resolution: 144dpi) {
224
+ @media print,
225
+ (-o-min-device-pixel-ratio: 5/4),
226
+ (-webkit-min-device-pixel-ratio: 1.25),
227
+ (min-resolution: 120dpi) {
226
228
  /* Style adjustments for high resolution devices */
227
229
  body { margin: 0; } //HACK
228
230
  }
@@ -0,0 +1,527 @@
1
+ /*! normalize.css v1.1.0 | MIT License | git.io/normalize */
2
+
3
+ /* ==========================================================================
4
+ HTML5 display definitions
5
+ ========================================================================== */
6
+
7
+ /**
8
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
9
+ */
10
+
11
+ article,
12
+ aside,
13
+ details,
14
+ figcaption,
15
+ figure,
16
+ footer,
17
+ header,
18
+ hgroup,
19
+ main,
20
+ nav,
21
+ section,
22
+ summary {
23
+ display: block;
24
+ }
25
+
26
+ /**
27
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
28
+ */
29
+
30
+ audio,
31
+ canvas,
32
+ video {
33
+ display: inline-block;
34
+ *display: inline;
35
+ *zoom: 1;
36
+ }
37
+
38
+ /**
39
+ * Prevent modern browsers from displaying `audio` without controls.
40
+ * Remove excess height in iOS 5 devices.
41
+ */
42
+
43
+ audio:not([controls]) {
44
+ display: none;
45
+ height: 0;
46
+ }
47
+
48
+ /**
49
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
50
+ * Known issue: no IE 6 support.
51
+ */
52
+
53
+ [hidden] {
54
+ display: none;
55
+ }
56
+
57
+ /* ==========================================================================
58
+ Base
59
+ ========================================================================== */
60
+
61
+ /**
62
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
63
+ * `em` units.
64
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
65
+ * user zoom.
66
+ */
67
+
68
+ html {
69
+ font-size: 100%; // 1
70
+ -webkit-text-size-adjust: 100%; // 2
71
+ -ms-text-size-adjust: 100%; // 2
72
+ }
73
+
74
+ /**
75
+ * Address `font-family` inconsistency between `textarea` and other form
76
+ * elements.
77
+ */
78
+
79
+ html,
80
+ button,
81
+ input,
82
+ select,
83
+ textarea {
84
+ font-family: sans-serif;
85
+ }
86
+
87
+ /**
88
+ * Address margins handled incorrectly in IE 6/7.
89
+ */
90
+
91
+ body {
92
+ margin: 0;
93
+ }
94
+
95
+ /* ==========================================================================
96
+ Links
97
+ ========================================================================== */
98
+
99
+ /**
100
+ * Address `outline` inconsistency between Chrome and other browsers.
101
+ */
102
+
103
+ a:focus {
104
+ outline: thin dotted;
105
+ }
106
+
107
+ /**
108
+ * Improve readability when focused and also mouse hovered in all browsers.
109
+ */
110
+
111
+ a:active,
112
+ a:hover {
113
+ outline: 0;
114
+ }
115
+
116
+ /* ==========================================================================
117
+ Typography
118
+ ========================================================================== */
119
+
120
+ /**
121
+ * Address font sizes and margins set differently in IE 6/7.
122
+ * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
123
+ * and Chrome.
124
+ */
125
+
126
+ h1 {
127
+ font-size: 2em;
128
+ margin: 0.67em 0;
129
+ }
130
+
131
+ h2 {
132
+ font-size: 1.5em;
133
+ margin: 0.83em 0;
134
+ }
135
+
136
+ h3 {
137
+ font-size: 1.17em;
138
+ margin: 1em 0;
139
+ }
140
+
141
+ h4 {
142
+ font-size: 1em;
143
+ margin: 1.33em 0;
144
+ }
145
+
146
+ h5 {
147
+ font-size: 0.83em;
148
+ margin: 1.67em 0;
149
+ }
150
+
151
+ h6 {
152
+ font-size: 0.67em;
153
+ margin: 2.33em 0;
154
+ }
155
+
156
+ /**
157
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
158
+ */
159
+
160
+ abbr[title] {
161
+ border-bottom: 1px dotted;
162
+ }
163
+
164
+ /**
165
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
166
+ */
167
+
168
+ b,
169
+ strong {
170
+ font-weight: bold;
171
+ }
172
+
173
+ blockquote {
174
+ margin: 1em 40px;
175
+ }
176
+
177
+ /**
178
+ * Address styling not present in Safari 5 and Chrome.
179
+ */
180
+
181
+ dfn {
182
+ font-style: italic;
183
+ }
184
+
185
+ /**
186
+ * Address differences between Firefox and other browsers.
187
+ * Known issue: no IE 6/7 normalization.
188
+ */
189
+
190
+ hr {
191
+ -moz-box-sizing: content-box;
192
+ box-sizing: content-box;
193
+ height: 0;
194
+ }
195
+
196
+ /**
197
+ * Address styling not present in IE 6/7/8/9.
198
+ */
199
+
200
+ mark {
201
+ background: #ff0;
202
+ color: #000;
203
+ }
204
+
205
+ /**
206
+ * Address margins set differently in IE 6/7.
207
+ */
208
+
209
+ p,
210
+ pre {
211
+ margin: 1em 0;
212
+ }
213
+
214
+ /**
215
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
216
+ */
217
+
218
+ code,
219
+ kbd,
220
+ pre,
221
+ samp {
222
+ font-family: monospace, serif;
223
+ _font-family: 'courier new', monospace;
224
+ font-size: 1em;
225
+ }
226
+
227
+ /**
228
+ * Improve readability of pre-formatted text in all browsers.
229
+ */
230
+
231
+ pre {
232
+ white-space: pre;
233
+ white-space: pre-wrap;
234
+ word-wrap: break-word;
235
+ }
236
+
237
+ /**
238
+ * Address CSS quotes not supported in IE 6/7.
239
+ */
240
+
241
+ q {
242
+ quotes: none;
243
+ }
244
+
245
+ /**
246
+ * Address `quotes` property not supported in Safari 4.
247
+ */
248
+
249
+ q:before,
250
+ q:after {
251
+ content: '';
252
+ content: none;
253
+ }
254
+
255
+ /**
256
+ * Address inconsistent and variable font size in all browsers.
257
+ */
258
+
259
+ small {
260
+ font-size: 80%;
261
+ }
262
+
263
+ /**
264
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
265
+ */
266
+
267
+ sub,
268
+ sup {
269
+ font-size: 75%;
270
+ line-height: 0;
271
+ position: relative;
272
+ vertical-align: baseline;
273
+ }
274
+
275
+ sup {
276
+ top: -0.5em;
277
+ }
278
+
279
+ sub {
280
+ bottom: -0.25em;
281
+ }
282
+
283
+ /* ==========================================================================
284
+ Lists
285
+ ========================================================================== */
286
+
287
+ /**
288
+ * Address margins set differently in IE 6/7.
289
+ */
290
+
291
+ dl,
292
+ menu,
293
+ ol,
294
+ ul {
295
+ margin: 1em 0;
296
+ }
297
+
298
+ dd {
299
+ margin: 0 0 0 40px;
300
+ }
301
+
302
+ /**
303
+ * Address paddings set differently in IE 6/7.
304
+ */
305
+
306
+ menu,
307
+ ol,
308
+ ul {
309
+ padding: 0 0 0 40px;
310
+ }
311
+
312
+ /**
313
+ * Correct list images handled incorrectly in IE 7.
314
+ */
315
+
316
+ nav ul,
317
+ nav ol {
318
+ list-style: none;
319
+ list-style-image: none;
320
+ }
321
+
322
+ /* ==========================================================================
323
+ Embedded content
324
+ ========================================================================== */
325
+
326
+ /**
327
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
328
+ * 2. Improve image quality when scaled in IE 7.
329
+ */
330
+
331
+ img {
332
+ border: 0; // 1
333
+ -ms-interpolation-mode: bicubic; // 2
334
+ }
335
+
336
+ /**
337
+ * Correct overflow displayed oddly in IE 9.
338
+ */
339
+
340
+ svg:not(:root) {
341
+ overflow: hidden;
342
+ }
343
+
344
+ /* ==========================================================================
345
+ Figures
346
+ ========================================================================== */
347
+
348
+ /**
349
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
350
+ */
351
+
352
+ figure {
353
+ margin: 0;
354
+ }
355
+
356
+ /* ==========================================================================
357
+ Forms
358
+ ========================================================================== */
359
+
360
+ /**
361
+ * Correct margin displayed oddly in IE 6/7.
362
+ */
363
+
364
+ form {
365
+ margin: 0;
366
+ }
367
+
368
+ /**
369
+ * Define consistent border, margin, and padding.
370
+ */
371
+
372
+ fieldset {
373
+ border: 1px solid #c0c0c0;
374
+ margin: 0 2px;
375
+ padding: 0.35em 0.625em 0.75em;
376
+ }
377
+
378
+ /**
379
+ * 1. Correct color not being inherited in IE 6/7/8/9.
380
+ * 2. Correct text not wrapping in Firefox 3.
381
+ * 3. Correct alignment displayed oddly in IE 6/7.
382
+ */
383
+
384
+ legend {
385
+ border: 0; // 1
386
+ padding: 0;
387
+ white-space: normal; // 2
388
+ *margin-left: -7px; // 3
389
+ }
390
+
391
+ /**
392
+ * 1. Correct font size not being inherited in all browsers.
393
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
394
+ * and Chrome.
395
+ * 3. Improve appearance and consistency in all browsers.
396
+ */
397
+
398
+ button,
399
+ input,
400
+ select,
401
+ textarea {
402
+ font-size: 100%; // 1
403
+ margin: 0; // 2
404
+ vertical-align: baseline; // 3
405
+ *vertical-align: middle; // 3
406
+ }
407
+
408
+ /**
409
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
410
+ * the UA stylesheet.
411
+ */
412
+
413
+ button,
414
+ input {
415
+ line-height: normal;
416
+ }
417
+
418
+ /**
419
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
420
+ * All other form control elements do not inherit `text-transform` values.
421
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
422
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
423
+ */
424
+
425
+ button,
426
+ select {
427
+ text-transform: none;
428
+ }
429
+
430
+ /**
431
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
432
+ * and `video` controls.
433
+ * 2. Correct inability to style clickable `input` types in iOS.
434
+ * 3. Improve usability and consistency of cursor style between image-type
435
+ * `input` and others.
436
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
437
+ * Known issue: inner spacing remains in IE 6.
438
+ */
439
+
440
+ button,
441
+ html input[type="button"], // 1
442
+ input[type="reset"],
443
+ input[type="submit"] {
444
+ -webkit-appearance: button; // 2
445
+ cursor: pointer; // 3
446
+ *overflow: visible; // 4
447
+ }
448
+
449
+ /**
450
+ * Re-set default cursor for disabled elements.
451
+ */
452
+
453
+ button[disabled],
454
+ html input[disabled] {
455
+ cursor: default;
456
+ }
457
+
458
+ /**
459
+ * 1. Address box sizing set to content-box in IE 8/9.
460
+ * 2. Remove excess padding in IE 8/9.
461
+ * 3. Remove excess padding in IE 7.
462
+ * Known issue: excess padding remains in IE 6.
463
+ */
464
+
465
+ input[type="checkbox"],
466
+ input[type="radio"] {
467
+ box-sizing: border-box; // 1
468
+ padding: 0; // 2
469
+ *height: 13px; // 3
470
+ *width: 13px; // 3
471
+ }
472
+
473
+ /**
474
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
475
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
476
+ * (include `-moz` to future-proof).
477
+ */
478
+
479
+ input[type="search"] {
480
+ -webkit-appearance: textfield; // 1
481
+ -moz-box-sizing: content-box;
482
+ -webkit-box-sizing: content-box; // 2
483
+ box-sizing: content-box;
484
+ }
485
+
486
+ /**
487
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
488
+ * on OS X.
489
+ */
490
+
491
+ input[type="search"]::-webkit-search-cancel-button,
492
+ input[type="search"]::-webkit-search-decoration {
493
+ -webkit-appearance: none;
494
+ }
495
+
496
+ /**
497
+ * Remove inner padding and border in Firefox 3+.
498
+ */
499
+
500
+ button::-moz-focus-inner,
501
+ input::-moz-focus-inner {
502
+ border: 0;
503
+ padding: 0;
504
+ }
505
+
506
+ /**
507
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
508
+ * 2. Improve readability and alignment in all browsers.
509
+ */
510
+
511
+ textarea {
512
+ overflow: auto; // 1
513
+ vertical-align: top; // 2
514
+ }
515
+
516
+ /* ==========================================================================
517
+ Tables
518
+ ========================================================================== */
519
+
520
+ /**
521
+ * Remove most spacing between table cells.
522
+ */
523
+
524
+ table {
525
+ border-collapse: collapse;
526
+ border-spacing: 0;
527
+ }
@@ -9,8 +9,10 @@
9
9
  body { margin: 0; } //HACK
10
10
  }
11
11
 
12
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
13
- only screen and (min-resolution: 144dpi) {
12
+ @media print,
13
+ (-o-min-device-pixel-ratio: 5/4),
14
+ (-webkit-min-device-pixel-ratio: 1.25),
15
+ (min-resolution: 120dpi) {
14
16
  /* Style adjustments for high resolution devices */
15
17
  body { margin: 0; } //HACK
16
18
  }
@@ -0,0 +1,2 @@
1
+ @import "h5bp";
2
+ @include h5bp-normalize;
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-h5bp
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-11-29 00:00:00.000000000 Z
12
+ date: 2013-04-03 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: compass
@@ -53,7 +53,9 @@ files:
53
53
  - test/compass_h5bp_test.rb
54
54
  - test/project/css/.gitkeep
55
55
  - test/project/sass/original.scss
56
+ - test/project/sass/original_normalize.scss
56
57
  - test/project/sass/test.scss
58
+ - test/project/sass/test_normalize.scss
57
59
  homepage: http://rubygems.org/gems/compass-h5bp
58
60
  licenses: []
59
61
  post_install_message:
@@ -66,26 +68,22 @@ required_ruby_version: !ruby/object:Gem::Requirement
66
68
  - - ! '>='
67
69
  - !ruby/object:Gem::Version
68
70
  version: '0'
69
- segments:
70
- - 0
71
- hash: 1451010771291531907
72
71
  required_rubygems_version: !ruby/object:Gem::Requirement
73
72
  none: false
74
73
  requirements:
75
74
  - - ! '>='
76
75
  - !ruby/object:Gem::Version
77
76
  version: '0'
78
- segments:
79
- - 0
80
- hash: 1451010771291531907
81
77
  requirements: []
82
78
  rubyforge_project: compass-h5bp
83
79
  rubygems_version: 1.8.23
84
80
  signing_key:
85
81
  specification_version: 3
86
- summary: Compass extension for Html5 Boilerplate v4.0
82
+ summary: Compass extension for Html5 Boilerplate v4.1
87
83
  test_files:
88
84
  - test/compass_h5bp_test.rb
89
85
  - test/project/css/.gitkeep
90
86
  - test/project/sass/original.scss
87
+ - test/project/sass/original_normalize.scss
91
88
  - test/project/sass/test.scss
89
+ - test/project/sass/test_normalize.scss