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

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 (62) hide show
  1. checksums.yaml +7 -7
  2. data/.travis.yml +13 -0
  3. data/README.md +81 -0
  4. data/bower.json +14 -12
  5. data/sache.json +5 -0
  6. data/templates/project/_base-elements.scss +22 -0
  7. data/templates/project/_components.scss +73 -0
  8. data/templates/project/_init.scss +14 -4
  9. data/templates/project/_layouts.scss +143 -0
  10. data/templates/project/_visually-hidden.scss +2 -18
  11. data/templates/project/example.html +53 -24
  12. data/templates/project/manifest.rb +3 -2
  13. data/templates/project/styles.scss +3 -2
  14. data/tests/Gemfile +11 -0
  15. data/tests/README.md +16 -0
  16. data/tests/Rakefile +25 -0
  17. data/tests/config.rb +22 -0
  18. data/tests/controls/compass-compatibility.css +112 -0
  19. data/{templates/unit-tests/test-results → tests/controls}/function-zen-direction-switch.css +1 -1
  20. data/{templates/unit-tests/test-results → tests/controls}/function-zen-grid-item-width.css +0 -0
  21. data/{templates/unit-tests/test-results → tests/controls}/function-zen-half-gutter.css +0 -0
  22. data/{templates/unit-tests/test-results → tests/controls}/function-zen-unit-width.css +0 -0
  23. data/{templates/unit-tests/test-results → tests/controls}/zen-float.css +0 -0
  24. data/{templates/unit-tests/test-results/zen-grid-flow-item.css → tests/controls/zen-flow-item-width.css} +21 -55
  25. data/tests/controls/zen-grid-background.css +52 -0
  26. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-container.css +20 -5
  27. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item-base.css +9 -12
  28. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item.css +14 -2
  29. data/{templates/unit-tests/test-results → tests/controls}/zen-new-row.css +0 -0
  30. data/tests/tests/compass-compatibility.scss +55 -0
  31. data/{templates/unit-tests/sass → tests/tests}/function-zen-direction-switch.scss +1 -0
  32. data/{templates/unit-tests/sass → tests/tests}/function-zen-grid-item-width.scss +6 -6
  33. data/{templates/unit-tests/sass → tests/tests}/function-zen-half-gutter.scss +2 -2
  34. data/{templates/unit-tests/sass → tests/tests}/function-zen-unit-width.scss +12 -12
  35. data/{templates/unit-tests/sass → tests/tests}/zen-float.scss +3 -3
  36. data/tests/tests/zen-flow-item-width.scss +85 -0
  37. data/tests/tests/zen-grid-background.scss +85 -0
  38. data/tests/tests/zen-grid-container.scss +49 -0
  39. data/tests/tests/zen-grid-item-base.scss +65 -0
  40. data/tests/tests/zen-grid-item.scss +101 -0
  41. data/{templates/unit-tests/sass → tests/tests}/zen-new-row.scss +3 -3
  42. data/tests/unit_tests.rb +57 -0
  43. data/zen-grids.gemspec +4 -45
  44. data/zen-grids/_background.scss +97 -157
  45. data/zen-grids/_flow.scss +39 -22
  46. data/zen-grids/_functions.scss +119 -0
  47. data/zen-grids/_grids.scss +71 -171
  48. data/zen-grids/_variables.scss +65 -0
  49. data/zen-grids/internal/_functions-compass-polyfill.scss +70 -0
  50. data/zen-grids/internal/_variables-background.scss +57 -0
  51. metadata +80 -69
  52. data/README.txt +0 -88
  53. data/templates/project/_layout.scss +0 -117
  54. data/templates/project/_modules.scss +0 -78
  55. data/templates/unit-tests/README.txt +0 -16
  56. data/templates/unit-tests/manifest.rb +0 -37
  57. data/templates/unit-tests/sass/zen-grid-background.scss +0 -80
  58. data/templates/unit-tests/sass/zen-grid-container.scss +0 -44
  59. data/templates/unit-tests/sass/zen-grid-flow-item.scss +0 -78
  60. data/templates/unit-tests/sass/zen-grid-item-base.scss +0 -59
  61. data/templates/unit-tests/sass/zen-grid-item.scss +0 -91
  62. data/templates/unit-tests/test-results/zen-grid-background.css +0 -60
data/zen-grids/_flow.scss CHANGED
@@ -3,29 +3,26 @@
3
3
  //
4
4
 
5
5
 
6
- @import "grids";
7
-
8
- // @see http://zengrids.com/help/#zen-auto-include-grid-item-base
9
- $zen-auto-include-flow-item-base : true !default;
6
+ @import "zen-grids/grids";
10
7
 
11
8
 
12
9
  //
13
10
  // Apply this to an HTML item that is in the normal flow of a document to help
14
- // align it to the grid. @see http://zengrids.com/help/#zen-float
11
+ // align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
15
12
  //
16
- @mixin zen-grid-flow-item(
13
+ @mixin zen-flow-item-width(
17
14
  $column-span,
18
- $parent-column-span : false,
19
- $alpha-gutter : false,
20
- $omega-gutter : true,
21
- $direction : $zen-direction,
22
- $columns : $zen-columns,
23
- $gutters : $zen-gutters,
24
- $gutter-method : $zen-gutter-method,
25
- $grid-width : $zen-grid-width,
26
- $box-sizing : $zen-box-sizing,
27
- $switch-direction : $zen-switch-direction,
28
- $auto-include-flow-item-base : $zen-auto-include-flow-item-base
15
+ $parent-column-span : false,
16
+ $alpha-gutter : false,
17
+ $omega-gutter : true,
18
+ $direction : $zen-direction,
19
+ $columns : $zen-columns,
20
+ $gutters : $zen-gutters,
21
+ $gutter-method : $zen-gutter-method,
22
+ $grid-width : $zen-grid-width,
23
+ $box-sizing : $zen-box-sizing,
24
+ $switch-direction : $zen-switch-direction,
25
+ $include-base : $zen-auto-include-flow-item-base
29
26
  ) {
30
27
 
31
28
  // Save the columns and gutters from the parent context.
@@ -64,14 +61,14 @@ $zen-auto-include-flow-item-base : true !default;
64
61
  $gutters: $main-gutters * ($grid-width / $parent-width);
65
62
  }
66
63
 
67
- // Auto-apply the unit base mixin.
68
- @if $auto-include-flow-item-base {
69
- @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
64
+ // Include the flow item base mixin.
65
+ @if $include-base {
66
+ @include zen-flow-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
70
67
  }
71
68
 
72
69
  // Calculate the item's width.
73
70
  $width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
74
- @if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and $box-sizing == border-box {
71
+ @if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and ($box-sizing == border-box or $box-sizing == universal-border-box) {
75
72
  $width: $width - $gutters;
76
73
  }
77
74
  width: $width;
@@ -130,9 +127,29 @@ $zen-auto-include-flow-item-base : true !default;
130
127
  }
131
128
  }
132
129
 
130
+ //
131
+ // Applies a standard set of properites to all flow items.
132
+ // @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
133
+ //
134
+ @mixin zen-flow-item-base(
135
+ $gutters : $zen-gutters,
136
+ $gutter-method : $zen-gutter-method,
137
+ $box-sizing : $zen-box-sizing,
138
+ $direction : $zen-direction,
139
+ $switch-direction : $zen-switch-direction
140
+ ) {
141
+
142
+ // Since we have to set padding in zen-flow-item-width(), supress extraneous
143
+ // padding declarations in the base by setting $gutter-method to none.
144
+ @if $gutter-method == padding {
145
+ $gutter-method: none;
146
+ }
147
+ @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
148
+ }
149
+
133
150
  //
134
151
  // Apply this to flow items that need to be floated.
135
- // @see http://zengrids.com/help/#zen-float
152
+ // @see http://next.zengrids.com/reference/flow/#zen-float
136
153
  //
137
154
  @mixin zen-float(
138
155
  $direction : $zen-direction,
@@ -0,0 +1,119 @@
1
+ //
2
+ // Helper functions for the Zen Grids system.
3
+ //
4
+
5
+
6
+ @import "zen-grids/variables";
7
+
8
+
9
+ //
10
+ // Returns a half gutter width. @see http://next.zengrids.com/reference/functions/#zen-half-gutter
11
+ //
12
+ @function zen-half-gutter(
13
+ $gutters : $zen-gutters,
14
+ $gutter-side : $zen-direction,
15
+ $direction : $zen-direction
16
+ ) {
17
+ $half-gutter: $gutters / 2;
18
+ // Special handling in case gutter has an odd number of pixels.
19
+ @if unit($gutters) == "px" {
20
+ @if $gutter-side == $direction {
21
+ @return floor($half-gutter);
22
+ }
23
+ @else {
24
+ @return ceil($half-gutter);
25
+ }
26
+ }
27
+ @return $half-gutter;
28
+ }
29
+
30
+ //
31
+ // Warns if the gutter and grid width units are not comparable.
32
+ //
33
+ @function zen-compare-units(
34
+ $feature,
35
+ $gutters : $zen-gutters,
36
+ $grid-width : $zen-grid-width
37
+ ) {
38
+ @if not comparable($gutters, $grid-width) {
39
+ $units-gutter: unit($gutters);
40
+ $units-grid: unit($grid-width);
41
+ @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}).";
42
+ @return false;
43
+ }
44
+ @return true;
45
+ }
46
+
47
+ //
48
+ // Calculates the unit width of a column. @see http://next.zengrids.com/reference/functions/#zen-unit-width
49
+ //
50
+ @function zen-unit-width(
51
+ $columns : $zen-columns,
52
+ $gutters : $zen-gutters,
53
+ $gutter-method : $zen-gutter-method,
54
+ $grid-width : $zen-grid-width
55
+ ) {
56
+ $unit-width: 0;
57
+ @if $gutter-method == margin {
58
+ $test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
59
+ $unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
60
+ }
61
+ @else {
62
+ $unit-width: $grid-width / $columns;
63
+ }
64
+ @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
65
+ @if $gutter-method == margin {
66
+ $num_gutters: $columns - 1;
67
+ @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.";
68
+ }
69
+ @else {
70
+ @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
71
+ }
72
+ }
73
+ @return $unit-width;
74
+ }
75
+
76
+ //
77
+ // Calculates the width of a grid item that spans the specified number of columns.
78
+ // @see http://next.zengrids.com/reference/functions/#zen-grid-item-width
79
+ //
80
+ @function zen-grid-item-width(
81
+ $column-span,
82
+ $columns : $zen-columns,
83
+ $gutters : $zen-gutters,
84
+ $gutter-method : $zen-gutter-method,
85
+ $grid-width : $zen-grid-width,
86
+ $box-sizing : $zen-box-sizing
87
+ ) {
88
+ $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
89
+
90
+ // Add the margin gutters internal to the spanning grid item.
91
+ @if $gutter-method == margin {
92
+ $width: $width + (floor($column-span) - 1) * $gutters;
93
+ }
94
+ // For the original box model, remove the padding from the width.
95
+ @elseif $box-sizing == content-box {
96
+ $test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
97
+ $width: $width - $gutters;
98
+ }
99
+ @return $width;
100
+ }
101
+
102
+ //
103
+ // Returns the opposite direction, given "left" or "right".
104
+ // @see http://next.zengrids.com/reference/functions/#zen-direction-switch
105
+ //
106
+ @function zen-direction-switch(
107
+ $dir
108
+ ) {
109
+ @if $dir == left {
110
+ @return right;
111
+ }
112
+ @else if $dir == right {
113
+ @return left;
114
+ }
115
+ @else if $dir != none and $dir != both {
116
+ @warn "Invalid direction passed to zen-direction-switch().";
117
+ }
118
+ @return $dir;
119
+ }
@@ -3,51 +3,39 @@
3
3
  //
4
4
 
5
5
 
6
- // Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-columns
7
- $zen-columns : 1 !default;
8
-
9
- // Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutters
10
- $zen-gutters : 20px !default;
11
-
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;
17
-
18
- // Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width
19
- $zen-grid-width : 100% !default;
20
-
21
- // The box-sizing polyfill for IE6/7 requires an absolute path. @see http://zengrids.com/help/#box-sizing-polyfill-path
22
- $box-sizing-polyfill-path : "" !default;
23
-
24
- // Specify the CSS3 box-sizing method. @see http://zengrids.com/help/#zen-box-sizing
25
- $zen-box-sizing : border-box !default;
26
-
27
- // @see http://zengrids.com/help/#legacy-support-for-ie7
28
- $legacy-support-for-ie7 : false !default;
29
- $legacy-support-for-ie6 : false !default;
30
-
31
- // Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-direction
32
- $zen-direction : left !default;
33
-
34
- // Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-switch-direction
35
- $zen-switch-direction : false !default;
6
+ @import "zen-grids/variables"; // Import the global variables needed by all of Zen Grids.
7
+ @import "zen-grids/functions"; // Import the helper functions.
8
+ @import "zen-grids/internal/functions-compass-polyfill";
36
9
 
37
10
 
38
11
  //
39
12
  // Apply this to create a grid container element.
40
- // @see http://zengrids.com/help/#zen-grid-container
13
+ // @see http://next.zengrids.com/reference/grids/#zen-grid-container
41
14
  //
42
15
  @mixin zen-grid-container(
43
- $context : none,
44
- $gutters : $zen-gutters,
45
- $gutter-method : $zen-gutter-method,
46
- $direction : $zen-direction
16
+ $context : none,
17
+ $gutters : $zen-gutters,
18
+ $gutter-method : $zen-gutter-method,
19
+ $direction : $zen-direction,
20
+ $switch-direction : $zen-switch-direction
47
21
  ) {
48
22
 
23
+ $dir: $direction;
24
+ @if $switch-direction {
25
+ $dir: zen-direction-switch($dir);
26
+ }
27
+
28
+ @if $context == flow-item {
29
+ @warn "zen-grid-container()'s $context cannot be set to: flow-item. It has been set to: flow.";
30
+ $context: flow;
31
+ }
32
+ @else if $context == grid {
33
+ @warn "zen-grid-container()'s $context cannot be set to: grid. It has been set to: grid-item.";
34
+ $context: grid-item;
35
+ }
36
+
49
37
  // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
50
- @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
38
+ @if zen-support-for(ie, "7") {
51
39
  *position: relative;
52
40
  }
53
41
 
@@ -60,15 +48,15 @@ $zen-switch-direction : false !default;
60
48
  &:after {
61
49
  clear: both;
62
50
  }
63
- @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
51
+ @if zen-support-for(ie, "7") {
64
52
  *zoom: 1;
65
53
  }
66
54
 
67
55
  // Un-do the gutter padding of the parent grid item.
68
56
  @if $context == flow and $gutter-method == padding {
69
57
  margin: {
70
- left: -(zen-half-gutter($gutters, left, $direction));
71
- right: -(zen-half-gutter($gutters, right, $direction));
58
+ left: -(zen-half-gutter($gutters, left, $dir));
59
+ right: -(zen-half-gutter($gutters, right, $dir));
72
60
  }
73
61
  }
74
62
 
@@ -82,19 +70,19 @@ $zen-switch-direction : false !default;
82
70
  }
83
71
 
84
72
  //
85
- // Apply this to each grid item. @see http://zengrids.com/help/#zen-grid-item
73
+ // Apply this to each grid item. @see http://next.zengrids.com/reference/grids/#zen-grid-item
86
74
  //
87
75
  @mixin zen-grid-item(
88
76
  $column-span,
89
77
  $column-position,
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
78
+ $direction : $zen-direction,
79
+ $columns : $zen-columns,
80
+ $gutters : $zen-gutters,
81
+ $gutter-method : $zen-gutter-method,
82
+ $grid-width : $zen-grid-width,
83
+ $box-sizing : $zen-box-sizing,
84
+ $switch-direction : $zen-switch-direction,
85
+ $include-base : $zen-auto-include-grid-item-base
98
86
  ) {
99
87
 
100
88
  // Calculate the unit width.
@@ -122,39 +110,38 @@ $zen-switch-direction : false !default;
122
110
  #{$dir}: $margin;
123
111
  #{$rev}: -100%;
124
112
  }
125
- @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
113
+ @if zen-support-for(ie, "7") {
126
114
  *margin-#{$rev}: -99.9%;
127
115
  }
128
116
 
129
- // Auto-apply the unit base mixin.
130
- @if $auto-include-grid-item-base {
117
+ // Include the grid item base mixin.
118
+ @if $include-base {
131
119
  @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
132
120
  }
121
+ // If the $gutters parameter has been used, set the gutters even if
122
+ // $include-base is false.
123
+ @else if $gutters != $zen-gutters and $gutter-method == padding {
124
+ @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
125
+ }
133
126
  }
134
127
 
135
128
  //
136
129
  // Applies a standard set of properites to all grid items in the layout.
137
- // @see http://zengrids.com/help/#zen-grid-item-base
130
+ // @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
138
131
  //
139
132
  @mixin zen-grid-item-base(
140
- $gutters : $zen-gutters,
141
- $gutter-method : $zen-gutter-method,
142
- $box-sizing : $zen-box-sizing,
143
- $direction : $zen-direction,
144
- $switch-direction : $zen-switch-direction
133
+ $gutters : $zen-gutters,
134
+ $gutter-method : $zen-gutter-method,
135
+ $box-sizing : $zen-box-sizing,
136
+ $direction : $zen-direction,
137
+ $switch-direction : $zen-switch-direction
145
138
  ) {
146
139
 
147
- $dir: $direction;
148
- @if $switch-direction {
149
- $dir: zen-direction-switch($dir);
150
- }
151
-
140
+ // Specify the padding if the gutter method uses padding.
152
141
  @if $gutter-method == padding {
153
- padding: {
154
- left: zen-half-gutter($gutters, left, $dir);
155
- right: zen-half-gutter($gutters, right, $dir);
156
- }
142
+ @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
157
143
  }
144
+
158
145
  // Specify the border-box properties.
159
146
  @if $box-sizing == border-box {
160
147
  -moz-box-sizing: border-box;
@@ -163,7 +150,7 @@ $zen-switch-direction : false !default;
163
150
  box-sizing: border-box;
164
151
  }
165
152
  // Prevent left/right borders since they'll break the layout with content-box.
166
- @if $box-sizing == content-box {
153
+ @elseif $box-sizing == content-box {
167
154
  border: {
168
155
  left: 0 !important;
169
156
  right: 0 !important;
@@ -175,17 +162,15 @@ $zen-switch-direction : false !default;
175
162
  }
176
163
  }
177
164
  }
178
- // Prevent overflowing content from being hidden beneath other grid items.
179
- word-wrap: break-word;
180
165
 
181
- @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
166
+ @if zen-support-for(ie, "7") {
182
167
  @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
183
168
  @warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
184
169
  }
185
170
  @if $box-sizing-polyfill-path != "" {
186
171
  *behavior: url($box-sizing-polyfill-path);
187
172
  }
188
- @if $legacy-support-for-ie6 {
173
+ @if zen-support-for(ie, "6") {
189
174
  // Display inline or double your floated margin!
190
175
  // @see http://www.positioniseverything.net/explorer/doubled-margin.html
191
176
  _display: inline;
@@ -195,12 +180,14 @@ $zen-switch-direction : false !default;
195
180
  // @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
196
181
  _overflow-y: visible;
197
182
  }
183
+ // Prevent overflowing content from being hidden beneath other grid items.
184
+ *word-wrap: break-word;
198
185
  }
199
186
  }
200
187
 
201
188
  //
202
189
  // Apply this to a grid item so that it starts a new row.
203
- // @see http://zengrids.com/help/#zen-new-row
190
+ // @see http://next.zengrids.com/reference/grids/#zen-new-row
204
191
  //
205
192
  @mixin zen-new-row(
206
193
  $clear : $zen-direction,
@@ -213,110 +200,23 @@ $zen-switch-direction : false !default;
213
200
  clear: $clear;
214
201
  }
215
202
 
216
-
217
203
  //
218
- // Helper functions for the Zen mixins.
204
+ // Applies the gutter to a grid item when using the padding gutter method.
205
+ // @see http://next.zengrids.com/reference/grids/#zen-apply-gutter-padding
219
206
  //
220
-
221
- // Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter
222
- @function zen-half-gutter(
223
- $gutters : $zen-gutters,
224
- $gutter-side : $zen-direction,
225
- $direction : $zen-direction
226
- ) {
227
- $half-gutter: $gutters / 2;
228
- // Special handling in case gutter has an odd number of pixels.
229
- @if unit($gutters) == "px" {
230
- @if $gutter-side == $direction {
231
- @return floor($half-gutter);
232
- }
233
- @else {
234
- @return ceil($half-gutter);
235
- }
236
- }
237
- @return $half-gutter;
238
- }
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
-
255
- // Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width
256
- @function zen-unit-width(
257
- $columns : $zen-columns,
258
- $gutters : $zen-gutters,
259
- $gutter-method : $zen-gutter-method,
260
- $grid-width : $zen-grid-width
261
- ) {
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
- }
270
- @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
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
- }
278
- }
279
- @return $unit-width;
280
- }
281
-
282
- // Calculates the width of a grid item that spans the specified number of columns.
283
- // @see http://zengrids.com/help/#zen-grid-item-width
284
- @function zen-grid-item-width(
285
- $column-span,
286
- $columns : $zen-columns,
287
- $gutters : $zen-gutters,
288
- $gutter-method : $zen-gutter-method,
289
- $grid-width : $zen-grid-width,
290
- $box-sizing : $zen-box-sizing
207
+ @mixin zen-apply-gutter-padding(
208
+ $gutters : $zen-gutters,
209
+ $direction : $zen-direction,
210
+ $switch-direction : $zen-switch-direction
291
211
  ) {
292
- $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
293
212
 
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;
213
+ $dir: $direction;
214
+ @if $switch-direction {
215
+ $dir: zen-direction-switch($dir);
302
216
  }
303
- @return $width;
304
- }
305
217
 
306
- // Returns the opposite direction, given "left" or "right".
307
- // @see http://zengrids.com/help/#zen-direction-switch
308
- @function zen-direction-switch(
309
- $dir
310
- ) {
311
- @if $dir == left {
312
- @return right;
313
- }
314
- @else if $dir == right {
315
- @return left;
316
- }
317
- @else if $dir == none or $dir == both {
318
- @return $dir;
218
+ padding: {
219
+ left: zen-half-gutter($gutters, left, $dir);
220
+ right: zen-half-gutter($gutters, right, $dir);
319
221
  }
320
- @warn "Invalid direction passed to zen-direction-switch().";
321
- @return both;
322
222
  }