compass_extension 0.1.9.beta.2 → 0.1.9
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/compass_extension/version.rb +1 -1
- data/stylesheets/_h5bp.scss +12 -0
- data/stylesheets/_main.scss +1 -0
- data/stylesheets/h5bp/_chromeframe.scss +7 -0
- data/stylesheets/h5bp/_helpers.scss +58 -0
- data/stylesheets/h5bp/_media.scss +23 -0
- data/stylesheets/h5bp/_normalize.scss +213 -0
- data/templates/project/manifest.rb +1 -2
- metadata +10 -5
- data/templates/project/files/config.rb +0 -47
@@ -0,0 +1,12 @@
|
|
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/chromeframe";
|
11
|
+
@import "h5bp/helpers";
|
12
|
+
@import "h5bp/media";
|
@@ -0,0 +1 @@
|
|
1
|
+
// This is your framework's main stylesheet. Use it to import all default modules.
|
@@ -0,0 +1,58 @@
|
|
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
|
+
.invisible { @include invisible; }
|
14
|
+
|
15
|
+
.clearfix { @include micro-clearfix; }
|
16
|
+
|
17
|
+
}
|
18
|
+
|
19
|
+
// For image replacement
|
20
|
+
@mixin image-replacement($img: none, $x: 50%, $y: 50%) {
|
21
|
+
display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0;
|
22
|
+
@if $img != none {
|
23
|
+
background-image: image-url($img);
|
24
|
+
background-position: $x $y;
|
25
|
+
}
|
26
|
+
br { display: none; }
|
27
|
+
}
|
28
|
+
|
29
|
+
// Uses image dimensions
|
30
|
+
@mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
|
31
|
+
@include image-replacement($img, $x, $y);
|
32
|
+
width: image-width($img);
|
33
|
+
height: image-height($img);
|
34
|
+
}
|
35
|
+
|
36
|
+
// Hide from both screenreaders and browsers: h5bp.com/u
|
37
|
+
@mixin hidden {
|
38
|
+
display: none !important;
|
39
|
+
visibility: hidden;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
43
|
+
@mixin visually-hidden {
|
44
|
+
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
|
45
|
+
&.focusable:active, &.focusable:focus {
|
46
|
+
clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
// Hide visually and from screenreaders, but maintain layout
|
51
|
+
@mixin invisible { visibility: hidden; }
|
52
|
+
|
53
|
+
// Contain floats: h5bp.com/q
|
54
|
+
@mixin micro-clearfix {
|
55
|
+
&:before, &:after { content: ""; display: table; }
|
56
|
+
&:after { clear: both; }
|
57
|
+
& { *zoom: 1; }
|
58
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// Print styles
|
2
|
+
// Inlined to avoid required HTTP connection: h5bp.com/r
|
3
|
+
|
4
|
+
@mixin h5bp-media {
|
5
|
+
@media print {
|
6
|
+
@include h5bp-media-print;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
|
10
|
+
@mixin h5bp-media-print {
|
11
|
+
* { 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
|
12
|
+
a, a:visited { text-decoration: underline; }
|
13
|
+
a[href]:after { content: " (" attr(href) ")"; }
|
14
|
+
abbr[title]:after { content: " (" attr(title) ")"; }
|
15
|
+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } // Don't show links for images, or javascript/internal links
|
16
|
+
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
17
|
+
thead { display: table-header-group; } // h5bp.com/t
|
18
|
+
tr, img { page-break-inside: avoid; }
|
19
|
+
img { max-width: 100% !important; }
|
20
|
+
@page { margin: 0.5cm; }
|
21
|
+
p, h2, h3 { orphans: 3; widows: 3; }
|
22
|
+
h2, h3 { page-break-after: avoid; }
|
23
|
+
}
|
@@ -0,0 +1,213 @@
|
|
1
|
+
//
|
2
|
+
// Normalize
|
3
|
+
//
|
4
|
+
|
5
|
+
$line-height: 1.4 !default;
|
6
|
+
$font-color: #222 !default;
|
7
|
+
$font-family: sans-serif !default;
|
8
|
+
$font-size: 1em !default;
|
9
|
+
$link-color: #00e !default;
|
10
|
+
$link-hover-color: #06e !default;
|
11
|
+
$link-visited-color: #551a8b !default;
|
12
|
+
$selected-font-color: #fff !default;
|
13
|
+
$selected-background-color: #fe57a1 !default;
|
14
|
+
$invalid-background-color: #f0dddd !default;
|
15
|
+
|
16
|
+
|
17
|
+
@mixin h5bp-normalize {
|
18
|
+
@include h5bp-display;
|
19
|
+
@include h5bp-base;
|
20
|
+
@include h5bp-selection;
|
21
|
+
@include h5bp-links;
|
22
|
+
@include h5bp-typography;
|
23
|
+
@include h5bp-lists;
|
24
|
+
@include h5bp-embeds;
|
25
|
+
@include h5bp-figures;
|
26
|
+
@include h5bp-forms;
|
27
|
+
@include h5bp-tables;
|
28
|
+
}
|
29
|
+
|
30
|
+
|
31
|
+
// Html5 display definitions
|
32
|
+
@mixin h5bp-display {
|
33
|
+
|
34
|
+
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
35
|
+
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
36
|
+
audio:not([controls]) { display: none; }
|
37
|
+
[hidden] { display: none; }
|
38
|
+
|
39
|
+
}
|
40
|
+
|
41
|
+
|
42
|
+
// Base
|
43
|
+
@mixin h5bp-base {
|
44
|
+
|
45
|
+
// 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
|
46
|
+
// 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
|
47
|
+
|
48
|
+
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
49
|
+
|
50
|
+
html, button, input, select, textarea { font-family: $font-family; color: $font-color; }
|
51
|
+
|
52
|
+
body { margin: 0; font-size: $font-size; line-height: $line-height; }
|
53
|
+
|
54
|
+
}
|
55
|
+
|
56
|
+
@mixin h5bp-selection {
|
57
|
+
|
58
|
+
// Remove text-shadow in selection highlight: h5bp.com/i
|
59
|
+
// These selection declarations have to be separate
|
60
|
+
// Also: hot pink! (or customize the background color to match your design)
|
61
|
+
|
62
|
+
::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
|
63
|
+
::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
|
64
|
+
|
65
|
+
}
|
66
|
+
|
67
|
+
|
68
|
+
// Links
|
69
|
+
@mixin h5bp-links {
|
70
|
+
|
71
|
+
a { color: $link-color; }
|
72
|
+
a:visited { color: $link-visited-color; }
|
73
|
+
a:hover { color: $link-hover-color; }
|
74
|
+
a:focus { outline: thin dotted; }
|
75
|
+
|
76
|
+
// Improve readability when focused and hovered in all browsers: h5bp.com/h
|
77
|
+
a:hover, a:active { outline: 0; }
|
78
|
+
|
79
|
+
}
|
80
|
+
|
81
|
+
|
82
|
+
// Typography
|
83
|
+
@mixin h5bp-typography {
|
84
|
+
|
85
|
+
abbr[title] { border-bottom: 1px dotted; }
|
86
|
+
|
87
|
+
b, strong { font-weight: bold; }
|
88
|
+
|
89
|
+
blockquote { margin: 1em 40px; }
|
90
|
+
|
91
|
+
dfn { font-style: italic; }
|
92
|
+
|
93
|
+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
94
|
+
|
95
|
+
ins { background: #ff9; color: #000; text-decoration: none; }
|
96
|
+
|
97
|
+
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
98
|
+
|
99
|
+
// Redeclare monospace font family: h5bp.com/j
|
100
|
+
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
|
101
|
+
|
102
|
+
// Improve readability of pre-formatted text in all browsers
|
103
|
+
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
104
|
+
|
105
|
+
q { quotes: none; }
|
106
|
+
q:before, q:after { content: ""; content: none; }
|
107
|
+
|
108
|
+
small { font-size: 85%; }
|
109
|
+
|
110
|
+
// Position subscript and superscript content without affecting line-height: h5bp.com/k
|
111
|
+
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
112
|
+
sup { top: -0.5em; }
|
113
|
+
sub { bottom: -0.25em; }
|
114
|
+
|
115
|
+
}
|
116
|
+
|
117
|
+
|
118
|
+
// Lists
|
119
|
+
@mixin h5bp-lists {
|
120
|
+
|
121
|
+
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
122
|
+
dd { margin: 0 0 0 40px; }
|
123
|
+
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
124
|
+
|
125
|
+
}
|
126
|
+
|
127
|
+
|
128
|
+
// Embedded content
|
129
|
+
@mixin h5bp-embeds {
|
130
|
+
|
131
|
+
// 1. Improve image quality when scaled in IE7: h5bp.com/d
|
132
|
+
// 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
|
133
|
+
|
134
|
+
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
135
|
+
|
136
|
+
// Correct overflow not hidden in IE9
|
137
|
+
|
138
|
+
svg:not(:root) { overflow: hidden; }
|
139
|
+
|
140
|
+
}
|
141
|
+
|
142
|
+
|
143
|
+
// Figures
|
144
|
+
@mixin h5bp-figures {
|
145
|
+
|
146
|
+
figure { margin: 0; }
|
147
|
+
|
148
|
+
}
|
149
|
+
|
150
|
+
|
151
|
+
// Forms
|
152
|
+
@mixin h5bp-forms {
|
153
|
+
|
154
|
+
form { margin: 0; }
|
155
|
+
fieldset { border: 0; margin: 0; padding: 0; }
|
156
|
+
|
157
|
+
// Indicate that 'label' will shift focus to the associated form element
|
158
|
+
label { cursor: pointer; }
|
159
|
+
|
160
|
+
// 1. Correct color not inheriting in IE6/7/8/9
|
161
|
+
// 2. Correct alignment displayed oddly in IE6/7
|
162
|
+
|
163
|
+
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
|
164
|
+
|
165
|
+
// 1. Correct font-size not inheriting in all browsers
|
166
|
+
// 2. Remove margins in FF3/4 S5 Chrome
|
167
|
+
// 3. Define consistent vertical alignment display in all browsers
|
168
|
+
|
169
|
+
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
170
|
+
|
171
|
+
// 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
|
172
|
+
|
173
|
+
button, input { line-height: normal; }
|
174
|
+
|
175
|
+
// 1. Display hand cursor for clickable form elements
|
176
|
+
// 2. Allow styling of clickable form elements in iOS
|
177
|
+
// 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
|
178
|
+
|
179
|
+
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
|
180
|
+
|
181
|
+
// Re-set default cursor for disabled elements
|
182
|
+
|
183
|
+
button[disabled], input[disabled] { cursor: default; }
|
184
|
+
|
185
|
+
// Consistent box sizing and appearance
|
186
|
+
|
187
|
+
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
|
188
|
+
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
189
|
+
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
|
190
|
+
|
191
|
+
// Remove inner padding and border in FF3/4: h5bp.com/l
|
192
|
+
|
193
|
+
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
194
|
+
|
195
|
+
// 1. Remove default vertical scrollbar in IE6/7/8/9
|
196
|
+
// 2. Allow only vertical resizing
|
197
|
+
|
198
|
+
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
199
|
+
|
200
|
+
// Colors for form validity
|
201
|
+
input:valid, textarea:valid { }
|
202
|
+
input:invalid, textarea:invalid { background-color: $invalid-background-color; }
|
203
|
+
|
204
|
+
}
|
205
|
+
|
206
|
+
|
207
|
+
// Tables
|
208
|
+
@mixin h5bp-tables {
|
209
|
+
|
210
|
+
table { border-collapse: collapse; border-spacing: 0; }
|
211
|
+
td { vertical-align: top; }
|
212
|
+
|
213
|
+
}
|
@@ -65,7 +65,6 @@ html 'files/apple-touch-icon-72x72-precomposed.png', :to => 'apple-touch-icon-72
|
|
65
65
|
html 'files/apple-touch-icon-114x114-precomposed.png', :to => 'apple-touch-icon-114x114-precomposed.png'
|
66
66
|
html 'files/apple-touch-icon-precomposed.png', :to => 'apple-touch-icon-precomposed.png'
|
67
67
|
html 'files/favicon.png', :to => 'favicon.png'
|
68
|
-
files 'files/config.rb', :to => 'config.rb'
|
69
68
|
|
70
69
|
help %Q{
|
71
70
|
This is a Compass extension for Skyron using html5-boilerplate templates
|
@@ -73,7 +72,7 @@ This is a Compass extension for Skyron using html5-boilerplate templates
|
|
73
72
|
Stand Alone Installation
|
74
73
|
========================
|
75
74
|
$ gem install html5-boilerplate
|
76
|
-
$ compass create <my_project> -r compass_extension -
|
75
|
+
$ compass create <my_project> -r compass_extension -u compass_extension --javascripts-dir js --css-dir css --images-dir img
|
77
76
|
|
78
77
|
}
|
79
78
|
|
metadata
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass_extension
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.9
|
5
|
-
prerelease:
|
4
|
+
version: 0.1.9
|
5
|
+
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
8
|
- Skyron ltd, Yann Le Corre, Dil Ahdan, Aung Win
|
@@ -69,6 +69,12 @@ files:
|
|
69
69
|
- lib/compass_extension/base.rb
|
70
70
|
- lib/compass_extension/version.rb
|
71
71
|
- lib/compass_extension.rb
|
72
|
+
- stylesheets/h5bp/_chromeframe.scss
|
73
|
+
- stylesheets/h5bp/_helpers.scss
|
74
|
+
- stylesheets/h5bp/_media.scss
|
75
|
+
- stylesheets/h5bp/_normalize.scss
|
76
|
+
- stylesheets/_h5bp.scss
|
77
|
+
- stylesheets/_main.scss
|
72
78
|
- templates/project/files/404.html
|
73
79
|
- templates/project/files/about.html
|
74
80
|
- templates/project/files/apple-touch-icon-114x114-precomposed.png
|
@@ -77,7 +83,6 @@ files:
|
|
77
83
|
- templates/project/files/apple-touch-icon-precomposed.png
|
78
84
|
- templates/project/files/apple-touch-icon.png
|
79
85
|
- templates/project/files/blog.html
|
80
|
-
- templates/project/files/config.rb
|
81
86
|
- templates/project/files/contact.html
|
82
87
|
- templates/project/files/crossdomain.xml
|
83
88
|
- templates/project/files/dummy-full.png
|
@@ -147,9 +152,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
147
152
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
148
153
|
none: false
|
149
154
|
requirements:
|
150
|
-
- - ! '
|
155
|
+
- - ! '>='
|
151
156
|
- !ruby/object:Gem::Version
|
152
|
-
version:
|
157
|
+
version: '0'
|
153
158
|
requirements: []
|
154
159
|
rubyforge_project:
|
155
160
|
rubygems_version: 1.8.24
|
@@ -1,47 +0,0 @@
|
|
1
|
-
# COMPASS
|
2
|
-
# ----------------------------------------------
|
3
|
-
# Configuration: http://compass-style.org/help/tutorials/configuration-reference/
|
4
|
-
#
|
5
|
-
# ----------------------------------------------
|
6
|
-
# PRODUCTION
|
7
|
-
# compass compile -e production -s compressed --no-line-comments --force --trace --time
|
8
|
-
#
|
9
|
-
|
10
|
-
# Require any additional compass plugins here.
|
11
|
-
|
12
|
-
# Can be :stand_alone or :rails. Defaults to :stand_alone
|
13
|
-
project_type = :stand_alone
|
14
|
-
|
15
|
-
# paths
|
16
|
-
# Set this to the root of your project when deployed:
|
17
|
-
http_path = "/"
|
18
|
-
css_dir = "css"
|
19
|
-
sass_dir = "sass"
|
20
|
-
images_dir = "img"
|
21
|
-
javascripts_dir = "js"
|
22
|
-
|
23
|
-
# You can select your preferred output style here (can be overridden via the command line):
|
24
|
-
# output option: nested, expanded, compact, compressed
|
25
|
-
output_style = :expanded
|
26
|
-
|
27
|
-
# The environment mode.
|
28
|
-
# Defaults to :production, can also be :development
|
29
|
-
# Use :development to see line numbers, file names, etc
|
30
|
-
#environment = :production
|
31
|
-
environment = :development
|
32
|
-
|
33
|
-
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
34
|
-
#line_comments = false
|
35
|
-
line_comments = true
|
36
|
-
|
37
|
-
# To enable relative paths to assets via compass helper functions. Uncomment:
|
38
|
-
relative_assets = true
|
39
|
-
|
40
|
-
# disable the asset cache buster
|
41
|
-
asset_cache_buster :none
|
42
|
-
|
43
|
-
# If you prefer the indented syntax, you might want to regenerate this
|
44
|
-
# project again passing --syntax sass, or you can uncomment this:
|
45
|
-
# preferred_syntax = :sass
|
46
|
-
# and then run:
|
47
|
-
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|