1%zero-margin-left {
2  margin-left: 0;
3}
4
5
6/*=================================================
7
8	+++ LE GRID +++
9	A Responsive Grid -- Gumby defaults to a standard 960 grid,
10	but you can change it to whatever you'd like.
11
12 ==================================================*/
13
14// We're removing the container class in favor
15// of adding padding to rows at the $device-width
16// breakpoint.
17
18/*.container {
19	padding: 0 $gutter-in-px;
20}*/
21
22.row {
23	width: 100%;
24	max-width: $row-max-width + 40px;
25	min-width: $min-device-width;
26	margin: 0 auto;
27	padding-left: 20px;
28	padding-right: 20px;
29	.row {
30		min-width: 0;
31		padding-left: 0;
32		padding-right: 0;
33	}
34}
35
36/* To fix the grid into a different size, set max-width to your desired width */
37
38.column, .columns {
39	margin-left: $gutter;
40	float: $default-float;
41	min-height: 1px;
42	@include box-sizing(border-box);
43}
44
45.column:first-child, .columns:first-child, .alpha {
46	margin-left: 0;
47}
48
49.column.omega, .columns.omega {
50	float: $switch-float;
51}
52
53// Generate the Grid
54
55/* Column Classes */
56
57// Generate Column Classes
58.row {
59	@for $i from 1 through $cols{
60		@if $i == 1 {
61			.one.column {
62				width: columns($i);
63			}
64		}
65		.#{number-as-word($i)}.columns {
66			width: columns($i);
67		}
68	}
69}
70
71/* Push and Pull Classes */
72
73// Generate Push and Pull Classes
74.row {
75  @for $i from 1 through $cols - 1 {
76    .push_#{number-as-word($i)} {
77      margin-left: push_x($i);
78        &:first-child {
79        margin-left: push_x($i, true);
80      }
81    }
82    .pull_#{number-as-word($i)} {
83      // pull classes need to know the width of the container being pulled
84      @for $j from 1 through $cols - 1 {
85        @if $i + $j == $cols {
86          &.#{number-as-word($j)}.columns {
87            @extend %pull-100-percent;
88          }
89        }
90        @elseif $j == 1 {
91          &.one.column {
92            margin-left: pull_x($i, $j);
93            &:first-child {
94              @extend %zero-margin-left;
95            }
96          }
97        }
98        @else {
99          &.#{number-as-word($j)}.columns {
100            margin-left: pull_x($i, $j);
101            &:first-child {
102              @extend %zero-margin-left;
103            }
104          }
105        }
106      }
107    }
108  }
109}
110
111/* Centered Classes */
112
113// Generate Centered Classes
114.row {
115	@for $i from 1 through $cols - 1 {
116		.#{number-as-word($i)}.centered {
117			margin-left: centered($i);
118		}
119	}
120}
121
122/* Hybrid Grid Columns */
123
124// Generate Hybrid Grid Column Classes
125.#{number-as-word($hybrid)}.colgrid .row {
126	@for $i from 1 through $hybrid{
127		@if $i == 1 {
128			.one.column {
129				width: columns($i, true);
130			}
131		}
132		.#{number-as-word($i)}.columns{
133			width: columns($i, true);
134		}
135	}
136}
137
138/* Hybrid Push and Pull Classes */
139
140// Generate Hybrid Push Classes
141.#{number-as-word($hybrid)}.colgrid .row {
142  @for $i from 1 through $hybrid - 1{
143    .push_#{number-as-word($i)} {
144      margin-left: push_x($i, false, true);
145        &:first-child {
146        margin-left: push_x($i, true, true);
147      }
148    }
149    .pull_#{number-as-word($i)} {
150      // pull classes need to know the width of the container being pulled
151      @for $j from 1 through $hybrid - 1 {
152        @if $i + $j == $hybrid {
153          &.#{number-as-word($j)}.columns {
154            @extend %pull-100-percent;
155          }
156        }
157        @elseif $j == 1 {
158          &.one.column {
159            margin-left: pull_x($i, $j, true);
160            &:first-child {
161              @extend %zero-margin-left;
162            }
163          }
164        }
165        @else {
166          &.#{number-as-word($j)}.columns {
167            margin-left: pull_x($i, $j, true);
168            &:first-child {
169              @extend %zero-margin-left;
170            }
171          }
172        }
173      }
174    }
175  }
176}
177
178// helper placeholder to condense the repeated
179// need for resetting first-child margins to zero
180%zero-margin-left {
181  margin-left: 0;
182}
183
184%pull-100-percent {
185  margin-left: -100%;
186}
187
188/* Hybrid Centered Classes */
189
190// Generate Centered Classes
191.#{number-as-word($hybrid)}.colgrid .row {
192	@for $i from 1 through $hybrid - 1 {
193		.#{number-as-word($i)}.centered {
194			margin-left: centered($i, true);
195		}
196	}
197}
198
199.pull_right { @include pull(right); }
200
201.pull_left { @include pull(left); }
202
203img, object, embed {
204	max-width: 100%;
205	height: auto;
206}
207
208img {
209	-ms-interpolation-mode: bicubic;
210}
211
212#map_canvas img, .map_canvas img {
213	max-width: none !important;
214}
215
216/* Tile Grid */
217
218.tiles {
219	display: block;
220	overflow: hidden;
221	> li, > .tile {
222		display: block;
223		height: auto;
224		float: left;
225		padding-bottom:0;
226	}
227	&.two_up {
228		margin-left: -4%;
229		> li, > .tile {
230			margin-left: 4%;
231			width: 46%;
232		}
233	}
234	&.three_up, &.four_up {
235		margin-left: -2%;
236	}
237	&.three_up > li, &.three_up > .tile {
238		margin-left: 2%;
239		width: 31.3%;
240	}
241	&.four_up > li, &.four_up > .tile {
242		margin-left: 2%;
243		width: 23%;
244	}
245	&.five_up {
246		margin-left: -1.5%;
247		> li, > .tile {
248			margin-left: 1.5%;
249			width: 18.5%;
250		}
251	}
252}
253
254/* Nicolas Gallagher's micro clearfix */
255
256.clearfix {
257	@include clearfix();
258}
259
260.row {
261	@include clearfix();
262}
263
264
265// vertically align stuff
266
267.valign {
268	&:before {
269		content:' ';
270		display: inline-block;
271		height: 400px;
272		vertical-align: middle;
273		margin-right: -0.25em;
274	}
275	> div, > article, > section, > figure {
276		display: inline-block;
277		vertical-align: middle;
278	}
279}
280
281
282/* Mobile */
283
284@include respond(all-phones) {
285	body {
286		-webkit-text-size-adjust: none;
287		-ms-text-size-adjust: none;
288		width: 100%;
289		min-width: 0;
290	}
291	.container {
292		min-width: 0;
293		margin-left: 0;
294		margin-right: 0;
295	}
296	.row {
297		width: 100%;
298		min-width: 0;
299		margin-left: 0;
300		margin-right: 0;
301		.row {
302			.column, .columns {
303				padding: 0;
304			}
305		}
306		.centered {
307			margin-left: 0 !important;
308		}
309	}
310	.column, .columns {
311		width: auto !important;
312		float: none;
313		margin-left: 0;
314		margin-right: 0;
315	}
316	.column:last-child, .columns:last-child {
317		margin-right: 0;
318		float: none;
319	}
320
321	[class*="column"] {
322		+ [class*="column"]:last-child {
323			float: none;
324		}
325		&:before {
326			display: table;
327		}
328		&:after {
329			display: table;
330			clear: both;
331		}
332	}
333	[class^="push_"],
334	[class*="push_"],
335	[class^="pull_"],
336	[class*="pull_"] {
337		margin-left: 0 !important;
338	}
339}
340