compass-h5bp 0.1.2 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: d909d3efd6b91890c366b4d89a50572b5b2a6ebc
4
+ data.tar.gz: 9981b7bde5aaf8b28917a793d643e9f42195052b
5
+ SHA512:
6
+ metadata.gz: 2eddd19cd81518052fb8b05f37d7022202e5165be0e5fff97da08bdb0c5ff9e47a860d55eb23491f11061e6f7b6109dd3944e381b7a1f42b7ba950bee447af99
7
+ data.tar.gz: 8d5f523caf30805372aab9afc99069acc30a049711a2b865956891d3bd93eb6a0c8d46054cece94f309fe6d8b70c1acf8e5e58d2dbbea935e589ab2d0b82812f
@@ -0,0 +1,16 @@
1
+ # For more information about the properties used in
2
+ # this file, please see the EditorConfig documentation:
3
+ # http://editorconfig.org/
4
+
5
+ root = true
6
+
7
+ [*]
8
+ charset = utf-8
9
+ end_of_line = lf
10
+ indent_size = 4
11
+ indent_style = space
12
+ insert_final_newline = true
13
+ trim_trailing_whitespace = true
14
+
15
+ [*.{scss,html,rb}]
16
+ indent_size = 2
data/.gitignore CHANGED
@@ -5,3 +5,4 @@ pkg/*
5
5
  .rvmrc
6
6
  test/project/css/*.css
7
7
  vendor/bundle
8
+ *.sublime-*
data/LICENSE CHANGED
@@ -1,3 +1,5 @@
1
+ The MIT License (MIT)
2
+
1
3
  Copyright (c) 2011 Peter Gumeson
2
4
 
3
5
  Permission is hereby granted, free of charge, to any person obtaining
data/README.md CHANGED
@@ -1,91 +1,87 @@
1
- Compass H5bp
2
- ============
1
+ # An HTML5 Boilerplate Extension for Compass
3
2
 
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.
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).
7
4
 
8
- Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
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.
9
6
 
10
- Or, you can read more about compass extensions [here](http://compass-style.org/help/tutorials/extensions/).
7
+ ## Installation
11
8
 
9
+ ### Two options:
10
+ * Install using gem:
11
+ `gem install compass-h5bp`
12
12
 
13
- Installation
14
- ============
13
+ * 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-h5bp'`
15
14
 
16
- Two options:
15
+ ## Usage
17
16
 
18
- ---
19
-
20
- 1) A raw install using gem:
17
+ First, you must add the plugin to your `config.rb` (your Compass configuration file). This can be done be placing an
18
+ import line at the top of the file and is required to add the Compass plugin to the Sass load paths:
21
19
 
22
- gem install compass-h5bp
20
+ require 'compass-h5bp'
23
21
 
24
- ---
22
+ Inside your SCSS (or Sass) file, you must import the `h5bp` compass library before you can use any of the mixins:
25
23
 
26
- 2) Or, if using [Bundler](http://gembundler.com/). Place the following line in your Gemfile:
24
+ @import "h5bp";
27
25
 
28
- gem 'compass-h5bp'
26
+ ### Simple Implementation
27
+ 1. Include the h5bp mixin:
29
28
 
30
- Then run:
29
+ @include h5bp;
31
30
 
32
- $ bundle install
31
+ 2. *Optional:* Redefine the mixin `h5bp-custom` to declare custom modifications to the HTML5 Boilerplate styles.
33
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.
34
35
 
35
- Usage
36
- =====
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:
37
38
 
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:
39
+ @include h5bp-normalize;
40
40
 
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:
41
+ Or pull in only the portions of Normalize you want:
44
42
 
45
- @import "h5bp";
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;
46
51
 
47
- Then include the mixins that make up the [Normalize portion](http://necolas.github.com/normalize.css) of HTML5
48
- Boilerplate's styles.
52
+ 2. Include the opinionated default base styles:
49
53
 
50
- You can include all of Normalize at once:
54
+ @include h5bp-base-styles;
51
55
 
52
- @include h5bp-normalize;
56
+ 3. You can include the styling for the browser upgrade warning:
53
57
 
54
- Or pull in only the portions of Normalize you want:
58
+ @include h5bp-browserupgrade;
55
59
 
56
- @include h5bp-display;
57
- @include h5bp-base;
58
- @include h5bp-links;
59
- @include h5bp-typography;
60
- @include h5bp-lists;
61
- @include h5bp-embeds;
62
- @include h5bp-figures;
63
- @include h5bp-forms;
64
- @include h5bp-tables;
60
+ 4. Provide styling to the 404 page (requires that you specify the class `errorpage` for the html of the 404 document):
65
61
 
66
- Next you can include the opinionated default base styles:
62
+ @include h5bp-errorpage;
67
63
 
68
- @include h5bp-base-styles;
64
+ 5. Define your custom modifications to the HTML5 Boilerplate styles here.
69
65
 
70
- You can include the default Html5 Boilerplate Chrome Frame notification styling:
66
+ 6. Let h5bp define some semantic helper classes. (e.g. `.clearfix`):
71
67
 
72
- @include h5bp-chromeframe;
68
+ @include h5bp-helpers;
73
69
 
74
- Now you can define your own custom CSS here.
70
+ There are also specific mixins provided in `h5bp-helpers` you can call instead.
75
71
 
76
- Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix`):
72
+ 7. Include h5bp's predefined print style media query:
77
73
 
78
- @include h5bp-helpers;
74
+ @include h5bp-media;
79
75
 
80
- Finally, you can include H5bp's predefined print style media query:
76
+ ## Caveats
81
77
 
82
- @include h5bp-media;
78
+ 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.
83
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.
84
81
 
85
- License
86
- =======
82
+ ## Acknowledgments
87
83
 
88
84
  [HTML5 Boilerplate](http://html5boilerplate.com), created by by Paul Irish and Divya Manian.
89
85
 
90
86
  Copyright (c) 2012 Peter Gumeson.
91
- See [LICENSE](https://github.com/sporkd/compass-h5bp/blob/master/LICENSE) for full license.
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.
@@ -1,23 +1,23 @@
1
1
  # -*- encoding: utf-8 -*-
2
- $:.push File.expand_path("../lib", __FILE__)
3
- require "compass/h5bp/version"
2
+ $LOAD_PATH.push File.expand_path('../lib', __FILE__)
3
+ require 'compass/h5bp/version'
4
4
 
5
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 v4.1 }
13
- s.description = %q{ Compass extension of Html5 mixins extracted from v4 of the Html5 Boilerplate project (h5bp.com) }
14
-
15
- s.rubyforge_project = "compass-h5bp"
6
+ s.name = 'compass-h5bp'
7
+ s.version = Compass::H5bp::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.required_ruby_version = '~> 2.0'
10
+ s.authors = ['Peter Gumeson']
11
+ s.email = 'gumeson@gmail.com'
12
+ s.homepage = 'http://rubygems.org/gems/compass-h5bp'
13
+ s.summary = 'Compass extension for HTML5 Boilerplate v5.0'
14
+ s.description = 'Compass extension of HTML5 mixins extracted from the HTML5 Boilerplate project (h5bp.com)'
15
+ s.license = 'MIT'
16
16
 
17
17
  s.files = `git ls-files`.split("\n")
18
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"]
19
+ s.executables = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
20
+ s.require_paths = ['lib']
21
21
 
22
- s.add_dependency("compass")
22
+ s.add_runtime_dependency 'compass', '~> 1.0', '>= 1.0.3'
23
23
  end
@@ -0,0 +1,17 @@
1
+ require 'compass/import-once/activate'
2
+ # Require any additional compass plugins here.
3
+ require 'compass-h5bp'
4
+
5
+ css_dir = 'test/project/css'
6
+ sass_dir = 'test/project/sass'
7
+
8
+ # You can select your preferred output style here
9
+ # (can be overridden via the command line):
10
+ # output_style = :expanded or :nested or :compact or :compressed
11
+
12
+ # To enable relative paths to assets via compass helper functions. Uncomment:
13
+ # relative_assets = true
14
+
15
+ # To disable debugging comments that display the
16
+ # original location of your selectors. Uncomment:
17
+ line_comments = false
@@ -1 +1 @@
1
- require "compass/h5bp"
1
+ require 'compass/h5bp'
@@ -1,7 +1,11 @@
1
- require "compass/h5bp/version"
1
+ require 'compass/h5bp/version'
2
2
 
3
3
  module Compass
4
- module H5bp
5
- Compass::Frameworks.register("compass-h5bp", :path => "#{File.dirname(__FILE__)}/../..")
4
+ # HTML5 Boilerplate v5 Compass Extension
5
+ module Html5bp
6
+ Compass::Frameworks.register(
7
+ 'compass-h5bp',
8
+ path: "#{File.dirname(__FILE__)}/../.."
9
+ )
6
10
  end
7
11
  end
@@ -1,6 +1,6 @@
1
1
  module Compass
2
2
  module H5bp
3
- VERSION = "0.1.2"
4
- HTML5_BOILERPLATE_VERSION = "4.1.0"
3
+ VERSION = "1.0.0"
4
+ HTML5_BOILERPLATE_VERSION = "5.0"
5
5
  end
6
6
  end
@@ -2,9 +2,26 @@
2
2
  //
3
3
  // What follows is the result of much research on cross-browser styling.
4
4
  // Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
5
- // Kroc Camen, and the H5BP dev community and team.
5
+ // Kroc Camen, and the h5bp dev community and team.
6
6
 
7
- @import "h5bp/normalize";
8
- @import "h5bp/main";
9
- @import "h5bp/helpers";
10
- @import "h5bp/media";
7
+ @import 'h5bp/normalize';
8
+ @import 'h5bp/main';
9
+ @import 'h5bp/browserupgrade';
10
+ @import 'h5bp/errorpage';
11
+ @import 'h5bp/helpers';
12
+ @import 'h5bp/media';
13
+
14
+ @mixin h5bp-custom {
15
+ // Redefine this mixin to add custom modifications to H5BP styles.
16
+
17
+ }
18
+
19
+ @mixin h5bp {
20
+ @include h5bp-normalize;
21
+ @include h5bp-main;
22
+ @include h5bp-browserupgrade;
23
+ @include h5bp-errorpage;
24
+ @include h5bp-custom;
25
+ @include h5bp-helpers;
26
+ @include h5bp-media;
27
+ }
@@ -0,0 +1,9 @@
1
+ // Browser Upgrade Message
2
+ @mixin h5bp-browserupgrade {
3
+ .browserupgrade {
4
+ margin: 0.2em 0;
5
+ background: #ccc;
6
+ color: #000;
7
+ padding: 0.2em 0;
8
+ }
9
+ }
@@ -0,0 +1,45 @@
1
+ @mixin h5bp-errorpage {
2
+ html.errorpages {
3
+ color: #888;
4
+ display: table;
5
+ font-family: sans-serif;
6
+ height: 100%;
7
+ text-align: center;
8
+ width: 100%;
9
+
10
+ * {
11
+ line-height: 1.2;
12
+ margin: 0;
13
+ }
14
+
15
+ body {
16
+ display: table-cell;
17
+ vertical-align: middle;
18
+ margin: 2em auto;
19
+ }
20
+
21
+ h1 {
22
+ color: #555;
23
+ font-size: 2em;
24
+ font-weight: 400;
25
+ }
26
+
27
+ p {
28
+ margin: 0 auto;
29
+ width: 280px;
30
+ }
31
+
32
+ @media only screen and (max-width: 280px) {
33
+
34
+ body, p {
35
+ width: 95%;
36
+ }
37
+
38
+ h1 {
39
+ font-size: 1.5em;
40
+ margin: 0 0 0.3em;
41
+ }
42
+
43
+ }
44
+ }
45
+ }
@@ -1,57 +1,26 @@
1
- //
2
1
  // Helper classes
3
- //
4
-
5
2
  @mixin h5bp-helpers {
6
3
 
7
- .ir { @include image-replacement; }
4
+ .hidden { @include h5bp-hidden; }
8
5
 
9
- .hidden { @include hidden; }
6
+ .visuallyhidden { @include h5bp-visuallyhidden; }
10
7
 
11
- .visuallyhidden { @include visually-hidden; }
12
-
13
- .invisible { @include invisible; }
8
+ .invisible { @include h5bp-invisible; }
14
9
 
15
- .clearfix { @include micro-clearfix; }
10
+ .clearfix { @include h5bp-clearfix; }
16
11
 
17
12
  }
18
13
 
19
- // Image replacement
20
- @mixin image-replacement($img: none, $x: 50%, $y: 50%) {
21
- background-color: transparent;
22
- border: 0;
23
- overflow: hidden;
24
- // IE 6/7 fallback
25
- *text-indent: -9999px;
26
-
27
- &:before {
28
- content: "";
29
- display: block;
30
- width: 0;
31
- height: 150%;
32
- }
33
-
34
- @if $img != none {
35
- background-image: image-url($img);
36
- background-position: $x $y;
37
- }
38
- }
39
-
40
- // Uses image dimensions
41
- @mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
42
- @include image-replacement($img, $x, $y);
43
- width: image-width($img);
44
- height: image-height($img);
45
- }
46
-
47
- // Hide from both screenreaders and browsers: h5bp.com/u
48
- @mixin hidden {
14
+ // Hide from both screenreaders and browsers:
15
+ // http://juicystudio.com/article/screen-readers-display-none.php
16
+ @mixin h5bp-hidden {
49
17
  display: none !important;
50
18
  visibility: hidden;
51
19
  }
52
20
 
53
- // Hide only visually, but have it available for screenreaders: h5bp.com/v
54
- @mixin visually-hidden {
21
+ // Hide only visually, but have it available for screenreaders:
22
+ // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
23
+ @mixin h5bp-visuallyhidden {
55
24
  border: 0;
56
25
  clip: rect(0 0 0 0);
57
26
  height: 1px;
@@ -60,9 +29,9 @@
60
29
  padding: 0;
61
30
  position: absolute;
62
31
  width: 1px;
63
-
32
+
64
33
  // Extends the .visuallyhidden class to allow the element to be focusable
65
- // when navigated to via the keyboard: h5bp.com/p
34
+ // when navigated to via the keyboard: https://www.drupal.org/node/897638
66
35
  &.focusable:active,
67
36
  &.focusable:focus {
68
37
  clip: auto;
@@ -75,7 +44,7 @@
75
44
  }
76
45
 
77
46
  // Hide visually and from screenreaders, but maintain layout
78
- @mixin invisible {
47
+ @mixin h5bp-invisible {
79
48
  visibility: hidden;
80
49
  }
81
50
 
@@ -88,7 +57,7 @@
88
57
  // that receive the `clearfix` class.
89
58
  // 2. The use of `table` rather than `block` is only necessary if using
90
59
  // `:before` to contain the top-margins of child elements.
91
- @mixin micro-clearfix {
60
+ @mixin h5bp-clearfix {
92
61
  &:before,
93
62
  &:after {
94
63
  content: " "; // 1
@@ -98,10 +67,4 @@
98
67
  &:after {
99
68
  clear: both;
100
69
  }
101
-
102
- // For IE 6/7 only
103
- // Include this rule to trigger hasLayout and contain floats.
104
- & {
105
- *zoom: 1;
106
- }
107
- }
70
+ }