html5-boilerplate 0.1.2 → 0.1.3
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/README.md +6 -5
- data/VERSION +1 -1
- data/stylesheets/html5-boilerplate/_helpers.scss +1 -4
- data/stylesheets/html5-boilerplate/_page.scss +30 -15
- data/stylesheets/html5-boilerplate/_reset.scss +2 -2
- data/templates/project/partials/_base.scss +11 -7
- data/templates/project/partials/_html5_boilerplate.scss +6 -4
- metadata +3 -3
data/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Compass Html5 Boilerplate
|
|
|
4
4
|
HTML5 Boilerplate is a Compass extension based on HTML5 Boilerplate by Paul Irish.
|
|
5
5
|
You can use it to kick-start fully compliant HTML5 applications. Generate either
|
|
6
6
|
stand-alone Compass projects, or Rails applications with fully integrated
|
|
7
|
-
Haml and Sass (
|
|
7
|
+
Haml and Sass (Scss) templates.
|
|
8
8
|
|
|
9
9
|
Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
|
|
10
10
|
|
|
@@ -51,10 +51,10 @@ Rails Installation
|
|
|
51
51
|
config/compass.rb
|
|
52
52
|
config/initializers/compass.rb
|
|
53
53
|
|
|
54
|
-
The Scss files above will get compiled to your Sass compilation
|
|
54
|
+
The Scss files above will automatically get compiled to your Sass compilation directory:
|
|
55
55
|
|
|
56
|
-
public/stylesheets
|
|
57
|
-
public/stylesheets
|
|
56
|
+
public/stylesheets/style.css
|
|
57
|
+
public/stylesheets/handheld.css
|
|
58
58
|
|
|
59
59
|
**Note:** If you already have a config/compass.rb file in your project, you may need to
|
|
60
60
|
manually add the following line to the top:
|
|
@@ -110,7 +110,8 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
|
|
|
110
110
|
nginx.conf
|
|
111
111
|
web.config
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
Run `compass watch my_project` and the SCSS files above will automatically
|
|
114
|
+
get compiled to your Sass compilation directory whenever a change is made:
|
|
114
115
|
|
|
115
116
|
css/style.css
|
|
116
117
|
css/handheld.css
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.1.
|
|
1
|
+
0.1.3
|
|
@@ -14,10 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
// for image replacement
|
|
16
16
|
@mixin image-replacement {
|
|
17
|
-
display: block;
|
|
18
|
-
text-indent: -999px;
|
|
19
|
-
overflow:hidden;
|
|
20
|
-
background-repeat: none;
|
|
17
|
+
display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left;
|
|
21
18
|
}
|
|
22
19
|
|
|
23
20
|
// Hide for both screenreaders and browsers
|
|
@@ -1,16 +1,22 @@
|
|
|
1
|
-
$
|
|
1
|
+
$font-color: #444 !default; //looks better than black: twitter.com/H_FJ/statuses/11800719859
|
|
2
2
|
|
|
3
|
-
$
|
|
3
|
+
$link-color: #607890 !default;
|
|
4
4
|
|
|
5
|
-
$
|
|
5
|
+
$link-hover-color: #036 !default;
|
|
6
6
|
|
|
7
|
-
$
|
|
7
|
+
$link-active-color: #607890 !default;
|
|
8
8
|
|
|
9
|
-
$
|
|
9
|
+
$link-visited-color: #607890 !default;
|
|
10
10
|
|
|
11
|
-
$
|
|
11
|
+
$selected-font-color: #fff !default;
|
|
12
12
|
|
|
13
|
-
$
|
|
13
|
+
$selected-background-color: #FF5E99 !default;
|
|
14
|
+
|
|
15
|
+
$selected-background-color: #FF5E99 !default;
|
|
16
|
+
|
|
17
|
+
$valid-input-background-color: #ddf0dd !default;
|
|
18
|
+
|
|
19
|
+
$invalid-input-background-color: #f0dddd !default;
|
|
14
20
|
|
|
15
21
|
|
|
16
22
|
//
|
|
@@ -18,17 +24,17 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
|
|
|
18
24
|
//
|
|
19
25
|
|
|
20
26
|
@mixin html5-boilerplate-page {
|
|
21
|
-
body, select, input, textarea { color: $
|
|
27
|
+
body, select, input, textarea { color: $font-color; }
|
|
22
28
|
|
|
23
|
-
h1,h2,h3,h4,h5,h6 { @include bold-font; }
|
|
29
|
+
h1, h2, h3, h4, h5, h6 { @include bold-font; }
|
|
24
30
|
|
|
25
31
|
html {
|
|
26
32
|
@include font-smoothing;
|
|
27
33
|
@include force-scrollbar;
|
|
28
34
|
}
|
|
29
35
|
|
|
30
|
-
a, a:active, a:visited { color: $
|
|
31
|
-
a:hover { color: $
|
|
36
|
+
a, a:active, a:visited { color: $link-color; }
|
|
37
|
+
a:hover { color: $link-hover-color; }
|
|
32
38
|
|
|
33
39
|
ul { margin-left: 30px; }
|
|
34
40
|
ol { margin-left: 30px; list-style-type: decimal; }
|
|
@@ -48,6 +54,8 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
|
|
|
48
54
|
@include align-input-labels;
|
|
49
55
|
|
|
50
56
|
@include hand-cursor-inputs;
|
|
57
|
+
|
|
58
|
+
@include input-validation;
|
|
51
59
|
|
|
52
60
|
@include selected-text;
|
|
53
61
|
|
|
@@ -89,7 +97,8 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
|
|
|
89
97
|
// by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
|
|
90
98
|
@mixin align-input-labels {
|
|
91
99
|
input[type="radio"] { vertical-align: text-bottom; }
|
|
92
|
-
input[type="checkbox"] { vertical-align: bottom;
|
|
100
|
+
input[type="checkbox"] { vertical-align: bottom; }
|
|
101
|
+
.ie7 input[type="checkbox"] { vertical-align: baseline; }
|
|
93
102
|
.ie6 input { vertical-align: text-bottom; }
|
|
94
103
|
}
|
|
95
104
|
|
|
@@ -98,17 +107,23 @@ $html5-boilerplate-selected-color: #FF5E99 !default;
|
|
|
98
107
|
label, input[type=button], input[type=submit], button { cursor: pointer; }
|
|
99
108
|
}
|
|
100
109
|
|
|
110
|
+
/* colors for form validity */
|
|
111
|
+
@mixin input-validation {
|
|
112
|
+
input:invalid { background-color: $invalid-input-background-color; }
|
|
113
|
+
input:valid { background-color: $valid-input-background-color; }
|
|
114
|
+
}
|
|
115
|
+
|
|
101
116
|
// These selection declarations have to be separate.
|
|
102
117
|
// No text-shadow: twitter.com/miketaylr/status/12228805301
|
|
103
118
|
// Also: hot pink.
|
|
104
119
|
@mixin selected-text {
|
|
105
|
-
::-moz-selection{ background:$
|
|
106
|
-
::selection { background: $
|
|
120
|
+
::-moz-selection{ background:$selected-background-color; color: $selected-font-color; text-shadow: none; }
|
|
121
|
+
::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
|
|
107
122
|
}
|
|
108
123
|
|
|
109
124
|
// j.mp/webkit-tap-highlight-color
|
|
110
125
|
@mixin webkit-tap-highlight {
|
|
111
|
-
a:link { -webkit-tap-highlight-color: $
|
|
126
|
+
a:link { -webkit-tap-highlight-color: $selected-background-color; }
|
|
112
127
|
}
|
|
113
128
|
|
|
114
129
|
// always force a scrollbar in non-IE
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
article, aside, details, figcaption, figure,
|
|
38
|
-
footer, header, hgroup, menu, nav, section
|
|
38
|
+
footer, header, hgroup, menu, nav, section {
|
|
39
39
|
display:block;
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
del { text-decoration: line-through; }
|
|
56
56
|
|
|
57
|
-
abbr[title], dfn[title] { border-bottom:1px dotted
|
|
57
|
+
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
|
|
58
58
|
|
|
59
59
|
//
|
|
60
60
|
// tables still need cellspacing="0" in the markup
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
// This file must be imported before html5-boilerplate/page
|
|
2
2
|
|
|
3
|
-
$
|
|
3
|
+
$font-color: #444;
|
|
4
4
|
|
|
5
|
-
$
|
|
5
|
+
$link-color: #607890;
|
|
6
6
|
|
|
7
|
-
$
|
|
7
|
+
$link-hover-color: #036;
|
|
8
8
|
|
|
9
|
-
$
|
|
9
|
+
$link-active-color: #607890;
|
|
10
10
|
|
|
11
|
-
$
|
|
11
|
+
$link-visited-color: #607890;
|
|
12
12
|
|
|
13
|
-
$
|
|
13
|
+
$selected-font-color: #fff;
|
|
14
14
|
|
|
15
|
-
$
|
|
15
|
+
$selected-background-color: #FF5E99;
|
|
16
|
+
|
|
17
|
+
$valid-input-background-color: #ddf0dd;
|
|
18
|
+
|
|
19
|
+
$invalid-input-background-color: #f0dddd;
|
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
//--------------------------------
|
|
14
14
|
// Page
|
|
15
15
|
//--------------------------------
|
|
16
|
-
body, select, input, textarea { color: $
|
|
16
|
+
body, select, input, textarea { color: $font-color; }
|
|
17
17
|
|
|
18
|
-
h1,h2,h3,h4,h5,h6 { @include bold-font; }
|
|
18
|
+
h1, h2, h3, h4, h5, h6 { @include bold-font; }
|
|
19
19
|
|
|
20
20
|
html {
|
|
21
21
|
@include font-smoothing;
|
|
22
22
|
@include force-scrollbar;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
a, a:active, a:visited { color: $
|
|
26
|
-
a:hover { color: $
|
|
25
|
+
a, a:active, a:visited { color: $link-color; }
|
|
26
|
+
a:hover { color: $link-hover-color; }
|
|
27
27
|
|
|
28
28
|
ul { margin-left: 30px; }
|
|
29
29
|
ol { margin-left: 30px; list-style-type: decimal; }
|
|
@@ -44,6 +44,8 @@ sup { vertical-align: super; font-size: smaller; }
|
|
|
44
44
|
|
|
45
45
|
@include hand-cursor-inputs;
|
|
46
46
|
|
|
47
|
+
@include input-validation;
|
|
48
|
+
|
|
47
49
|
@include selected-text;
|
|
48
50
|
|
|
49
51
|
@include webkit-tap-highlight;
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 1
|
|
8
|
-
-
|
|
9
|
-
version: 0.1.
|
|
8
|
+
- 3
|
|
9
|
+
version: 0.1.3
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Peter Gumeson
|
|
@@ -14,7 +14,7 @@ autorequire:
|
|
|
14
14
|
bindir: bin
|
|
15
15
|
cert_chain: []
|
|
16
16
|
|
|
17
|
-
date: 2010-08-
|
|
17
|
+
date: 2010-08-20 00:00:00 -07:00
|
|
18
18
|
default_executable:
|
|
19
19
|
dependencies:
|
|
20
20
|
- !ruby/object:Gem::Dependency
|