1 | // |
---|
2 | // Main module for the Zen Grids system. |
---|
3 | // |
---|
4 | |
---|
5 | |
---|
6 | // Specify the number of columns in the grid. @see http://next.zengrids.com/reference/grids/#zen-columns |
---|
7 | $zen-columns : 1 !default; |
---|
8 | |
---|
9 | // Specify the width of the gutters (as padding). @see http://next.zengrids.com/reference/grids/#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://next.zengrids.com/reference/grids/#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://next.zengrids.com/reference/grids/#zen-grid-width |
---|
19 | $zen-grid-width : 100% !default; |
---|
20 | |
---|
21 | // The box-sizing polyfill for IE6/7 requires an absolute path. @see http://next.zengrids.com/reference/grids/#box-sizing-polyfill-path |
---|
22 | $box-sizing-polyfill-path : "" !default; |
---|
23 | |
---|
24 | // Specify the CSS3 box-sizing method. @see http://next.zengrids.com/reference/grids/#zen-box-sizing |
---|
25 | $zen-box-sizing : border-box !default; |
---|
26 | |
---|
27 | // @see http://next.zengrids.com/reference/grids/#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://next.zengrids.com/reference/grids/#zen-direction |
---|
32 | $zen-direction : left !default; |
---|
33 | |
---|
34 | // Reverse the floating direction in all zen's mixins. @see http://next.zengrids.com/reference/grids/#zen-switch-direction |
---|
35 | $zen-switch-direction : false !default; |
---|
36 | |
---|
37 | |
---|
38 | // |
---|
39 | // Apply this to create a grid container element. |
---|
40 | // @see http://next.zengrids.com/reference/grids/#zen-grid-container |
---|
41 | // |
---|
42 | @mixin zen-grid-container( |
---|
43 | $context : none, |
---|
44 | $gutters : $zen-gutters, |
---|
45 | $gutter-method : $zen-gutter-method, |
---|
46 | $direction : $zen-direction |
---|
47 | ) { |
---|
48 | |
---|
49 | // @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) { |
---|
51 | *position: relative; |
---|
52 | } |
---|
53 | |
---|
54 | // We use the "micro clearfix", instead of Compass' clearfix or pie-clearfix. |
---|
55 | &:before, |
---|
56 | &:after { |
---|
57 | content: ""; |
---|
58 | display: table; |
---|
59 | } |
---|
60 | &:after { |
---|
61 | clear: both; |
---|
62 | } |
---|
63 | @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) { |
---|
64 | *zoom: 1; |
---|
65 | } |
---|
66 | |
---|
67 | // Un-do the gutter padding of the parent grid item. |
---|
68 | @if $context == flow and $gutter-method == padding { |
---|
69 | margin: { |
---|
70 | left: -(zen-half-gutter($gutters, left, $direction)); |
---|
71 | right: -(zen-half-gutter($gutters, right, $direction)); |
---|
72 | } |
---|
73 | } |
---|
74 | |
---|
75 | // Prevent any padding from messing up the alignment of the nested grid. |
---|
76 | @if $context == grid-item or $context == flow { |
---|
77 | padding: { |
---|
78 | left: 0; |
---|
79 | right: 0; |
---|
80 | } |
---|
81 | } |
---|
82 | } |
---|
83 | |
---|
84 | // |
---|
85 | // Apply this to each grid item. @see http://next.zengrids.com/reference/grids/#zen-grid-item |
---|
86 | // |
---|
87 | @mixin zen-grid-item( |
---|
88 | $column-span, |
---|
89 | $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 |
---|
98 | ) { |
---|
99 | |
---|
100 | // Calculate the unit width. |
---|
101 | $unit-width: zen-unit-width($columns, $gutters, $gutter-method, $grid-width); |
---|
102 | |
---|
103 | // Calculate the item's width. |
---|
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 | } |
---|
111 | |
---|
112 | // Determine the float direction and its reverse. |
---|
113 | $dir: $direction; |
---|
114 | @if $switch-direction { |
---|
115 | $dir: zen-direction-switch($dir); |
---|
116 | } |
---|
117 | $rev: zen-direction-switch($dir); |
---|
118 | |
---|
119 | float: $dir; |
---|
120 | width: $width; |
---|
121 | margin: { |
---|
122 | #{$dir}: $margin; |
---|
123 | #{$rev}: -100%; |
---|
124 | } |
---|
125 | @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) { |
---|
126 | *margin-#{$rev}: -99.9%; |
---|
127 | } |
---|
128 | |
---|
129 | // Auto-apply the unit base mixin. |
---|
130 | @if $auto-include-grid-item-base { |
---|
131 | @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction); |
---|
132 | } |
---|
133 | } |
---|
134 | |
---|
135 | // |
---|
136 | // Applies a standard set of properites to all grid items in the layout. |
---|
137 | // @see http://next.zengrids.com/reference/grids/#zen-grid-item-base |
---|
138 | // |
---|
139 | @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 |
---|
145 | ) { |
---|
146 | |
---|
147 | $dir: $direction; |
---|
148 | @if $switch-direction { |
---|
149 | $dir: zen-direction-switch($dir); |
---|
150 | } |
---|
151 | |
---|
152 | @if $gutter-method == padding { |
---|
153 | padding: { |
---|
154 | left: zen-half-gutter($gutters, left, $dir); |
---|
155 | right: zen-half-gutter($gutters, right, $dir); |
---|
156 | } |
---|
157 | } |
---|
158 | // Specify the border-box properties. |
---|
159 | @if $box-sizing == border-box { |
---|
160 | -moz-box-sizing: border-box; |
---|
161 | box-sizing: border-box; |
---|
162 | } |
---|
163 | // Prevent left/right borders since they'll break the layout with content-box. |
---|
164 | @if $box-sizing == content-box { |
---|
165 | border: { |
---|
166 | left: 0 !important; |
---|
167 | right: 0 !important; |
---|
168 | } |
---|
169 | @if $gutter-method == margin { |
---|
170 | padding: { |
---|
171 | left: 0 !important; |
---|
172 | right: 0 !important; |
---|
173 | } |
---|
174 | } |
---|
175 | } |
---|
176 | // Prevent overflowing content from being hidden beneath other grid items. |
---|
177 | word-wrap: break-word; |
---|
178 | |
---|
179 | @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) { |
---|
180 | @if $box-sizing == border-box and $box-sizing-polyfill-path == "" { |
---|
181 | @warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty."; |
---|
182 | } |
---|
183 | @if $box-sizing-polyfill-path != "" { |
---|
184 | *behavior: url($box-sizing-polyfill-path); |
---|
185 | } |
---|
186 | @if $legacy-support-for-ie6 { |
---|
187 | // Display inline or double your floated margin! |
---|
188 | // @see http://www.positioniseverything.net/explorer/doubled-margin.html |
---|
189 | _display: inline; |
---|
190 | // Prevent overflowing content from breaking the layout. |
---|
191 | _overflow: hidden; |
---|
192 | // In IE6, overflow visible is broken. |
---|
193 | // @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B |
---|
194 | _overflow-y: visible; |
---|
195 | } |
---|
196 | } |
---|
197 | } |
---|
198 | |
---|
199 | // |
---|
200 | // Apply this to a grid item so that it starts a new row. |
---|
201 | // @see http://next.zengrids.com/reference/grids/#zen-new-row |
---|
202 | // |
---|
203 | @mixin zen-new-row( |
---|
204 | $clear : $zen-direction, |
---|
205 | $switch-direction : $zen-switch-direction |
---|
206 | ) { |
---|
207 | // Determine the clearing direction. |
---|
208 | @if $switch-direction { |
---|
209 | $clear: zen-direction-switch($clear); |
---|
210 | } |
---|
211 | clear: $clear; |
---|
212 | } |
---|
213 | |
---|
214 | |
---|
215 | // |
---|
216 | // Helper functions for the Zen mixins. |
---|
217 | // |
---|
218 | |
---|
219 | // Returns a half gutter width. @see http://next.zengrids.com/reference/grids/#zen-half-gutter |
---|
220 | @function zen-half-gutter( |
---|
221 | $gutters : $zen-gutters, |
---|
222 | $gutter-side : $zen-direction, |
---|
223 | $direction : $zen-direction |
---|
224 | ) { |
---|
225 | $half-gutter: $gutters / 2; |
---|
226 | // Special handling in case gutter has an odd number of pixels. |
---|
227 | @if unit($gutters) == "px" { |
---|
228 | @if $gutter-side == $direction { |
---|
229 | @return floor($half-gutter); |
---|
230 | } |
---|
231 | @else { |
---|
232 | @return ceil($half-gutter); |
---|
233 | } |
---|
234 | } |
---|
235 | @return $half-gutter; |
---|
236 | } |
---|
237 | |
---|
238 | // Warns if the gutter and grid width units are not comparable. |
---|
239 | @function zen-compare-units( |
---|
240 | $feature, |
---|
241 | $gutters : $zen-gutters, |
---|
242 | $grid-width : $zen-grid-width |
---|
243 | ) { |
---|
244 | @if not comparable($gutters, $grid-width) { |
---|
245 | $units-gutter: unit($gutters); |
---|
246 | $units-grid: unit($grid-width); |
---|
247 | @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})."; |
---|
248 | @return false; |
---|
249 | } |
---|
250 | @return true; |
---|
251 | } |
---|
252 | |
---|
253 | // Calculates the unit width of a column. @see http://next.zengrids.com/reference/grids/#zen-unit-width |
---|
254 | @function zen-unit-width( |
---|
255 | $columns : $zen-columns, |
---|
256 | $gutters : $zen-gutters, |
---|
257 | $gutter-method : $zen-gutter-method, |
---|
258 | $grid-width : $zen-grid-width |
---|
259 | ) { |
---|
260 | $unit-width: 0; |
---|
261 | @if $gutter-method == margin { |
---|
262 | $test: zen-compare-units('gutter-method: margin', $gutters, $grid-width); |
---|
263 | $unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns; |
---|
264 | } |
---|
265 | @else { |
---|
266 | $unit-width: $grid-width / $columns; |
---|
267 | } |
---|
268 | @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) { |
---|
269 | @if $gutter-method == margin { |
---|
270 | $num_gutters: $columns - 1; |
---|
271 | @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."; |
---|
272 | } |
---|
273 | @else { |
---|
274 | @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns."; |
---|
275 | } |
---|
276 | } |
---|
277 | @return $unit-width; |
---|
278 | } |
---|
279 | |
---|
280 | // Calculates the width of a grid item that spans the specified number of columns. |
---|
281 | // @see http://next.zengrids.com/reference/grids/#zen-grid-item-width |
---|
282 | @function zen-grid-item-width( |
---|
283 | $column-span, |
---|
284 | $columns : $zen-columns, |
---|
285 | $gutters : $zen-gutters, |
---|
286 | $gutter-method : $zen-gutter-method, |
---|
287 | $grid-width : $zen-grid-width, |
---|
288 | $box-sizing : $zen-box-sizing |
---|
289 | ) { |
---|
290 | $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width); |
---|
291 | |
---|
292 | // Add the margin gutters internal to the spanning grid item. |
---|
293 | @if $gutter-method == margin { |
---|
294 | $width: $width + (floor($column-span) - 1) * $gutters; |
---|
295 | } |
---|
296 | // For the original box model, remove the padding from the width. |
---|
297 | @elseif $box-sizing == content-box { |
---|
298 | $test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width); |
---|
299 | $width: $width - $gutters; |
---|
300 | } |
---|
301 | @return $width; |
---|
302 | } |
---|
303 | |
---|
304 | // Returns the opposite direction, given "left" or "right". |
---|
305 | // @see http://next.zengrids.com/reference/grids/#zen-direction-switch |
---|
306 | @function zen-direction-switch( |
---|
307 | $dir |
---|
308 | ) { |
---|
309 | @if $dir == left { |
---|
310 | @return right; |
---|
311 | } |
---|
312 | @else if $dir == right { |
---|
313 | @return left; |
---|
314 | } |
---|
315 | @else if $dir == none or $dir == both { |
---|
316 | @return $dir; |
---|
317 | } |
---|
318 | @warn "Invalid direction passed to zen-direction-switch()."; |
---|
319 | @return both; |
---|
320 | } |
---|