ezy 0.3.3 → 0.4.0.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/ezy.gemspec +5 -5
  4. data/sass/ezy/_grid.scss +15 -25
  5. data/sass/ezy/_media.scss +2 -2
  6. data/sass/ezy/_sprites.scss +1 -1
  7. data/sass/ezy/grid/_debug.scss +8 -38
  8. data/sass/ezy/grid/_layout.scss +19 -19
  9. data/test/css/sprites/layout.css +2 -2
  10. data/test/css/sprites/position.css +4 -4
  11. data/test/css/sprites/repeat.css +6 -6
  12. data/test/css/sprites/resolution.css +4 -4
  13. data/test/css/sprites/responsive.css +13 -13
  14. data/test/css/sprites/retina.css +6 -6
  15. data/test/css/sprites/simple.css +3 -3
  16. data/test/css/sprites/spacing.css +4 -4
  17. data/test/html/grid/fluid.html +1 -1
  18. data/test/html/grid/responsive.html +1 -1
  19. data/test/scss/media.scss +1 -1
  20. metadata +14 -17
  21. data/test/css/grid/layout/debug.css +0 -393
  22. data/test/html/grid/debug.html +0 -63
  23. data/test/scss/grid/layout/debug.scss +0 -102
data/test/css/sprites/responsive.css CHANGED
@@ -1,25 +1,25 @@
1
1
  .classic, .no-media-queries .indy {
2
- background-image: url('../../img/test-retina.png?10341392543291');
2
+ background-image: url('../../img/test-retina.png?17351396798548');
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?10341392543291');
9
+ background-image: url('../../img/test-retina@2x.png?17351396798548');
10
10
  background-size: 152px auto;
11
11
  }
12
12
  }
13
13
 
14
14
  .classic {
15
- background-position: 0 -281px;
15
+ background-position: 0 -141px;
16
16
  width: 152px;
17
17
  height: 135px;
18
18
  }
19
19
  @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) {
20
20
  .classic {
21
21
  /* Retina sprite */
22
- background-position: 0 -140px;
22
+ background-position: 0 0;
23
23
  }
24
24
  }
25
25
 
@@ -29,38 +29,38 @@
29
29
  }
30
30
  @media (min-width: 400px) {
31
31
  .indy {
32
- background-position: 0 -141px;
33
- background-image: url('../../img/test-retina.png?10341392543291');
32
+ background-position: 0 -276px;
33
+ background-image: url('../../img/test-retina.png?17351396798548');
34
34
  background-repeat: no-repeat;
35
35
  }
36
36
  }
37
37
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 400px), only screen and (min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min-resolution: 192dpi) and (min-width: 400px), only screen and (min-resolution: 2dppx) and (min-width: 400px) {
38
38
  .indy {
39
39
  /* Retina sprite */
40
- background-position: 0 0;
41
- background-image: url('../../img/test-retina@2x.png?10341392543291');
40
+ background-position: 0 -135px;
41
+ background-image: url('../../img/test-retina@2x.png?17351396798548');
42
42
  background-size: 152px auto;
43
43
  }
44
44
  }
45
45
  @media (min-width: 960px) {
46
46
  .indy {
47
- background-position: 0 -281px;
48
- background-image: url('../../img/test-retina.png?10341392543291');
47
+ background-position: 0 -141px;
48
+ background-image: url('../../img/test-retina.png?17351396798548');
49
49
  background-repeat: no-repeat;
50
50
  }
51
51
  }
52
52
  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 960px), only screen and (min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min-resolution: 192dpi) and (min-width: 960px), only screen and (min-resolution: 2dppx) and (min-width: 960px) {
53
53
  .indy {
54
54
  /* Retina sprite */
55
- background-position: 0 -140px;
56
- background-image: url('../../img/test-retina@2x.png?10341392543291');
55
+ background-position: 0 0;
56
+ background-image: url('../../img/test-retina@2x.png?17351396798548');
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?10341392543291');
63
+ background-image: url('../../img/test-retina.png?17351396798548');
64
64
  background-repeat: no-repeat;
65
65
  }
66
66
  }
data/test/css/sprites/retina.css CHANGED
@@ -1,37 +1,37 @@
1
1
  .classic, .indy, .alien {
2
- background-image: url('../../img/test-retina.png?10341392543291');
2
+ background-image: url('../../img/test-retina.png?17351396798550');
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?10341392543291');
9
+ background-image: url('../../img/test-retina@2x.png?17351396798550');
10
10
  background-size: 152px auto;
11
11
  }
12
12
  }
13
13
 
14
14
  .classic {
15
- background-position: 0 -281px;
15
+ background-position: 0 -141px;
16
16
  width: 152px;
17
17
  height: 135px;
18
18
  }
19
19
  @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) {
20
20
  .classic {
21
21
  /* Retina sprite */
22
- background-position: 0 -140px;
22
+ background-position: 0 0;
23
23
  }
24
24
  }
25
25
 
26
26
  .indy {
27
- background-position: 0 -141px;
27
+ background-position: 0 -276px;
28
28
  width: 128px;
29
29
  height: 140px;
30
30
  }
31
31
  @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) {
32
32
  .indy {
33
33
  /* Retina sprite */
34
- background-position: 0 0;
34
+ background-position: 0 -135px;
35
35
  }
36
36
  }
37
37
 
data/test/css/sprites/simple.css CHANGED
@@ -1,16 +1,16 @@
1
1
  .classic, .indy {
2
- background-image: url('../../img/test-simple.png?10341392543291');
2
+ background-image: url('../../img/test-simple.png?17351396798551');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
6
6
  .classic {
7
- background-position: 0 -281px;
7
+ background-position: 0 -141px;
8
8
  width: 152px;
9
9
  height: 135px;
10
10
  }
11
11
 
12
12
  .indy {
13
- background-position: 0 -141px;
13
+ background-position: 0 -276px;
14
14
  width: 128px;
15
15
  height: 140px;
16
16
  }
data/test/css/sprites/spacing.css CHANGED
@@ -1,22 +1,22 @@
1
1
  .classic {
2
- background-image: url('../../img/test-spacing.png?10341392543291');
2
+ background-image: url('../../img/test-spacing.png?17351396798557');
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?10341392543291');
9
+ background-image: url('../../img/test-spacing@2x.png?17351396798557');
10
10
  background-size: 159px auto;
11
11
  }
12
12
  }
13
13
 
14
14
  .classic {
15
- background-position: 0 -381px;
15
+ background-position: 0 -191px;
16
16
  }
17
17
  @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) {
18
18
  .classic {
19
19
  /* Retina sprite */
20
- background-position: 0 -481px;
20
+ background-position: 0 -241px;
21
21
  }
22
22
  }
data/test/html/grid/fluid.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
 
6
- <title>Grid: fluid</title>
6
+ <title>Sprite: repeat</title>
7
7
 
8
8
  <meta name="description" content="Ezy Grid Demo">
9
9
  <meta name="viewport" content="width=device-width">
data/test/html/grid/responsive.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="utf-8">
6
6
 
7
- <title>Grid: responsive</title>
7
+ <title>Sprite: repeat</title>
8
8
 
9
9
  <meta name="description" content="Ezy Grid Demo">
10
10
  <meta name="viewport" content="width=device-width">
data/test/scss/media.scss CHANGED
@@ -54,7 +54,7 @@ $breakpoint-4-b: set-breakpoint( $custom: "(min-width: 40em) and (max-width: 80
54
54
  // -------------------------------------------------------------------- *
55
55
  // Custom legacy selector
56
56
 
57
- $legacy-selector: ".ie8";
57
+ $legacy-selector: ".ie8" !global;
58
58
 
59
59
  @include at-breakpoint( $breakpoint-2-b ) {
60
60
  content: "Custom legacy selector";
metadata CHANGED
@@ -1,43 +1,43 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ezy
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.3
4
+ version: 0.4.0.beta
5
5
  platform: ruby
6
6
  authors:
7
7
  - Frej Raahede Nielsen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-04-16 00:00:00.000000000 Z
11
+ date: 2014-04-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - '>='
17
+ - - ">="
18
18
  - !ruby/object:Gem::Version
19
- version: 0.12.2
19
+ version: 1.0.0
20
20
  type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - '>='
24
+ - - ">="
25
25
  - !ruby/object:Gem::Version
26
- version: 0.12.2
26
+ version: 1.0.0
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: sass
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - '>='
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
- version: 3.2.0
33
+ version: 3.3.4
34
34
  type: :runtime
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - '>='
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
- version: 3.2.0
40
+ version: 3.3.4
41
41
  description: A collection of SCSS tools for creating responsive websites. Includes
42
42
  a simple but powerful grid framework, media query helpers and sprite helpers.
43
43
  email: frejraahede@gmail.com
@@ -81,7 +81,6 @@ files:
81
81
  - test/css/grid/elastic.css
82
82
  - test/css/grid/fluid.css
83
83
  - test/css/grid/gutter.css
84
- - test/css/grid/layout/debug.css
85
84
  - test/css/grid/layout/fluid.css
86
85
  - test/css/grid/layout/grid-settings.css
87
86
  - test/css/grid/layout/responsive.css
@@ -102,7 +101,6 @@ files:
102
101
  - test/scss/grid/elastic.scss
103
102
  - test/scss/grid/fluid.scss
104
103
  - test/scss/grid/gutter.scss
105
- - test/scss/grid/layout/debug.scss
106
104
  - test/scss/grid/layout/fluid.scss
107
105
  - test/scss/grid/layout/grid-settings.scss
108
106
  - test/scss/grid/layout/responsive.scss
@@ -120,7 +118,6 @@ files:
120
118
  - test/scss/sprites/simple.scss
121
119
  - test/scss/sprites/size.scss
122
120
  - test/scss/sprites/spacing.scss
123
- - test/html/grid/debug.html
124
121
  - test/html/grid/fluid.html
125
122
  - test/html/grid/grid-settings.html
126
123
  - test/html/grid/responsive.html
@@ -176,17 +173,17 @@ require_paths:
176
173
  - lib
177
174
  required_ruby_version: !ruby/object:Gem::Requirement
178
175
  requirements:
179
- - - '>='
176
+ - - ">="
180
177
  - !ruby/object:Gem::Version
181
178
  version: '0'
182
179
  required_rubygems_version: !ruby/object:Gem::Requirement
183
180
  requirements:
184
- - - '>='
181
+ - - ">"
185
182
  - !ruby/object:Gem::Version
186
- version: '0'
183
+ version: 1.3.1
187
184
  requirements: []
188
185
  rubyforge_project:
189
- rubygems_version: 2.1.10
186
+ rubygems_version: 2.1.11
190
187
  signing_key:
191
188
  specification_version: 4
192
189
  summary: The developer's toolbox for responsive websites
data/test/css/grid/layout/debug.css DELETED
@@ -1,393 +0,0 @@
1
- /* ------------------------------------------------- *
2
- * Ezy Grid by Frej Raahede Nielsen
3
- * http://github.com/raahede/ezy
4
- * ------------------------------------------------- *
5
- */
6
- /* ------------------------------------------------- *
7
- * Micro Clearfix
8
- * http://nicolasgallagher.com/micro-clearfix-hack/
9
- */
10
- .page:before, .grid:before,
11
- .page:after,
12
- .grid:after {
13
- content: " ";
14
- display: table;
15
- }
16
-
17
- .page:after, .grid:after {
18
- clear: both;
19
- }
20
-
21
- .page, .grid {
22
- /**
23
- * For IE 6/7 only
24
- * Include this rule to trigger hasLayout and contain floats.
25
- */
26
- *zoom: 1;
27
- }
28
-
29
- /* --- End clearfix --- */
30
- .page {
31
- margin-left: auto;
32
- margin-right: auto;
33
- }
34
-
35
- .grid:before, .small, .medium, .large {
36
- /* Grid column base at a 4-column context */
37
- margin-left: 3.125%;
38
- margin-right: 3.125%;
39
- float: left;
40
- /* Fixing double margin on IE6 */
41
- _display: inline;
42
- position: relative;
43
- }
44
- .grid:before, .small:before, .medium:before, .large:before {
45
- background-color: #EBEBEB;
46
- border: 1px solid #7A7A7A;
47
- color: #000;
48
- display: inline-block;
49
- font-family: monospace, serif;
50
- font-size: 8px;
51
- left: 0;
52
- line-height: 11px;
53
- padding: 0px 2px;
54
- position: absolute;
55
- top: 0;
56
- z-index: 999;
57
- }
58
-
59
- .page {
60
- max-width: 300px;
61
- /* Forcing static grid on IE6 and IE7 */
62
- *width: 300px;
63
- padding-left: 10px;
64
- padding-right: 10px;
65
- }
66
- @media (min-width: 321px) {
67
- .page {
68
- max-width: 620px;
69
- /* Forcing static grid on IE6 and IE7 */
70
- *width: 620px;
71
- padding-left: 10px;
72
- padding-right: 10px;
73
- }
74
- }
75
- @media (min-width: 641px) {
76
- .page {
77
- max-width: 940px;
78
- /* Forcing static grid on IE6 and IE7 */
79
- *width: 940px;
80
- padding-left: 10px;
81
- padding-right: 10px;
82
- }
83
- }
84
- .no-media-queries .page {
85
- /* Fallback for browsers not supporting media queries */
86
- max-width: 940px;
87
- /* Forcing static grid on IE6 and IE7 */
88
- *width: 940px;
89
- padding-left: 10px;
90
- padding-right: 10px;
91
- }
92
-
93
- .grid {
94
- margin-left: -3.33333%;
95
- margin-right: -3.33333%;
96
- position: relative;
97
- }
98
- .grid:before {
99
- background-color: #EBEBEB;
100
- border: 1px solid #7A7A7A;
101
- color: #000;
102
- display: inline-block;
103
- font-family: monospace, serif;
104
- font-size: 8px;
105
- left: 0;
106
- line-height: 11px;
107
- padding: 0px 2px;
108
- position: absolute;
109
- top: 0;
110
- z-index: 999;
111
- }
112
- .grid:before {
113
- bottom: 0;
114
- padding: 1px 4px;
115
- top: auto;
116
- white-space: pre-wrap;
117
- box-sizing: border-box;
118
- -moz-box-sizing: border-box;
119
- -webkit-box-sizing: border-box;
120
- -o-box-sizing: border-box;
121
- -ms-box-sizing: border-box;
122
- }
123
- .grid:before {
124
- content: "CONTEXT :: columns: 4 | column-width: 60px | gutter-width: 20px | at-breakpoint: false";
125
- }
126
- .grid:before {
127
- /* Spanning 4 of 4 columns */
128
- width: 93.75%;
129
- width: auto;
130
- }
131
- .grid:before:before {
132
- content: "4 of 4";
133
- }
134
- @media (min-width: 321px) {
135
- .grid {
136
- margin-left: -1.6129%;
137
- margin-right: -1.6129%;
138
- position: relative;
139
- }
140
- .grid:before {
141
- background-color: #EBEBEB;
142
- border: 1px solid #7A7A7A;
143
- color: #000;
144
- display: inline-block;
145
- font-family: monospace, serif;
146
- font-size: 8px;
147
- left: 0;
148
- line-height: 11px;
149
- padding: 0px 2px;
150
- position: absolute;
151
- top: 0;
152
- z-index: 999;
153
- }
154
- .grid:before {
155
- bottom: 0;
156
- padding: 1px 4px;
157
- top: auto;
158
- white-space: pre-wrap;
159
- box-sizing: border-box;
160
- -moz-box-sizing: border-box;
161
- -webkit-box-sizing: border-box;
162
- -o-box-sizing: border-box;
163
- -ms-box-sizing: border-box;
164
- }
165
- .grid:before {
166
- content: "CONTEXT :: columns: 8 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
167
- }
168
- .grid:before {
169
- /* Spanning 8 of 8 columns */
170
- width: 96.875%;
171
- margin-left: 1.5625%;
172
- margin-right: 1.5625%;
173
- width: auto;
174
- }
175
- .grid:before:before {
176
- content: "8 of 8";
177
- }
178
- }
179
- @media (min-width: 641px) {
180
- .grid {
181
- margin-left: -1.06383%;
182
- margin-right: -1.06383%;
183
- position: relative;
184
- }
185
- .grid:before {
186
- background-color: #EBEBEB;
187
- border: 1px solid #7A7A7A;
188
- color: #000;
189
- display: inline-block;
190
- font-family: monospace, serif;
191
- font-size: 8px;
192
- left: 0;
193
- line-height: 11px;
194
- padding: 0px 2px;
195
- position: absolute;
196
- top: 0;
197
- z-index: 999;
198
- }
199
- .grid:before {
200
- bottom: 0;
201
- padding: 1px 4px;
202
- top: auto;
203
- white-space: pre-wrap;
204
- box-sizing: border-box;
205
- -moz-box-sizing: border-box;
206
- -webkit-box-sizing: border-box;
207
- -o-box-sizing: border-box;
208
- -ms-box-sizing: border-box;
209
- }
210
- .grid:before {
211
- content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
212
- }
213
- .grid:before {
214
- /* Spanning 12 of 12 columns */
215
- width: 97.91667%;
216
- margin-left: 1.04167%;
217
- margin-right: 1.04167%;
218
- width: auto;
219
- }
220
- .grid:before:before {
221
- content: "12 of 12";
222
- }
223
- }
224
- .no-media-queries .grid {
225
- /* Fallback for browsers not supporting media queries */
226
- margin-left: -1.06383%;
227
- margin-right: -1.06383%;
228
- position: relative;
229
- }
230
- .no-media-queries .grid:before {
231
- background-color: #EBEBEB;
232
- border: 1px solid #7A7A7A;
233
- color: #000;
234
- display: inline-block;
235
- font-family: monospace, serif;
236
- font-size: 8px;
237
- left: 0;
238
- line-height: 11px;
239
- padding: 0px 2px;
240
- position: absolute;
241
- top: 0;
242
- z-index: 999;
243
- }
244
- .no-media-queries .grid:before {
245
- bottom: 0;
246
- padding: 1px 4px;
247
- top: auto;
248
- white-space: pre-wrap;
249
- box-sizing: border-box;
250
- -moz-box-sizing: border-box;
251
- -webkit-box-sizing: border-box;
252
- -o-box-sizing: border-box;
253
- -ms-box-sizing: border-box;
254
- }
255
- .no-media-queries .grid:before {
256
- content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
257
- }
258
- .no-media-queries .grid:before {
259
- /* Spanning 12 of 12 columns */
260
- width: 97.91667%;
261
- margin-left: 1.04167%;
262
- margin-right: 1.04167%;
263
- width: auto;
264
- }
265
- .no-media-queries .grid:before:before {
266
- content: "12 of 12";
267
- }
268
-
269
- .small, .medium, .large {
270
- background: hotpink;
271
- text-align: center;
272
- zoom: 1;
273
- }
274
-
275
- .small {
276
- /* Spanning 2 of 4 columns */
277
- width: 43.75%;
278
- }
279
- .small:before {
280
- content: "2 of 4";
281
- }
282
- @media (min-width: 321px) {
283
- .small {
284
- /* Spanning 2 of 8 columns */
285
- width: 21.875%;
286
- margin-left: 1.5625%;
287
- margin-right: 1.5625%;
288
- }
289
- .small:before {
290
- content: "2 of 8";
291
- }
292
- }
293
- @media (min-width: 641px) {
294
- .small {
295
- /* Spanning 3 of 12 columns */
296
- width: 22.91667%;
297
- margin-left: 1.04167%;
298
- margin-right: 1.04167%;
299
- }
300
- .small:before {
301
- content: "3 of 12";
302
- }
303
- }
304
- .no-media-queries .small {
305
- /* Fallback for browsers not supporting media queries */
306
- /* Spanning 3 of 12 columns */
307
- width: 22.91667%;
308
- margin-left: 1.04167%;
309
- margin-right: 1.04167%;
310
- }
311
- .no-media-queries .small:before {
312
- content: "3 of 12";
313
- }
314
-
315
- .medium {
316
- /* Spanning 4 of 4 columns */
317
- width: 93.75%;
318
- }
319
- .medium:before {
320
- content: "4 of 4";
321
- }
322
- @media (min-width: 321px) {
323
- .medium {
324
- /* Spanning 4 of 8 columns */
325
- width: 46.875%;
326
- margin-left: 1.5625%;
327
- margin-right: 1.5625%;
328
- }
329
- .medium:before {
330
- content: "4 of 8";
331
- }
332
- }
333
- @media (min-width: 641px) {
334
- .medium {
335
- /* Spanning 6 of 12 columns */
336
- width: 47.91667%;
337
- margin-left: 1.04167%;
338
- margin-right: 1.04167%;
339
- }
340
- .medium:before {
341
- content: "6 of 12";
342
- }
343
- }
344
- .no-media-queries .medium {
345
- /* Fallback for browsers not supporting media queries */
346
- /* Spanning 6 of 12 columns */
347
- width: 47.91667%;
348
- margin-left: 1.04167%;
349
- margin-right: 1.04167%;
350
- }
351
- .no-media-queries .medium:before {
352
- content: "6 of 12";
353
- }
354
-
355
- .large {
356
- /* Spanning 4 of 4 columns */
357
- width: 93.75%;
358
- }
359
- .large:before {
360
- content: "4 of 4";
361
- }
362
- @media (min-width: 321px) {
363
- .large {
364
- /* Spanning 8 of 8 columns */
365
- width: 96.875%;
366
- margin-left: 1.5625%;
367
- margin-right: 1.5625%;
368
- }
369
- .large:before {
370
- content: "8 of 8";
371
- }
372
- }
373
- @media (min-width: 641px) {
374
- .large {
375
- /* Spanning 12 of 12 columns */
376
- width: 97.91667%;
377
- margin-left: 1.04167%;
378
- margin-right: 1.04167%;
379
- }
380
- .large:before {
381
- content: "12 of 12";
382
- }
383
- }
384
- .no-media-queries .large {
385
- /* Fallback for browsers not supporting media queries */
386
- /* Spanning 12 of 12 columns */
387
- width: 97.91667%;
388
- margin-left: 1.04167%;
389
- margin-right: 1.04167%;
390
- }
391
- .no-media-queries .large:before {
392
- content: "12 of 12";
393
- }