ezy 0.3.0.beta → 0.3.1.beta
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/ezy.gemspec +1 -1
- data/sass/ezy/_sprites.scss +0 -1
- data/sass/ezy/grid/_helpers.scss +113 -39
- data/sass/ezy/grid/_layout.scss +6 -2
- data/test/css/grid/layout/grid-settings.css +42 -0
- data/test/css/sprites/layout.css +2 -2
- data/test/css/sprites/position.css +4 -4
- data/test/css/sprites/repeat.css +2 -2
- data/test/css/sprites/resolution.css +2 -2
- data/test/css/sprites/responsive.css +7 -7
- data/test/css/sprites/retina.css +2 -2
- data/test/css/sprites/simple.css +1 -1
- data/test/css/sprites/spacing.css +2 -2
- data/test/html/grid/grid-settings.html +1 -1
- data/test/scss/grid/layout/grid-settings.scss +36 -11
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e6384f3ad9b2628bd96999c86981710478bdc3f4
|
|
4
|
+
data.tar.gz: 3d4bfe8836deec70698e560b30e6bdfecb73ced2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 78b5820afdc691d3a6bfba0e4479c169189ca7c89f868515c0d4be46ed012e131289e03e92dbf03ffa668d7c810504bdbd8c8eb7b0b9dace382d32a0fad2a856
|
|
7
|
+
data.tar.gz: d4f7585eb2332098f2fd73207c077d67805382af0c530dd74439b7b85ae592f7b0b0903ac38999ca634afcb39ed5e976aa579ffdfc5ae7bda9b6fabb3d917d09
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.3.
|
|
1
|
+
0.3.1.beta
|
data/ezy.gemspec
CHANGED
data/sass/ezy/_sprites.scss
CHANGED
data/sass/ezy/grid/_helpers.scss
CHANGED
|
@@ -6,10 +6,18 @@
|
|
|
6
6
|
// @function layout-width
|
|
7
7
|
//
|
|
8
8
|
// Returns width based on given number of culumns
|
|
9
|
-
// $columns
|
|
10
|
-
//
|
|
9
|
+
// $columns : Number of columns to calculate width from
|
|
10
|
+
// $column-width : Column width in current syntax
|
|
11
|
+
// : Defaults to globally set $column-width
|
|
12
|
+
// $gutter-width : Gutter width in current syntax
|
|
13
|
+
// : Defaults to globally set $gutter-width
|
|
14
|
+
// @return : Width in the same unit as $column-width and $gutter-width
|
|
11
15
|
|
|
12
|
-
@function layout-width(
|
|
16
|
+
@function layout-width(
|
|
17
|
+
$columns,
|
|
18
|
+
$column-width : $column-width,
|
|
19
|
+
$gutter-width : $gutter-width
|
|
20
|
+
) {
|
|
13
21
|
@if comparable( $column-width, $gutter-width ) {
|
|
14
22
|
@return $columns * ( $column-width + $gutter-width ) - $gutter-width;
|
|
15
23
|
} @else {
|
|
@@ -25,19 +33,25 @@
|
|
|
25
33
|
// $columns : Number of columns to calculate width from
|
|
26
34
|
// $grid-padding : Grid padding to add on both sides of layout width.
|
|
27
35
|
// : Defaults to globally set $grid-padding
|
|
36
|
+
// $column-width : Column width in current syntax
|
|
37
|
+
// : Defaults to globally set $column-width
|
|
38
|
+
// $gutter-width : Gutter width in current syntax
|
|
39
|
+
// : Defaults to globally set $gutter-width
|
|
28
40
|
// @return : Width in the same unit as $column-width, $gutter-width and $grid-padding
|
|
29
41
|
|
|
30
42
|
@function grid-width(
|
|
31
43
|
$columns : $total-columns,
|
|
32
|
-
$grid-padding : $grid-padding
|
|
44
|
+
$grid-padding : $grid-padding,
|
|
45
|
+
$column-width : $column-width,
|
|
46
|
+
$gutter-width : $gutter-width
|
|
33
47
|
) {
|
|
34
48
|
@if type-of( $grid-padding ) == "list" {
|
|
35
49
|
// If grid padding is set as 2 values (in case left
|
|
36
50
|
// and right are not the same), add the two
|
|
37
51
|
$grid-padding: nth( $grid-padding, 1 ) + nth( $grid-padding, 2 );
|
|
38
52
|
}
|
|
39
|
-
@if comparable( layout-width( $columns ), $grid-padding ) {
|
|
40
|
-
@return layout-width( $columns ) + $grid-padding * 2;
|
|
53
|
+
@if comparable( layout-width( $columns, $column-width, $gutter-width ), $grid-padding ) {
|
|
54
|
+
@return layout-width( $columns, $column-width, $gutter-width ) + $grid-padding * 2;
|
|
41
55
|
} @else {
|
|
42
56
|
@warn "$grid-padding must have the same unit as $column-width and $gutter-width. #{ unit( $grid-padding ) }'s and #{ unit( layout-width( $columns ) ) }'s are not comparable.";
|
|
43
57
|
}
|
|
@@ -46,22 +60,34 @@
|
|
|
46
60
|
// ---------------------------------------------------------------------------
|
|
47
61
|
// @function context-width
|
|
48
62
|
//
|
|
49
|
-
// Returns width based on given number of
|
|
63
|
+
// Returns width based on given number of columns, plus an extra gutter
|
|
50
64
|
// Used for % calculations in the grid
|
|
51
|
-
// $columns
|
|
52
|
-
//
|
|
65
|
+
// $columns : Number of columns to calculate width from
|
|
66
|
+
// $column-width : Column width in current syntax
|
|
67
|
+
// : Defaults to globally set $column-width
|
|
68
|
+
// $gutter-width : Gutter width in current syntax
|
|
69
|
+
// : Defaults to globally set $gutter-width
|
|
70
|
+
// @return : Width in the same unit as $column-width and $gutter-width
|
|
53
71
|
|
|
54
|
-
@function context-width(
|
|
55
|
-
|
|
72
|
+
@function context-width(
|
|
73
|
+
$columns,
|
|
74
|
+
$column-width : $column-width,
|
|
75
|
+
$gutter-width : $gutter-width
|
|
76
|
+
) {
|
|
77
|
+
@return layout-width( $columns, $column-width, $gutter-width ) + $gutter-width;
|
|
56
78
|
}
|
|
57
79
|
|
|
58
80
|
// ---------------------------------------------------------------------------
|
|
59
|
-
// @function
|
|
81
|
+
// @function span-column-width
|
|
60
82
|
//
|
|
61
83
|
// Same as layout-width( $columns ), but renamed for better context awareness
|
|
62
84
|
|
|
63
|
-
@function span-column-width(
|
|
64
|
-
|
|
85
|
+
@function span-column-width(
|
|
86
|
+
$columns,
|
|
87
|
+
$column-width : $column-width,
|
|
88
|
+
$gutter-width : $gutter-width
|
|
89
|
+
) {
|
|
90
|
+
@return layout-width( $columns, $column-width, $gutter-width );
|
|
65
91
|
}
|
|
66
92
|
|
|
67
93
|
// ---------------------------------------------------------------------------
|
|
@@ -69,17 +95,27 @@
|
|
|
69
95
|
//
|
|
70
96
|
// Returns a span columns width. If the grid is fluid, it will be as a
|
|
71
97
|
// percentage of the context width
|
|
98
|
+
// $columns : Number of columns to span
|
|
99
|
+
// $context : Number of columns in the current context.
|
|
100
|
+
// : If set to false, the returned value is as in static grid
|
|
101
|
+
// $column-width : Column width in current syntax
|
|
102
|
+
// : Defaults to globally set $column-width
|
|
103
|
+
// $gutter-width : Gutter width in current syntax
|
|
104
|
+
// : Defaults to globally set $gutter-width
|
|
105
|
+
// @return : Width in the same unit as $column-width and $gutter-width
|
|
72
106
|
|
|
73
107
|
@function columns(
|
|
74
108
|
$columns,
|
|
75
|
-
$context: $total-columns
|
|
109
|
+
$context : $total-columns,
|
|
110
|
+
$column-width : $column-width,
|
|
111
|
+
$gutter-width : $gutter-width
|
|
76
112
|
) {
|
|
77
113
|
@if $is-fluid and $context {
|
|
78
|
-
@return percentage( layout-width( $columns ) / context-width( $context ) );
|
|
114
|
+
@return percentage( layout-width( $columns, $column-width, $gutter-width ) / context-width( $context, $column-width, $gutter-width ) );
|
|
79
115
|
} @else if $is-fluid {
|
|
80
116
|
@warn $context-warn;
|
|
81
117
|
} @else {
|
|
82
|
-
@return layout-width( $columns );
|
|
118
|
+
@return layout-width( $columns, $column-width, $gutter-width );
|
|
83
119
|
}
|
|
84
120
|
}
|
|
85
121
|
|
|
@@ -88,15 +124,21 @@
|
|
|
88
124
|
//
|
|
89
125
|
// Returns gutter in the same unit as $gutter-width if grid is static
|
|
90
126
|
// Returns gutter as a percentage of the context if grid is fluid
|
|
91
|
-
// $context
|
|
92
|
-
//
|
|
93
|
-
//
|
|
127
|
+
// $context : Number of columns in the current context.
|
|
128
|
+
// : If set to false, the returned value is as in static grid
|
|
129
|
+
// $column-width : Column width in current syntax
|
|
130
|
+
// : Defaults to globally set $column-width
|
|
131
|
+
// $gutter-width : Gutter width in current syntax
|
|
132
|
+
// : Defaults to globally set $gutter-width
|
|
133
|
+
// @return : Width as $gutter-width or as a percentage of the context
|
|
94
134
|
|
|
95
135
|
@function gutter(
|
|
96
|
-
$context: $total-columns
|
|
136
|
+
$context: $total-columns,
|
|
137
|
+
$column-width : $column-width,
|
|
138
|
+
$gutter-width : $gutter-width
|
|
97
139
|
) {
|
|
98
140
|
@if $is-fluid and $context {
|
|
99
|
-
@return ( percentage( ( $gutter-width ) / context-width( $context ) ) );
|
|
141
|
+
@return ( percentage( ( $gutter-width ) / context-width( $context, $column-width, $gutter-width ) ) );
|
|
100
142
|
} @else if $is-fluid {
|
|
101
143
|
@warn $context-warn;
|
|
102
144
|
} @else {
|
|
@@ -109,17 +151,23 @@
|
|
|
109
151
|
//
|
|
110
152
|
// Sets gutters using the gutter( $context ) function
|
|
111
153
|
// $context : Number of columns in the current context.
|
|
112
|
-
// :
|
|
154
|
+
// : If set to false, the returned value is as in static grid
|
|
113
155
|
// $gutter-property : Set to "margin" or "padding"
|
|
156
|
+
// $column-width : Column width in current syntax
|
|
157
|
+
// : Defaults to globally set $column-width
|
|
158
|
+
// $gutter-width : Gutter width in current syntax
|
|
159
|
+
// : Defaults to globally set $gutter-width
|
|
114
160
|
|
|
115
161
|
@mixin gutters(
|
|
116
162
|
$context : $total-columns,
|
|
117
|
-
$gutter-property : $gutter-property
|
|
163
|
+
$gutter-property : $gutter-property,
|
|
164
|
+
$column-width : $column-width,
|
|
165
|
+
$gutter-width : $gutter-width
|
|
118
166
|
) {
|
|
119
167
|
@if $gutter-property == "margin" or $gutter-property == "padding" {
|
|
120
168
|
#{ $gutter-property }: {
|
|
121
|
-
left: gutter( $context ) / 2;
|
|
122
|
-
right: gutter( $context ) / 2;
|
|
169
|
+
left: gutter( $context, $column-width, $gutter-width ) / 2;
|
|
170
|
+
right: gutter( $context, $column-width, $gutter-width ) / 2;
|
|
123
171
|
}
|
|
124
172
|
} @else {
|
|
125
173
|
@warn "$gutter-property must be set to either 'margin' or 'padding'";
|
|
@@ -136,17 +184,23 @@
|
|
|
136
184
|
// $context : Number of columns in the current context
|
|
137
185
|
// $gutter-property : Which gutter property the gutter is set with.
|
|
138
186
|
// : Affects the way the offset is applied
|
|
187
|
+
// $column-width : Column width in current syntax
|
|
188
|
+
// : Defaults to globally set $column-width
|
|
189
|
+
// $gutter-width : Gutter width in current syntax
|
|
190
|
+
// : Defaults to globally set $gutter-width
|
|
139
191
|
|
|
140
192
|
@mixin offset(
|
|
141
193
|
$direction,
|
|
142
194
|
$columns,
|
|
143
195
|
$context : $total-columns,
|
|
144
|
-
$gutter-property : $gutter-property
|
|
196
|
+
$gutter-property : $gutter-property,
|
|
197
|
+
$column-width : $column-width,
|
|
198
|
+
$gutter-width : $gutter-width
|
|
145
199
|
) {
|
|
146
200
|
/* Offset #{ $direction } by #{ $columns } columns */
|
|
147
|
-
$offset: columns( $columns, $context ) + gutter( $context ) * 1.5;
|
|
201
|
+
$offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width ) * 1.5;
|
|
148
202
|
@if $gutter-property == "padding" {
|
|
149
|
-
$offset: columns( $columns, $context ) + gutter( $context );
|
|
203
|
+
$offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width );
|
|
150
204
|
}
|
|
151
205
|
@if $direction == "both" {
|
|
152
206
|
margin: {
|
|
@@ -166,17 +220,23 @@
|
|
|
166
220
|
// $context : Number of columns in the current context
|
|
167
221
|
// $gutter-property : Which gutter property the gutter is set with.
|
|
168
222
|
// : Affects the way the pull is applied
|
|
223
|
+
// $column-width : Column width in current syntax
|
|
224
|
+
// : Defaults to globally set $column-width
|
|
225
|
+
// $gutter-width : Gutter width in current syntax
|
|
226
|
+
// : Defaults to globally set $gutter-width
|
|
169
227
|
|
|
170
228
|
@mixin pullout(
|
|
171
229
|
$direction,
|
|
172
230
|
$columns,
|
|
173
231
|
$context : $total-columns,
|
|
174
|
-
$gutter-property : $gutter-property
|
|
232
|
+
$gutter-property : $gutter-property,
|
|
233
|
+
$column-width : $column-width,
|
|
234
|
+
$gutter-width : $gutter-width
|
|
175
235
|
) {
|
|
176
236
|
/* Pull out to the #{ $direction } by #{ $columns } columns */
|
|
177
|
-
$offset: columns( $columns, $context ) + gutter( $context ) / 2;
|
|
237
|
+
$offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width ) / 2;
|
|
178
238
|
@if $gutter-property == "padding" {
|
|
179
|
-
$offset: columns( $columns, $context ) + gutter( $context );
|
|
239
|
+
$offset: columns( $columns, $context, $column-width, $gutter-width ) + gutter( $context, $column-width, $gutter-width );
|
|
180
240
|
}
|
|
181
241
|
margin-#{ $direction }: -($offset);
|
|
182
242
|
}
|
|
@@ -189,11 +249,17 @@
|
|
|
189
249
|
// $context : Number of columns in the current context
|
|
190
250
|
// $gutter-property : Which gutter property the gutter is set with.
|
|
191
251
|
// : Used to re-apply gutter in the right property
|
|
252
|
+
// $column-width : Column width in current syntax
|
|
253
|
+
// : Defaults to globally set $column-width
|
|
254
|
+
// $gutter-width : Gutter width in current syntax
|
|
255
|
+
// : Defaults to globally set $gutter-width
|
|
192
256
|
|
|
193
257
|
@mixin reset(
|
|
194
258
|
$direction : "both",
|
|
195
259
|
$context : $total-columns,
|
|
196
|
-
$gutter-property : $gutter-property
|
|
260
|
+
$gutter-property : $gutter-property,
|
|
261
|
+
$column-width : $column-width,
|
|
262
|
+
$gutter-width : $gutter-width
|
|
197
263
|
) {
|
|
198
264
|
@if $gutter-property == "padding" {
|
|
199
265
|
@if $direction == "both" {
|
|
@@ -206,9 +272,9 @@
|
|
|
206
272
|
}
|
|
207
273
|
} @else {
|
|
208
274
|
@if $direction == "both" {
|
|
209
|
-
@include gutters( $context, $gutter-property );
|
|
275
|
+
@include gutters( $context, $gutter-property, $column-width, $gutter-width );
|
|
210
276
|
} @else {
|
|
211
|
-
#{ $gutter-property }-#{ $direction }: gutter( $context ) / 2;
|
|
277
|
+
#{ $gutter-property }-#{ $direction }: gutter( $context, $column-width, $gutter-width ) / 2;
|
|
212
278
|
}
|
|
213
279
|
}
|
|
214
280
|
}
|
|
@@ -220,13 +286,17 @@
|
|
|
220
286
|
@mixin remove-offset(
|
|
221
287
|
$direction : "both",
|
|
222
288
|
$context : $total-columns,
|
|
223
|
-
$gutter-property : $gutter-property
|
|
289
|
+
$gutter-property : $gutter-property,
|
|
290
|
+
$column-width : $column-width,
|
|
291
|
+
$gutter-width : $gutter-width
|
|
224
292
|
) {
|
|
225
293
|
/* Removing offset #{ $direction } */
|
|
226
294
|
@include reset(
|
|
227
295
|
$direction : $direction,
|
|
228
296
|
$context : $context,
|
|
229
|
-
$gutter-property : $gutter-property
|
|
297
|
+
$gutter-property : $gutter-property,
|
|
298
|
+
$column-width : $column-width,
|
|
299
|
+
$gutter-width : $gutter-width
|
|
230
300
|
);
|
|
231
301
|
}
|
|
232
302
|
|
|
@@ -237,13 +307,17 @@
|
|
|
237
307
|
@mixin remove-pullout(
|
|
238
308
|
$direction : "both",
|
|
239
309
|
$context : $total-columns,
|
|
240
|
-
$gutter-property : $gutter-property
|
|
310
|
+
$gutter-property : $gutter-property,
|
|
311
|
+
$column-width : $column-width,
|
|
312
|
+
$gutter-width : $gutter-width
|
|
241
313
|
) {
|
|
242
314
|
/* Removing pullout #{ $direction } */
|
|
243
315
|
@include reset(
|
|
244
316
|
$direction : $direction,
|
|
245
317
|
$context : $context,
|
|
246
|
-
$gutter-property : $gutter-property
|
|
318
|
+
$gutter-property : $gutter-property,
|
|
319
|
+
$column-width : $column-width,
|
|
320
|
+
$gutter-width : $gutter-width
|
|
247
321
|
);
|
|
248
322
|
}
|
|
249
323
|
|
data/sass/ezy/grid/_layout.scss
CHANGED
|
@@ -17,7 +17,8 @@ $layouts: ();
|
|
|
17
17
|
$at-breakpoint : false,
|
|
18
18
|
$column-width : false,
|
|
19
19
|
$gutter-width : false,
|
|
20
|
-
$legacy-support : false
|
|
20
|
+
$legacy-support : false,
|
|
21
|
+
$is-fluid : $is-fluid
|
|
21
22
|
) {
|
|
22
23
|
|
|
23
24
|
// Catching media breakpoints from set-breakpoint
|
|
@@ -29,7 +30,7 @@ $layouts: ();
|
|
|
29
30
|
}
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
$layout: ( $columns ($grid-padding) ($at-breakpoint) $column-width $gutter-width $legacy-support );
|
|
33
|
+
$layout: ( $columns ($grid-padding) ($at-breakpoint) $column-width $gutter-width $legacy-support $is-fluid );
|
|
33
34
|
|
|
34
35
|
// Storing layout
|
|
35
36
|
$layouts: append( $layouts, $layout, comma );
|
|
@@ -48,6 +49,7 @@ $layouts: ();
|
|
|
48
49
|
|
|
49
50
|
// Storing reference to global variables
|
|
50
51
|
$at-breakpoint-ref : $at-breakpoint;
|
|
52
|
+
$is-fluid-ref : $is-fluid;
|
|
51
53
|
$total-columns-ref : $total-columns;
|
|
52
54
|
$grid-padding-ref : $grid-padding;
|
|
53
55
|
$column-width-ref : $column-width;
|
|
@@ -59,6 +61,7 @@ $layouts: ();
|
|
|
59
61
|
$at-breakpoint : nth( $layout, 3 );
|
|
60
62
|
$column-width : nth( $layout, 4 );
|
|
61
63
|
$gutter-width : nth( $layout, 5 );
|
|
64
|
+
$is-fluid : nth( $layout, 7 );
|
|
62
65
|
|
|
63
66
|
// Use general settings if false
|
|
64
67
|
@if not $grid-padding {
|
|
@@ -86,6 +89,7 @@ $layouts: ();
|
|
|
86
89
|
|
|
87
90
|
// Resetting references to original values
|
|
88
91
|
$at-breakpoint : $at-breakpoint-ref;
|
|
92
|
+
$is-fluid : $is-fluid-ref;
|
|
89
93
|
$total-columns : $total-columns-ref;
|
|
90
94
|
$grid-padding : $grid-padding-ref;
|
|
91
95
|
$column-width : $column-width-ref;
|
|
@@ -41,6 +41,11 @@
|
|
|
41
41
|
_display: inline;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
body {
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
44
49
|
.page {
|
|
45
50
|
max-width: 700px;
|
|
46
51
|
/* Forcing static grid on IE6 and IE7 */
|
|
@@ -65,6 +70,13 @@
|
|
|
65
70
|
padding-left: 30px;
|
|
66
71
|
padding-right: 30px;
|
|
67
72
|
}
|
|
73
|
+
@media (min-width: 1450px) {
|
|
74
|
+
.page {
|
|
75
|
+
width: 1390px;
|
|
76
|
+
padding-left: 30px;
|
|
77
|
+
padding-right: 30px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
68
80
|
|
|
69
81
|
.grid {
|
|
70
82
|
margin-left: -1.42857%;
|
|
@@ -81,6 +93,12 @@
|
|
|
81
93
|
margin-left: -1.79856%;
|
|
82
94
|
margin-right: -1.79856%;
|
|
83
95
|
}
|
|
96
|
+
@media (min-width: 1450px) {
|
|
97
|
+
.grid {
|
|
98
|
+
margin-left: -25px;
|
|
99
|
+
margin-right: -25px;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
84
102
|
|
|
85
103
|
.small, .medium, .large {
|
|
86
104
|
background: hotpink;
|
|
@@ -107,6 +125,14 @@
|
|
|
107
125
|
margin-left: 1.73611%;
|
|
108
126
|
margin-right: 1.73611%;
|
|
109
127
|
}
|
|
128
|
+
@media (min-width: 1450px) {
|
|
129
|
+
.small {
|
|
130
|
+
/* Spanning 6 columns */
|
|
131
|
+
width: 430px;
|
|
132
|
+
margin-left: 25px;
|
|
133
|
+
margin-right: 25px;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
110
136
|
|
|
111
137
|
.medium {
|
|
112
138
|
/* Spanning 6 of 12 columns */
|
|
@@ -127,6 +153,14 @@
|
|
|
127
153
|
margin-left: 1.73611%;
|
|
128
154
|
margin-right: 1.73611%;
|
|
129
155
|
}
|
|
156
|
+
@media (min-width: 1450px) {
|
|
157
|
+
.medium {
|
|
158
|
+
/* Spanning 9 columns */
|
|
159
|
+
width: 670px;
|
|
160
|
+
margin-left: 25px;
|
|
161
|
+
margin-right: 25px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
130
164
|
|
|
131
165
|
.large {
|
|
132
166
|
/* Spanning 12 of 12 columns */
|
|
@@ -147,3 +181,11 @@
|
|
|
147
181
|
margin-left: 1.73611%;
|
|
148
182
|
margin-right: 1.73611%;
|
|
149
183
|
}
|
|
184
|
+
@media (min-width: 1450px) {
|
|
185
|
+
.large {
|
|
186
|
+
/* Spanning 18 columns */
|
|
187
|
+
width: 1390px;
|
|
188
|
+
margin-left: 25px;
|
|
189
|
+
margin-right: 25px;
|
|
190
|
+
}
|
|
191
|
+
}
|
data/test/css/sprites/layout.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.classic {
|
|
2
|
-
background-image: url('../../img/test-layout.png?
|
|
2
|
+
background-image: url('../../img/test-layout.png?10341392543291');
|
|
3
3
|
background-repeat: no-repeat;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
7
|
.classic {
|
|
8
8
|
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-layout@2x.png?
|
|
9
|
+
background-image: url('../../img/test-layout@2x.png?10341392543291');
|
|
10
10
|
background-size: 718px auto;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
* Compiled 2x sprite has all images aligned to the right
|
|
4
4
|
*/
|
|
5
5
|
.vertical {
|
|
6
|
-
background-image: url('../../img/test-position.png?
|
|
6
|
+
background-image: url('../../img/test-position.png?10341392543291');
|
|
7
7
|
background-repeat: no-repeat;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
11
11
|
.vertical {
|
|
12
12
|
/* Retina sprite */
|
|
13
|
-
background-image: url('../../img/test-position@2x.png?
|
|
13
|
+
background-image: url('../../img/test-position@2x.png?10341392543291');
|
|
14
14
|
background-size: 281px auto;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
* Compiled 2x sprite has all images aligned to the bottom
|
|
21
21
|
*/
|
|
22
22
|
.horizontal {
|
|
23
|
-
background-image: url('../../img/test-position-alt.png?
|
|
23
|
+
background-image: url('../../img/test-position-alt.png?10341392543291');
|
|
24
24
|
background-repeat: no-repeat;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
28
28
|
.horizontal {
|
|
29
29
|
/* Retina sprite */
|
|
30
|
-
background-image: url('../../img/test-position-alt@2x.png?
|
|
30
|
+
background-image: url('../../img/test-position-alt@2x.png?10341392543291');
|
|
31
31
|
background-size: 421px auto;
|
|
32
32
|
}
|
|
33
33
|
}
|
data/test/css/sprites/repeat.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.meassure-1, .meassure-2, .meassure-3 {
|
|
2
|
-
background-image: url('../../img/test-repeat.png?
|
|
2
|
+
background-image: url('../../img/test-repeat.png?10341392543291');
|
|
3
3
|
background-repeat: repeat-x;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
7
|
.meassure-1, .meassure-2, .meassure-3 {
|
|
8
8
|
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-repeat@2x.png?
|
|
9
|
+
background-image: url('../../img/test-repeat@2x.png?10341392543291');
|
|
10
10
|
background-size: 378px auto;
|
|
11
11
|
background-repeat: no-repeat;
|
|
12
12
|
}
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
* Min device pixel ratio changed to 1.7
|
|
3
3
|
*/
|
|
4
4
|
.classic {
|
|
5
|
-
background-image: url('../../img/test-retina.png?
|
|
5
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
6
6
|
background-repeat: no-repeat;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
|
|
10
10
|
.classic {
|
|
11
11
|
/* Retina sprite */
|
|
12
|
-
background-image: url('../../img/test-retina@2x.png?
|
|
12
|
+
background-image: url('../../img/test-retina@2x.png?10341392543291');
|
|
13
13
|
background-size: 152px auto;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.classic, .no-media-queries .indy {
|
|
2
|
-
background-image: url('../../img/test-retina.png?
|
|
2
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
3
3
|
background-repeat: no-repeat;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
7
|
.classic {
|
|
8
8
|
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-retina@2x.png?
|
|
9
|
+
background-image: url('../../img/test-retina@2x.png?10341392543291');
|
|
10
10
|
background-size: 152px auto;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
@media (min-width: 400px) {
|
|
31
31
|
.indy {
|
|
32
32
|
background-position: 0 -141px;
|
|
33
|
-
background-image: url('../../img/test-retina.png?
|
|
33
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
34
34
|
background-repeat: no-repeat;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
.indy {
|
|
39
39
|
/* Retina sprite */
|
|
40
40
|
background-position: 0 0;
|
|
41
|
-
background-image: url('../../img/test-retina@2x.png?
|
|
41
|
+
background-image: url('../../img/test-retina@2x.png?10341392543291');
|
|
42
42
|
background-size: 152px auto;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
@media (min-width: 960px) {
|
|
46
46
|
.indy {
|
|
47
47
|
background-position: 0 -281px;
|
|
48
|
-
background-image: url('../../img/test-retina.png?
|
|
48
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
49
49
|
background-repeat: no-repeat;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
.indy {
|
|
54
54
|
/* Retina sprite */
|
|
55
55
|
background-position: 0 -140px;
|
|
56
|
-
background-image: url('../../img/test-retina@2x.png?
|
|
56
|
+
background-image: url('../../img/test-retina@2x.png?10341392543291');
|
|
57
57
|
background-size: 152px auto;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
@media (min-width: 1024px) {
|
|
61
61
|
.indy {
|
|
62
62
|
background-position: 0 0;
|
|
63
|
-
background-image: url('../../img/test-retina.png?
|
|
63
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
64
64
|
background-repeat: no-repeat;
|
|
65
65
|
}
|
|
66
66
|
}
|
data/test/css/sprites/retina.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.classic, .indy, .alien {
|
|
2
|
-
background-image: url('../../img/test-retina.png?
|
|
2
|
+
background-image: url('../../img/test-retina.png?10341392543291');
|
|
3
3
|
background-repeat: no-repeat;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
7
|
.classic, .indy {
|
|
8
8
|
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-retina@2x.png?
|
|
9
|
+
background-image: url('../../img/test-retina@2x.png?10341392543291');
|
|
10
10
|
background-size: 152px auto;
|
|
11
11
|
}
|
|
12
12
|
}
|
data/test/css/sprites/simple.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.classic {
|
|
2
|
-
background-image: url('../../img/test-spacing.png?
|
|
2
|
+
background-image: url('../../img/test-spacing.png?10341392543291');
|
|
3
3
|
background-repeat: no-repeat;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
|
7
7
|
.classic {
|
|
8
8
|
/* Retina sprite */
|
|
9
|
-
background-image: url('../../img/test-spacing@2x.png?
|
|
9
|
+
background-image: url('../../img/test-spacing@2x.png?10341392543291');
|
|
10
10
|
background-size: 159px auto;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
@@ -19,10 +19,10 @@ $total-columns : 12;
|
|
|
19
19
|
// ------------------------------------
|
|
20
20
|
// Grid settings large (breapoint)
|
|
21
21
|
|
|
22
|
-
$column-width-
|
|
23
|
-
$gutter-width-
|
|
24
|
-
$grid-padding-
|
|
25
|
-
$total-columns-
|
|
22
|
+
$column-width-medium : 30px;
|
|
23
|
+
$gutter-width-medium : 50px;
|
|
24
|
+
$grid-padding-medium : 30px;
|
|
25
|
+
$total-columns-medium : 18;
|
|
26
26
|
|
|
27
27
|
// ------------------------------------
|
|
28
28
|
// Breakpoint settings
|
|
@@ -34,17 +34,28 @@ $legacy-selector: ".no-media-queries";
|
|
|
34
34
|
// ------------------------------------
|
|
35
35
|
// Defining media query breakpoints
|
|
36
36
|
|
|
37
|
-
$breakpoint-
|
|
37
|
+
$breakpoint-medium : set-breakpoint( $min: grid-width( $total-columns ), $legacy-support: true ); // Default for old IE
|
|
38
|
+
$breakpoint-large : set-breakpoint( $min: grid-width( $total-columns-medium, $grid-padding-medium, $column-width-medium, $gutter-width-medium ) );
|
|
38
39
|
|
|
39
40
|
// ------------------------------------
|
|
40
41
|
// Defining grid layouts
|
|
41
42
|
|
|
43
|
+
$layout-medium : set-layout(
|
|
44
|
+
$total-columns-medium,
|
|
45
|
+
$grid-padding : $grid-padding-medium,
|
|
46
|
+
$column-width : $column-width-medium,
|
|
47
|
+
$gutter-width : $gutter-width-medium,
|
|
48
|
+
$at-breakpoint : $breakpoint-medium
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
// Static grid for larges breakpoint (fixes Safari's shitty sub pixel rounding)
|
|
42
52
|
$layout-large : set-layout(
|
|
43
|
-
$total-columns-
|
|
44
|
-
$grid-padding : $grid-padding-
|
|
45
|
-
$column-width : $column-width-
|
|
46
|
-
$gutter-width : $gutter-width-
|
|
47
|
-
$at-breakpoint : $breakpoint-large
|
|
53
|
+
$total-columns-medium,
|
|
54
|
+
$grid-padding : $grid-padding-medium,
|
|
55
|
+
$column-width : $column-width-medium,
|
|
56
|
+
$gutter-width : $gutter-width-medium,
|
|
57
|
+
$at-breakpoint : $breakpoint-large,
|
|
58
|
+
$is-fluid : false // setting static
|
|
48
59
|
);
|
|
49
60
|
|
|
50
61
|
// ------------------------------------
|
|
@@ -55,6 +66,11 @@ $layout-large : set-layout(
|
|
|
55
66
|
// ------------------------------------
|
|
56
67
|
// Grid layouts
|
|
57
68
|
|
|
69
|
+
body {
|
|
70
|
+
margin: 0;
|
|
71
|
+
padding: 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
58
74
|
.page {
|
|
59
75
|
@include master;
|
|
60
76
|
@include each-layout {
|
|
@@ -78,6 +94,9 @@ $layout-large : set-layout(
|
|
|
78
94
|
.small {
|
|
79
95
|
@extend %column;
|
|
80
96
|
@include span-columns( 3 ); // 3 of 12 columns
|
|
97
|
+
@include at-layout( $layout-medium ) {
|
|
98
|
+
@include span-columns( 6 ); // 6 of 18 columns
|
|
99
|
+
}
|
|
81
100
|
@include at-layout( $layout-large ) {
|
|
82
101
|
@include span-columns( 6 ); // 6 of 18 columns
|
|
83
102
|
}
|
|
@@ -86,6 +105,9 @@ $layout-large : set-layout(
|
|
|
86
105
|
.medium {
|
|
87
106
|
@extend %column;
|
|
88
107
|
@include span-columns( 6 ); // 9 of 12 columns
|
|
108
|
+
@include at-layout( $layout-medium ) {
|
|
109
|
+
@include span-columns( 9 ); // 9 of 18 columns
|
|
110
|
+
}
|
|
89
111
|
@include at-layout( $layout-large ) {
|
|
90
112
|
@include span-columns( 9 ); // 9 of 18 columns
|
|
91
113
|
}
|
|
@@ -94,8 +116,11 @@ $layout-large : set-layout(
|
|
|
94
116
|
.large {
|
|
95
117
|
@extend %column;
|
|
96
118
|
@include span-columns( 12 ); // 9 of 12 columns
|
|
97
|
-
@include at-layout( $layout-
|
|
119
|
+
@include at-layout( $layout-medium ) {
|
|
98
120
|
@include span-columns( 18 ); // 18 of 18 columns
|
|
99
121
|
}
|
|
122
|
+
@include at-layout( $layout-large ) {
|
|
123
|
+
@include span-columns( 18 ); // 18 of 18 columns
|
|
124
|
+
}
|
|
100
125
|
}
|
|
101
126
|
|