ezy 0.3.0.beta → 0.3.1.beta
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.
- 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
|
|