ezy 0.3.3 → 0.4.0.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.
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
- }