zen-grids 2.0.0.alpha.2 → 2.0.0.beta.1

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 (39) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +333 -268
  3. data/README.txt +5 -5
  4. data/bower.json +25 -0
  5. data/templates/project/_init.scss +5 -5
  6. data/templates/project/_layout.scss +8 -8
  7. data/templates/unit-tests/manifest.rb +14 -13
  8. data/templates/unit-tests/sass/function-zen-direction-switch.scss +23 -0
  9. data/templates/unit-tests/sass/function-zen-grid-item-width.scss +12 -6
  10. data/templates/unit-tests/sass/function-zen-half-gutter.scss +6 -6
  11. data/templates/unit-tests/sass/function-zen-unit-width.scss +17 -5
  12. data/templates/unit-tests/sass/zen-float.scss +7 -7
  13. data/templates/unit-tests/sass/zen-grid-background.scss +41 -30
  14. data/templates/unit-tests/sass/zen-grid-container.scss +11 -4
  15. data/templates/unit-tests/sass/zen-grid-flow-item.scss +22 -25
  16. data/templates/unit-tests/sass/zen-grid-item-base.scss +18 -13
  17. data/templates/unit-tests/sass/zen-grid-item.scss +56 -38
  18. data/templates/unit-tests/sass/zen-new-row.scss +26 -0
  19. data/templates/unit-tests/test-results/function-zen-direction-switch.css +16 -0
  20. data/templates/unit-tests/test-results/function-zen-grid-item-width.css +7 -3
  21. data/templates/unit-tests/test-results/function-zen-half-gutter.css +4 -4
  22. data/templates/unit-tests/test-results/function-zen-unit-width.css +6 -2
  23. data/templates/unit-tests/test-results/zen-float.css +3 -3
  24. data/templates/unit-tests/test-results/zen-grid-background.css +23 -17
  25. data/templates/unit-tests/test-results/zen-grid-container.css +13 -2
  26. data/templates/unit-tests/test-results/zen-grid-flow-item.css +8 -8
  27. data/templates/unit-tests/test-results/zen-grid-item-base.css +9 -3
  28. data/templates/unit-tests/test-results/zen-grid-item.css +13 -3
  29. data/templates/unit-tests/test-results/zen-new-row.css +16 -0
  30. data/zen-grids.gemspec +8 -7
  31. data/zen-grids/_background.scss +83 -39
  32. data/zen-grids/_flow.scss +73 -46
  33. data/zen-grids/_grids.scss +137 -82
  34. metadata +13 -29
  35. data/component.json +0 -26
  36. data/templates/unit-tests/sass/function-zen-direction-flip.scss +0 -23
  37. data/templates/unit-tests/sass/zen-clear.scss +0 -26
  38. data/templates/unit-tests/test-results/function-zen-direction-flip.css +0 -16
  39. data/templates/unit-tests/test-results/zen-clear.css +0 -16
@@ -1,16 +1,19 @@
1
1
  //
2
- // Mixins for the Zen Grids system.
2
+ // Main module for the Zen Grids system.
3
3
  //
4
4
 
5
5
 
6
- // Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-column-count
7
- $zen-column-count : 1 !default;
6
+ // Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-columns
7
+ $zen-columns : 1 !default;
8
8
 
9
- // Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutter-width
10
- $zen-gutter-width : 20px !default;
9
+ // Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutters
10
+ $zen-gutters : 20px !default;
11
11
 
12
- // @see http://zengrids.com/help/#zen-auto-include-item-base
13
- $zen-auto-include-item-base : true !default;
12
+ // Specify the gutter method. Can be padding or margin.
13
+ $zen-gutter-method : padding !default;
14
+
15
+ // @see http://zengrids.com/help/#zen-auto-include-grid-item-base
16
+ $zen-auto-include-grid-item-base : true !default;
14
17
 
15
18
  // Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width
16
19
  $zen-grid-width : 100% !default;
@@ -25,11 +28,11 @@ $zen-box-sizing : border-box !default;
25
28
  $legacy-support-for-ie7 : false !default;
26
29
  $legacy-support-for-ie6 : false !default;
27
30
 
28
- // Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-float-direction
29
- $zen-float-direction : left !default;
31
+ // Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-direction
32
+ $zen-direction : left !default;
30
33
 
31
- // Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-reverse-all-floats
32
- $zen-reverse-all-floats : false !default;
34
+ // Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-switch-direction
35
+ $zen-switch-direction : false !default;
33
36
 
34
37
 
35
38
  //
@@ -37,9 +40,10 @@ $zen-reverse-all-floats : false !default;
37
40
  // @see http://zengrids.com/help/#zen-grid-container
38
41
  //
39
42
  @mixin zen-grid-container(
40
- $context : 'none',
41
- $gutter-width : $zen-gutter-width,
42
- $float-direction : $zen-float-direction
43
+ $context : none,
44
+ $gutters : $zen-gutters,
45
+ $gutter-method : $zen-gutter-method,
46
+ $direction : $zen-direction
43
47
  ) {
44
48
 
45
49
  // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
@@ -61,15 +65,15 @@ $zen-reverse-all-floats : false !default;
61
65
  }
62
66
 
63
67
  // Un-do the gutter padding of the parent grid item.
64
- @if $context == 'flow' {
68
+ @if $context == flow and $gutter-method == padding {
65
69
  margin: {
66
- left: -(zen-half-gutter($gutter-width, left, $float-direction));
67
- right: -(zen-half-gutter($gutter-width, right, $float-direction));
70
+ left: -(zen-half-gutter($gutters, left, $direction));
71
+ right: -(zen-half-gutter($gutters, right, $direction));
68
72
  }
69
73
  }
70
74
 
71
75
  // Prevent any padding from messing up the alignment of the nested grid.
72
- @if $context == 'grid-item' or $context == 'flow' {
76
+ @if $context == grid-item or $context == flow {
73
77
  padding: {
74
78
  left: 0;
75
79
  right: 0;
@@ -83,32 +87,39 @@ $zen-reverse-all-floats : false !default;
83
87
  @mixin zen-grid-item(
84
88
  $column-span,
85
89
  $column-position,
86
- $float-direction : $zen-float-direction,
87
- $column-count : $zen-column-count,
88
- $gutter-width : $zen-gutter-width,
89
- $grid-width : $zen-grid-width,
90
- $box-sizing : $zen-box-sizing,
91
- $reverse-all-floats : $zen-reverse-all-floats,
92
- $auto-include-item-base : $zen-auto-include-item-base
90
+ $direction : $zen-direction,
91
+ $columns : $zen-columns,
92
+ $gutters : $zen-gutters,
93
+ $gutter-method : $zen-gutter-method,
94
+ $grid-width : $zen-grid-width,
95
+ $box-sizing : $zen-box-sizing,
96
+ $switch-direction : $zen-switch-direction,
97
+ $auto-include-grid-item-base : $zen-auto-include-grid-item-base
93
98
  ) {
94
99
 
95
100
  // Calculate the unit width.
96
- $unit-width: zen-unit-width($column-count, $grid-width);
101
+ $unit-width: zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
97
102
 
98
103
  // Calculate the item's width.
99
- $width: zen-grid-item-width($column-span, $column-count, $gutter-width, $grid-width, $box-sizing);
104
+ $width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
105
+
106
+ // Calculate the margin from the container's edge.
107
+ $margin: ($column-position - 1) * $unit-width;
108
+ @if $gutter-method == margin {
109
+ $margin: $margin + (floor($column-position) - 1) * $gutters;
110
+ }
100
111
 
101
112
  // Determine the float direction and its reverse.
102
- $dir: $float-direction;
103
- @if $reverse-all-floats {
104
- $dir: zen-direction-flip($dir);
113
+ $dir: $direction;
114
+ @if $switch-direction {
115
+ $dir: zen-direction-switch($dir);
105
116
  }
106
- $rev: zen-direction-flip($dir);
117
+ $rev: zen-direction-switch($dir);
107
118
 
108
119
  float: $dir;
109
120
  width: $width;
110
121
  margin: {
111
- #{$dir}: ($column-position - 1) * $unit-width;
122
+ #{$dir}: $margin;
112
123
  #{$rev}: -100%;
113
124
  }
114
125
  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
@@ -116,8 +127,8 @@ $zen-reverse-all-floats : false !default;
116
127
  }
117
128
 
118
129
  // Auto-apply the unit base mixin.
119
- @if $auto-include-item-base {
120
- @include zen-grid-item-base($gutter-width, $box-sizing);
130
+ @if $auto-include-grid-item-base {
131
+ @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
121
132
  }
122
133
  }
123
134
 
@@ -126,20 +137,23 @@ $zen-reverse-all-floats : false !default;
126
137
  // @see http://zengrids.com/help/#zen-grid-item-base
127
138
  //
128
139
  @mixin zen-grid-item-base(
129
- $gutter-width : $zen-gutter-width,
140
+ $gutters : $zen-gutters,
141
+ $gutter-method : $zen-gutter-method,
130
142
  $box-sizing : $zen-box-sizing,
131
- $flow-direction : $zen-float-direction,
132
- $reverse-all-flows : $zen-reverse-all-floats
143
+ $direction : $zen-direction,
144
+ $switch-direction : $zen-switch-direction
133
145
  ) {
134
146
 
135
- $dir: $flow-direction;
136
- @if $reverse-all-flows {
137
- $dir: zen-direction-flip($dir);
147
+ $dir: $direction;
148
+ @if $switch-direction {
149
+ $dir: zen-direction-switch($dir);
138
150
  }
139
151
 
140
- padding: {
141
- left: zen-half-gutter($gutter-width, left, $dir);
142
- right: zen-half-gutter($gutter-width, right, $dir);
152
+ @if $gutter-method == padding {
153
+ padding: {
154
+ left: zen-half-gutter($gutters, left, $dir);
155
+ right: zen-half-gutter($gutters, right, $dir);
156
+ }
143
157
  }
144
158
  // Specify the border-box properties.
145
159
  @if $box-sizing == border-box {
@@ -154,41 +168,49 @@ $zen-reverse-all-floats : false !default;
154
168
  left: 0 !important;
155
169
  right: 0 !important;
156
170
  }
171
+ @if $gutter-method == margin {
172
+ padding: {
173
+ left: 0 !important;
174
+ right: 0 !important;
175
+ }
176
+ }
157
177
  }
158
178
  // Prevent overflowing content from being hidden beneath other grid items.
159
- word-wrap: break-word; // A very nice CSS3 property.
179
+ word-wrap: break-word;
160
180
 
161
181
  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
162
182
  @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
163
- @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
183
+ @warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
164
184
  }
165
185
  @if $box-sizing-polyfill-path != "" {
166
186
  *behavior: url($box-sizing-polyfill-path);
167
187
  }
168
188
  @if $legacy-support-for-ie6 {
169
- _display: inline; // Display inline or double your floated margin! [1]
170
- _overflow: hidden; // Prevent overflowing content from breaking the layout.
171
- _overflow-y: visible; // In IE6, overflow visible is broken [2]
172
- // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
173
- // 2. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
189
+ // Display inline or double your floated margin!
190
+ // @see http://www.positioniseverything.net/explorer/doubled-margin.html
191
+ _display: inline;
192
+ // Prevent overflowing content from breaking the layout.
193
+ _overflow: hidden;
194
+ // In IE6, overflow visible is broken.
195
+ // @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
196
+ _overflow-y: visible;
174
197
  }
175
198
  }
176
199
  }
177
200
 
178
201
  //
179
- // Apply this to grid items that need to be cleared below other grid items.
180
- // @see http://zengrids.com/help/#zen-clear
202
+ // Apply this to a grid item so that it starts a new row.
203
+ // @see http://zengrids.com/help/#zen-new-row
181
204
  //
182
- @mixin zen-clear(
183
- $float-direction : $zen-float-direction,
184
- $reverse-all-floats : $zen-reverse-all-floats
205
+ @mixin zen-new-row(
206
+ $clear : $zen-direction,
207
+ $switch-direction : $zen-switch-direction
185
208
  ) {
186
- // Determine the float direction.
187
- $dir: $float-direction;
188
- @if $reverse-all-floats {
189
- $dir: zen-direction-flip($dir);
209
+ // Determine the clearing direction.
210
+ @if $switch-direction {
211
+ $clear: zen-direction-switch($clear);
190
212
  }
191
- clear: $dir;
213
+ clear: $clear;
192
214
  }
193
215
 
194
216
 
@@ -198,14 +220,14 @@ $zen-reverse-all-floats : false !default;
198
220
 
199
221
  // Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter
200
222
  @function zen-half-gutter(
201
- $gutter-width : $zen-gutter-width,
202
- $gutter-side : $zen-float-direction,
203
- $flow-direction : $zen-float-direction
223
+ $gutters : $zen-gutters,
224
+ $gutter-side : $zen-direction,
225
+ $direction : $zen-direction
204
226
  ) {
205
- $half-gutter: $gutter-width / 2;
227
+ $half-gutter: $gutters / 2;
206
228
  // Special handling in case gutter has an odd number of pixels.
207
- @if unit($gutter-width) == "px" {
208
- @if $gutter-side == $flow-direction {
229
+ @if unit($gutters) == "px" {
230
+ @if $gutter-side == $direction {
209
231
  @return floor($half-gutter);
210
232
  }
211
233
  @else {
@@ -215,14 +237,44 @@ $zen-reverse-all-floats : false !default;
215
237
  @return $half-gutter;
216
238
  }
217
239
 
240
+ // Warns if the gutter and grid width units are not comparable.
241
+ @function zen-compare-units(
242
+ $feature,
243
+ $gutters : $zen-gutters,
244
+ $grid-width : $zen-grid-width
245
+ ) {
246
+ @if not comparable($gutters, $grid-width) {
247
+ $units-gutter: unit($gutters);
248
+ $units-grid: unit($grid-width);
249
+ @warn "The layout cannot be calculated correctly; when using #{$feature}, the units of the gutter (#{$units-gutter} must match the units of the grid width (#{$units-grid}).";
250
+ @return false;
251
+ }
252
+ @return true;
253
+ }
254
+
218
255
  // Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width
219
256
  @function zen-unit-width(
220
- $column-count : $zen-column-count,
257
+ $columns : $zen-columns,
258
+ $gutters : $zen-gutters,
259
+ $gutter-method : $zen-gutter-method,
221
260
  $grid-width : $zen-grid-width
222
261
  ) {
223
- $unit-width: $grid-width / $column-count;
262
+ $unit-width: 0;
263
+ @if $gutter-method == margin {
264
+ $test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
265
+ $unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
266
+ }
267
+ @else {
268
+ $unit-width: $grid-width / $columns;
269
+ }
224
270
  @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
225
- @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
271
+ @if $gutter-method == margin {
272
+ $num_gutters: $columns - 1;
273
+ @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns with #{$num_gutters} of #{$gutters} gutters.";
274
+ }
275
+ @else {
276
+ @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
277
+ }
226
278
  }
227
279
  @return $unit-width;
228
280
  }
@@ -231,26 +283,29 @@ $zen-reverse-all-floats : false !default;
231
283
  // @see http://zengrids.com/help/#zen-grid-item-width
232
284
  @function zen-grid-item-width(
233
285
  $column-span,
234
- $column-count : $zen-column-count,
235
- $gutter-width : $zen-gutter-width,
286
+ $columns : $zen-columns,
287
+ $gutters : $zen-gutters,
288
+ $gutter-method : $zen-gutter-method,
236
289
  $grid-width : $zen-grid-width,
237
290
  $box-sizing : $zen-box-sizing
238
291
  ) {
239
- $width: $column-span * zen-unit-width($column-count, $grid-width);
240
- @if $box-sizing == content-box {
241
- @if not comparable($width, $gutter-width) {
242
- $units-gutter: unit($gutter-width);
243
- $units-grid: unit($grid-width);
244
- @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
245
- }
246
- $width: $width - $gutter-width;
292
+ $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
293
+
294
+ // Add the margin gutters internal to the spanning grid item.
295
+ @if $gutter-method == margin {
296
+ $width: $width + (floor($column-span) - 1) * $gutters;
297
+ }
298
+ // For the original box model, remove the padding from the width.
299
+ @elseif $box-sizing == content-box {
300
+ $test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
301
+ $width: $width - $gutters;
247
302
  }
248
303
  @return $width;
249
304
  }
250
305
 
251
306
  // Returns the opposite direction, given "left" or "right".
252
- // @see http://zengrids.com/help/#zen-direction-flip
253
- @function zen-direction-flip(
307
+ // @see http://zengrids.com/help/#zen-direction-switch
308
+ @function zen-direction-switch(
254
309
  $dir
255
310
  ) {
256
311
  @if $dir == left {
@@ -262,6 +317,6 @@ $zen-reverse-all-floats : false !default;
262
317
  @else if $dir == none or $dir == both {
263
318
  @return $dir;
264
319
  }
265
- @warn "Invalid direction passed to zen-direction-flip().";
320
+ @warn "Invalid direction passed to zen-direction-switch().";
266
321
  @return both;
267
322
  }
metadata CHANGED
@@ -1,14 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: zen-grids
3
3
  version: !ruby/object:Gem::Version
4
- prerelease: true
5
- segments:
6
- - 2
7
- - 0
8
- - 0
9
- - alpha
10
- - 2
11
- version: 2.0.0.alpha.2
4
+ version: 2.0.0.beta.1
12
5
  platform: ruby
13
6
  authors:
14
7
  - John Albin Wilkins
@@ -16,8 +9,7 @@ autorequire:
16
9
  bindir: bin
17
10
  cert_chain: []
18
11
 
19
- date: 2013-02-25 00:00:00 +08:00
20
- default_executable:
12
+ date: 2013-07-22 00:00:00 Z
21
13
  dependencies:
22
14
  - !ruby/object:Gem::Dependency
23
15
  name: sass
@@ -26,9 +18,6 @@ dependencies:
26
18
  requirements:
27
19
  - - ">="
28
20
  - !ruby/object:Gem::Version
29
- segments:
30
- - 3
31
- - 2
32
21
  version: "3.2"
33
22
  type: :runtime
34
23
  version_requirements: *id001
@@ -41,7 +30,7 @@ extensions: []
41
30
  extra_rdoc_files: []
42
31
 
43
32
  files:
44
- - component.json
33
+ - bower.json
45
34
  - LICENSE.txt
46
35
  - README.txt
47
36
  - lib/zen-grids.rb
@@ -58,22 +47,22 @@ files:
58
47
  - templates/project/styles.scss
59
48
  - templates/unit-tests/manifest.rb
60
49
  - templates/unit-tests/README.txt
61
- - templates/unit-tests/sass/function-zen-direction-flip.scss
50
+ - templates/unit-tests/sass/function-zen-direction-switch.scss
62
51
  - templates/unit-tests/sass/function-zen-grid-item-width.scss
63
52
  - templates/unit-tests/sass/function-zen-half-gutter.scss
64
53
  - templates/unit-tests/sass/function-zen-unit-width.scss
65
- - templates/unit-tests/sass/zen-clear.scss
54
+ - templates/unit-tests/sass/zen-new-row.scss
66
55
  - templates/unit-tests/sass/zen-float.scss
67
56
  - templates/unit-tests/sass/zen-grid-background.scss
68
57
  - templates/unit-tests/sass/zen-grid-container.scss
69
58
  - templates/unit-tests/sass/zen-grid-flow-item.scss
70
59
  - templates/unit-tests/sass/zen-grid-item-base.scss
71
60
  - templates/unit-tests/sass/zen-grid-item.scss
72
- - templates/unit-tests/test-results/function-zen-direction-flip.css
61
+ - templates/unit-tests/test-results/function-zen-direction-switch.css
73
62
  - templates/unit-tests/test-results/function-zen-grid-item-width.css
74
63
  - templates/unit-tests/test-results/function-zen-half-gutter.css
75
64
  - templates/unit-tests/test-results/function-zen-unit-width.css
76
- - templates/unit-tests/test-results/zen-clear.css
65
+ - templates/unit-tests/test-results/zen-new-row.css
77
66
  - templates/unit-tests/test-results/zen-float.css
78
67
  - templates/unit-tests/test-results/zen-grid-background.css
79
68
  - templates/unit-tests/test-results/zen-grid-container.css
@@ -81,9 +70,10 @@ files:
81
70
  - templates/unit-tests/test-results/zen-grid-item-base.css
82
71
  - templates/unit-tests/test-results/zen-grid-item.css
83
72
  - zen-grids.gemspec
84
- has_rdoc: true
85
73
  homepage: http://zengrids.com
86
- licenses: []
74
+ licenses:
75
+ - GPL-2
76
+ metadata: {}
87
77
 
88
78
  post_install_message:
89
79
  rdoc_options: []
@@ -94,24 +84,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
94
84
  requirements:
95
85
  - - ">="
96
86
  - !ruby/object:Gem::Version
97
- segments:
98
- - 0
99
87
  version: "0"
100
88
  required_rubygems_version: !ruby/object:Gem::Requirement
101
89
  requirements:
102
90
  - - ">"
103
91
  - !ruby/object:Gem::Version
104
- segments:
105
- - 1
106
- - 3
107
- - 1
108
92
  version: 1.3.1
109
93
  requirements: []
110
94
 
111
- rubyforge_project: 2.0.0.alpha.2
112
- rubygems_version: 1.3.6
95
+ rubyforge_project: 2.0.0.beta.1
96
+ rubygems_version: 2.0.3
113
97
  signing_key:
114
- specification_version: 3
98
+ specification_version: 4
115
99
  summary: A Compass plugin for Zen Grids, a fluid responsive grid system
116
100
  test_files: []
117
101