├── .gitignore
├── LICENSE.txt
├── README.md
├── bower.json
├── css
    ├── grid.css
    └── grid.css.map
└── scss
    └── _grid.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | test.html
2 | .sass-cache/
3 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Daniel Eden
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Toast Framework
 2 | The Toast framework is a grid. That's it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.
 3 | 
 4 | Set any number of columns, any gutter size you want, and whatever classes you need. Just edit the `_grid.scss` file’s variables to your needs.
 5 | 
 6 | You should also know that you’d be insane to use Toast’s grid.
 7 | 
 8 | To learn more, go to http://daneden.github.io/Toast
 9 | 
10 | ## Quick-start guide
11 | 
12 | Using Toast is easy. First, link to grid.css in your HTML document's head:
13 | 
14 | ```<link rel="stylesheet" href="css/toast/grid.css">```
15 | 
16 | Then, to use the grid, you'll need a wrap (provided in your own CSS) and a `.grid` container.
17 | 
18 | ```html
19 | <div class="container">
20 |   <div class="grid">
21 |         <div class="grid__col grid__col--1-of-4">
22 | 
23 |         </div>
24 |         <div class="grid__col grid__col--3-of-4">
25 | 
26 |         </div>
27 |         <div class="grid__col grid__col--6-of-12">
28 | 
29 |         </div>
30 |   </div>
31 | </div>
32 | ```
33 | 
34 | ## Customising
35 | 
36 | `$toast-grid-namespace` and `$toast-grid-column-namespace` adjusts the class names for the grid. With default values, grid wrappers have a class of `.grid` and columns `.grid__col`.
37 | 
38 | `$toast-col-groups(n)` adjusts column divisions. For example, `$toast-col-groups(12)` will produce a 12-column grid. `$toast-col-groups(3,6,8)` will produce a 3-, 6-, and 8-column grid.
39 | 
40 | `$toast-gutter-width` is—you guessed it—the gutter
41 | width. Accepts any unit.
42 | 
43 | `$toast-breakpoint-medium` and `$toast-breakpoint-small` are breakpoint placeholders. Columns have hooks to change their behaviour under these breakpoints. See the “Modifiers” section below.
44 | 
45 | ## Modifiers
46 | 
47 | Toast has some modifiers to make different kinds of layouts easier. There are breakpoint hooks to have columns behave differently than their default behaviour under breakpoints:
48 | 
49 | ```html
50 | <div class="grid">
51 |   <div class="grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-2 grid__col">
52 |     This column will behave like a 1-of-2 column under the medium breakpoint and the small breakpoint.
53 |   </div>
54 | 
55 |   <div class="grid__col--1-of-3 grid__col--ab grid__col">
56 |     This column aligns to the bottom of its row.
57 |   </div>
58 | 
59 |   <div class="grid__col--1-of-3 grid__col--am grid__col">
60 |     This column aligns to the middle of its row.
61 |   </div>
62 | 
63 |   <div class="grid__col--3-of-5 grid__col--centered grid__col">
64 |     This column is centered and alone in its row.
65 |   </div>
66 | 
67 |   <div class="grid__col--1-of-2 grid__col--d-last grid__col">
68 |     This column comes first in the DOM, but appears last in its row.
69 |   </div>
70 | 
71 |   <div class="grid__col--1-of-2 grid__col--d-first grid__col">
72 |     This column appears last in the DOM, but appears first in its row.
73 |   </div>
74 | </div>
75 | ```
76 | 
77 | That’s it. Have fun.
78 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "toast-css",
 3 |   "version": "1.0.0",
 4 |   "main": [
 5 |     "scss/_grid.scss"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "homepage": "http://daneden.github.io/Toast"
 9 | }
10 | 


--------------------------------------------------------------------------------
/css/grid.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /*-----------------------------------*\
  3 | 
  4 |   $TOAST-GRID
  5 | 
  6 |   An insane grid.
  7 |   You'd be mad to use it.
  8 | 
  9 |   Usage
 10 |   =====
 11 | 
 12 |   Assuming default values:
 13 | 
 14 |   <div class="grid">
 15 |     <div class="grid__col grid__col--1-of-2">
 16 |       A half-width column.
 17 |     </div>
 18 |     <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
 19 |       A quarter, pulled left by its own width. You get this, right?
 20 |     </div>
 21 |   </div>
 22 | 
 23 | 
 24 |   Customisation
 25 |   =============
 26 | 
 27 |   $toast-grid-namespace and $toast-grid-column-namespace
 28 |   adjusts the class names for the grid. With
 29 |   default values, grid wrappers have a class
 30 |   of '.grid' and columns '.grid__col'.
 31 | 
 32 |   $toast-col-groups(n) adjusts column divisions.
 33 |   For example, $toast-col-groups(12) will produce
 34 |   a 12-column grid. $col-groups(3,6,8)
 35 |   will produce a 3-, 6-, and 8-column grid.
 36 | 
 37 |   $toast-gutter-width is—you guessed it—the gutter
 38 |   width. Accepts any unit.
 39 | 
 40 |   That's it. Have fun.
 41 | 
 42 | \*-----------------------------------*/
 43 | .grid {
 44 |   list-style: none;
 45 |   margin-left: -20px; }
 46 | 
 47 | .grid__col--2-of-2, .grid__col--3-of-3, .grid__col--4-of-4, .grid__col--5-of-5, .grid__col--6-of-6, .grid__col--8-of-8, .grid__col--12-of-12 {
 48 |   width: 100%; }
 49 | 
 50 | .grid__col--1-of-2, .grid__col--2-of-4, .grid__col--3-of-6, .grid__col--4-of-8, .grid__col--6-of-12 {
 51 |   width: 50%; }
 52 | 
 53 | .grid__col--1-of-3, .grid__col--2-of-6, .grid__col--4-of-12 {
 54 |   width: 33.33333%; }
 55 | 
 56 | .grid__col--2-of-3, .grid__col--4-of-6, .grid__col--8-of-12 {
 57 |   width: 66.66667%; }
 58 | 
 59 | .grid__col--1-of-4, .grid__col--2-of-8, .grid__col--3-of-12 {
 60 |   width: 25%; }
 61 | 
 62 | .grid__col--3-of-4, .grid__col--6-of-8, .grid__col--9-of-12 {
 63 |   width: 75%; }
 64 | 
 65 | .grid__col--push-2-of-2, .grid__col--push-3-of-3, .grid__col--push-4-of-4, .grid__col--push-5-of-5, .grid__col--push-6-of-6, .grid__col--push-8-of-8, .grid__col--push-12-of-12 {
 66 |   margin-left: 100%; }
 67 | 
 68 | .grid__col--push-1-of-2, .grid__col--push-2-of-4, .grid__col--push-3-of-6, .grid__col--push-4-of-8, .grid__col--push-6-of-12 {
 69 |   margin-left: 50%; }
 70 | 
 71 | .grid__col--push-1-of-3, .grid__col--push-2-of-6, .grid__col--push-4-of-12 {
 72 |   margin-left: 33.33333%; }
 73 | 
 74 | .grid__col--push-2-of-3, .grid__col--push-4-of-6, .grid__col--push-8-of-12 {
 75 |   margin-left: 66.66667%; }
 76 | 
 77 | .grid__col--push-1-of-4, .grid__col--push-2-of-8, .grid__col--push-3-of-12 {
 78 |   margin-left: 25%; }
 79 | 
 80 | .grid__col--push-3-of-4, .grid__col--push-6-of-8, .grid__col--push-9-of-12 {
 81 |   margin-left: 75%; }
 82 | 
 83 | .grid__col--pull-2-of-2, .grid__col--pull-3-of-3, .grid__col--pull-4-of-4, .grid__col--pull-5-of-5, .grid__col--pull-6-of-6, .grid__col--pull-8-of-8, .grid__col--pull-12-of-12 {
 84 |   margin-left: -100%; }
 85 | 
 86 | .grid__col--pull-1-of-2, .grid__col--pull-2-of-4, .grid__col--pull-3-of-6, .grid__col--pull-4-of-8, .grid__col--pull-6-of-12 {
 87 |   margin-left: -50%; }
 88 | 
 89 | .grid__col--pull-1-of-3, .grid__col--pull-2-of-6, .grid__col--pull-4-of-12 {
 90 |   margin-left: -33.33333%; }
 91 | 
 92 | .grid__col--pull-2-of-3, .grid__col--pull-4-of-6, .grid__col--pull-8-of-12 {
 93 |   margin-left: -66.66667%; }
 94 | 
 95 | .grid__col--pull-1-of-4, .grid__col--pull-2-of-8, .grid__col--pull-3-of-12 {
 96 |   margin-left: -25%; }
 97 | 
 98 | .grid__col--pull-3-of-4, .grid__col--pull-6-of-8, .grid__col--pull-9-of-12 {
 99 |   margin-left: -75%; }
100 | 
101 | .grid__col--1-of-5 {
102 |   width: 20%; }
103 | 
104 | .grid__col--push-1-of-5 {
105 |   margin-left: 20%; }
106 | 
107 | .grid__col--pull-1-of-5 {
108 |   margin-left: -20%; }
109 | 
110 | .grid__col--2-of-5 {
111 |   width: 40%; }
112 | 
113 | .grid__col--push-2-of-5 {
114 |   margin-left: 40%; }
115 | 
116 | .grid__col--pull-2-of-5 {
117 |   margin-left: -40%; }
118 | 
119 | .grid__col--3-of-5 {
120 |   width: 60%; }
121 | 
122 | .grid__col--push-3-of-5 {
123 |   margin-left: 60%; }
124 | 
125 | .grid__col--pull-3-of-5 {
126 |   margin-left: -60%; }
127 | 
128 | .grid__col--4-of-5 {
129 |   width: 80%; }
130 | 
131 | .grid__col--push-4-of-5 {
132 |   margin-left: 80%; }
133 | 
134 | .grid__col--pull-4-of-5 {
135 |   margin-left: -80%; }
136 | 
137 | .grid__col--1-of-6 {
138 |   width: 16.66667%; }
139 | 
140 | .grid__col--push-1-of-6 {
141 |   margin-left: 16.66667%; }
142 | 
143 | .grid__col--pull-1-of-6 {
144 |   margin-left: -16.66667%; }
145 | 
146 | .grid__col--5-of-6 {
147 |   width: 83.33333%; }
148 | 
149 | .grid__col--push-5-of-6 {
150 |   margin-left: 83.33333%; }
151 | 
152 | .grid__col--pull-5-of-6 {
153 |   margin-left: -83.33333%; }
154 | 
155 | .grid__col--1-of-8 {
156 |   width: 12.5%; }
157 | 
158 | .grid__col--push-1-of-8 {
159 |   margin-left: 12.5%; }
160 | 
161 | .grid__col--pull-1-of-8 {
162 |   margin-left: -12.5%; }
163 | 
164 | .grid__col--3-of-8 {
165 |   width: 37.5%; }
166 | 
167 | .grid__col--push-3-of-8 {
168 |   margin-left: 37.5%; }
169 | 
170 | .grid__col--pull-3-of-8 {
171 |   margin-left: -37.5%; }
172 | 
173 | .grid__col--5-of-8 {
174 |   width: 62.5%; }
175 | 
176 | .grid__col--push-5-of-8 {
177 |   margin-left: 62.5%; }
178 | 
179 | .grid__col--pull-5-of-8 {
180 |   margin-left: -62.5%; }
181 | 
182 | .grid__col--7-of-8 {
183 |   width: 87.5%; }
184 | 
185 | .grid__col--push-7-of-8 {
186 |   margin-left: 87.5%; }
187 | 
188 | .grid__col--pull-7-of-8 {
189 |   margin-left: -87.5%; }
190 | 
191 | .grid__col--1-of-12 {
192 |   width: 8.33333%; }
193 | 
194 | .grid__col--push-1-of-12 {
195 |   margin-left: 8.33333%; }
196 | 
197 | .grid__col--pull-1-of-12 {
198 |   margin-left: -8.33333%; }
199 | 
200 | .grid__col--2-of-12 {
201 |   width: 16.66667%; }
202 | 
203 | .grid__col--push-2-of-12 {
204 |   margin-left: 16.66667%; }
205 | 
206 | .grid__col--pull-2-of-12 {
207 |   margin-left: -16.66667%; }
208 | 
209 | .grid__col--5-of-12 {
210 |   width: 41.66667%; }
211 | 
212 | .grid__col--push-5-of-12 {
213 |   margin-left: 41.66667%; }
214 | 
215 | .grid__col--pull-5-of-12 {
216 |   margin-left: -41.66667%; }
217 | 
218 | .grid__col--7-of-12 {
219 |   width: 58.33333%; }
220 | 
221 | .grid__col--push-7-of-12 {
222 |   margin-left: 58.33333%; }
223 | 
224 | .grid__col--pull-7-of-12 {
225 |   margin-left: -58.33333%; }
226 | 
227 | .grid__col--10-of-12 {
228 |   width: 83.33333%; }
229 | 
230 | .grid__col--push-10-of-12 {
231 |   margin-left: 83.33333%; }
232 | 
233 | .grid__col--pull-10-of-12 {
234 |   margin-left: -83.33333%; }
235 | 
236 | .grid__col--11-of-12 {
237 |   width: 91.66667%; }
238 | 
239 | .grid__col--push-11-of-12 {
240 |   margin-left: 91.66667%; }
241 | 
242 | .grid__col--pull-11-of-12 {
243 |   margin-left: -91.66667%; }
244 | 
245 | .grid__col {
246 |   box-sizing: border-box;
247 |   display: inline-block;
248 |   margin-right: -.25em;
249 |   min-height: 1px;
250 |   padding-left: 20px;
251 |   vertical-align: top; }
252 |   @media (max-width: 700px) {
253 |     .grid__col {
254 |       display: block;
255 |       margin-left: 0;
256 |       margin-right: 0;
257 |       width: auto; } }
258 |   @media (max-width: 700px) and (min-width: 480px) {
259 |     .grid__col[class*="grid__col--m-"] {
260 |       display: inline-block;
261 |       margin-right: -.24em; }
262 |     .grid__col.grid__col--m-1-of-2, .grid__col.grid__col--m-2-of-4 {
263 |       width: 50%; }
264 |     .grid__col.grid__col--m-1-of-3 {
265 |       width: 33.33333%; }
266 |     .grid__col.grid__col--m-2-of-3 {
267 |       width: 66.66667%; }
268 |     .grid__col.grid__col--m-1-of-4 {
269 |       width: 25%; }
270 |     .grid__col.grid__col--m-3-of-4 {
271 |       width: 75%; } }
272 |   @media (max-width: 480px) {
273 |     .grid__col[class*="grid__col--s-"] {
274 |       display: inline-block;
275 |       margin-right: -.24em; }
276 |     .grid__col.grid__col--s-1-of-2, .grid__col.grid__col--s-2-of-4 {
277 |       width: 50%; }
278 |     .grid__col.grid__col--s-1-of-3 {
279 |       width: 33.33333%; }
280 |     .grid__col.grid__col--s-2-of-3 {
281 |       width: 66.66667%; }
282 |     .grid__col.grid__col--s-1-of-4 {
283 |       width: 25%; }
284 |     .grid__col.grid__col--s-3-of-4 {
285 |       width: 75%; } }
286 | 
287 | .grid__col--centered {
288 |   display: block;
289 |   margin-left: auto;
290 |   margin-right: auto; }
291 | 
292 | .grid__col--d-first {
293 |   float: left; }
294 | 
295 | .grid__col--d-last {
296 |   float: right; }
297 | 
298 | .grid--no-gutter {
299 |   margin-left: 0;
300 |   width: 100%; }
301 |   .grid--no-gutter .grid__col {
302 |     padding-left: 0; }
303 |   .grid--no-gutter .grid__col--span-all {
304 |     margin-left: 0;
305 |     width: 100%; }
306 | 
307 | .grid__col--ab {
308 |   vertical-align: bottom; }
309 | 
310 | .grid__col--am {
311 |   vertical-align: middle; }
312 | 
313 | /*# sourceMappingURL=grid.css.map */
314 | 


--------------------------------------------------------------------------------
/css/grid.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["../scss/_grid.scss"],
5 | "names": [],
6 | "file": "grid.css"
7 | }
8 | 


--------------------------------------------------------------------------------
/scss/_grid.scss:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 | 
  3 |   $TOAST-GRID
  4 | 
  5 |   An insane grid.
  6 |   You'd be mad to use it.
  7 | 
  8 |   Usage
  9 |   =====
 10 | 
 11 |   Assuming default values:
 12 | 
 13 |   <div class="grid">
 14 |     <div class="grid__col grid__col--1-of-2">
 15 |       A half-width column.
 16 |     </div>
 17 |     <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
 18 |       A quarter, pulled left by its own width. You get this, right?
 19 |     </div>
 20 |   </div>
 21 | 
 22 | 
 23 |   Customisation
 24 |   =============
 25 | 
 26 |   $toast-grid-namespace and $toast-grid-column-namespace
 27 |   adjusts the class names for the grid. With
 28 |   default values, grid wrappers have a class
 29 |   of '.grid' and columns '.grid__col'.
 30 | 
 31 |   $toast-col-groups(n) adjusts column divisions.
 32 |   For example, $toast-col-groups(12) will produce
 33 |   a 12-column grid. $col-groups(3,6,8)
 34 |   will produce a 3-, 6-, and 8-column grid.
 35 | 
 36 |   $toast-gutter-width is—you guessed it—the gutter
 37 |   width. Accepts any unit.
 38 | 
 39 |   That's it. Have fun.
 40 | 
 41 | \*-----------------------------------*/
 42 | 
 43 | // Namespaces
 44 | // This stops me from being overzealous with enforcing classes
 45 | $toast-grid-namespace: "grid" !default;
 46 | $toast-grid-column-namespace: "grid__col" !default;
 47 | 
 48 | // $col-groups are the column groups you want
 49 | // For example, $col-groups: (3, 4, 5) will output:
 50 | // .grid__col--n-of-3, .grid__col--n-of-4, [...]
 51 | $toast-col-groups: (2, 3, 4, 5, 6, 8, 12) !default;
 52 | 
 53 | // Gutter width
 54 | $toast-gutter-width: 20px !default;
 55 | 
 56 | // Breakpoints
 57 | $toast-breakpoint-medium: 700px !default;
 58 | $toast-breakpoint-small: 480px !default;
 59 | 
 60 | // Pushes and pulls
 61 | $toast-pushes: true !default;
 62 | $toast-pulls: true !default;
 63 | 
 64 | .#{$toast-grid-namespace} {
 65 |   list-style: none;
 66 |   margin-left: -$toast-gutter-width;
 67 | }
 68 | 
 69 | %span-all       { width: percentage(1/1); }
 70 | 
 71 | %one-half       { width: percentage(1/2); }
 72 | 
 73 | %one-third      { width: percentage(1/3); }
 74 | %two-thirds     { width: percentage(2/3); }
 75 | 
 76 | %one-quarter    { width: percentage(1/4); }
 77 | %two-quarters   { width: percentage(2/4); }
 78 | %three-quarters { width: percentage(3/4); }
 79 | 
 80 | %push-span-all       { margin-left: percentage(1/1); }
 81 | 
 82 | %push-one-half       { margin-left: percentage(1/2); }
 83 | 
 84 | %push-one-third      { margin-left: percentage(1/3); }
 85 | %push-two-thirds     { margin-left: percentage(2/3); }
 86 | 
 87 | %push-one-quarter    { margin-left: percentage(1/4); }
 88 | %push-two-quarters   { margin-left: percentage(2/4); }
 89 | %push-three-quarters { margin-left: percentage(3/4); }
 90 | 
 91 | %pull-span-all       { margin-left: -(percentage(1/1)); }
 92 | 
 93 | %pull-one-half       { margin-left: -(percentage(1/2)); }
 94 | 
 95 | %pull-one-third      { margin-left: -(percentage(1/3)); }
 96 | %pull-two-thirds     { margin-left: -(percentage(2/3)); }
 97 | 
 98 | %pull-one-quarter    { margin-left: -(percentage(1/4)); }
 99 | %pull-two-quarters   { margin-left: -(percentage(2/4)); }
100 | %pull-three-quarters { margin-left: -(percentage(3/4)); }
101 | 
102 | // For each of our column groups...
103 | @each $group in $toast-col-groups {
104 | 
105 |   // For each column width from 1 to the column group...
106 |   @for $i from 1 through $group {
107 |     .#{$toast-grid-column-namespace}--#{$i}-of-#{$group} {
108 |       @if percentage($i/$group) == percentage(1/1) {
109 |         @extend %span-all;
110 |       } @else if percentage($i/$group) == percentage(1/2) {
111 |         @extend %one-half;
112 |       } @else if percentage($i/$group) == percentage(1/3) {
113 |         @extend %one-third;
114 |       } @else if percentage($i/$group) == percentage(2/3) {
115 |         @extend %two-thirds;
116 |       } @else if percentage($i/$group) == percentage(1/4) {
117 |         @extend %one-quarter;
118 |       } @else if percentage($i/$group) == percentage(2/4) {
119 |         @extend %two-quarters;
120 |       } @else if percentage($i/$group) == percentage(3/4) {
121 |         @extend %three-quarters;
122 |       } @else {
123 | 
124 |         width: percentage($i/$group);
125 | 
126 |       }
127 |     }
128 | 
129 |     @if ($toast-pushes) {
130 |       .#{$toast-grid-column-namespace}--push-#{$i}-of-#{$group} {
131 |         @if percentage($i/$group) == percentage(1/1) {
132 |           @extend %push-span-all;
133 |         } @else if percentage($i/$group) == percentage(1/2) {
134 |           @extend %push-one-half;
135 |         } @else if percentage($i/$group) == percentage(1/3) {
136 |           @extend %push-one-third;
137 |         } @else if percentage($i/$group) == percentage(2/3) {
138 |           @extend %push-two-thirds;
139 |         } @else if percentage($i/$group) == percentage(1/4) {
140 |           @extend %push-one-quarter;
141 |         } @else if percentage($i/$group) == percentage(2/4) {
142 |           @extend %push-two-quarters;
143 |         } @else if percentage($i/$group) == percentage(3/4) {
144 |           @extend %push-three-quarters;
145 |         } @else {
146 | 
147 |           margin-left: percentage($i/$group);
148 | 
149 |         }
150 |       }
151 |     } // end pushes
152 | 
153 |     @if ($toast-pulls) {
154 |       .#{$toast-grid-column-namespace}--pull-#{$i}-of-#{$group} {
155 | 
156 |         @if percentage($i/$group) == percentage(1/1) {
157 |           @extend %pull-span-all;
158 |         } @else if percentage($i/$group) == percentage(1/2) {
159 |           @extend %pull-one-half;
160 |         } @else if percentage($i/$group) == percentage(1/3) {
161 |           @extend %pull-one-third;
162 |         } @else if percentage($i/$group) == percentage(2/3) {
163 |           @extend %pull-two-thirds;
164 |         } @else if percentage($i/$group) == percentage(1/4) {
165 |           @extend %pull-one-quarter;
166 |         } @else if percentage($i/$group) == percentage(2/4) {
167 |           @extend %pull-two-quarters;
168 |         } @else if percentage($i/$group) == percentage(3/4) {
169 |           @extend %pull-three-quarters;
170 |         } @else {
171 | 
172 |           margin-left: -(percentage($i/$group));
173 | 
174 |         }
175 |       }
176 |     } // end pulls
177 |   } // end @for
178 | 
179 | } // end @each
180 | 
181 | // All direct descendents of .grid get treated the same way.
182 | // This might be overkill for some, but it's a time-saver for me.
183 | .#{$toast-grid-column-namespace} {
184 |   box-sizing: border-box;
185 |   display: inline-block;
186 |   margin-right: -.25em;
187 |   min-height: 1px;
188 |   padding-left: $toast-gutter-width;
189 |   vertical-align: top;
190 | 
191 |   @media (max-width: $toast-breakpoint-medium) {
192 |     display: block;
193 |     margin-left: 0;
194 |     margin-right: 0;
195 |     width: auto;
196 |   }
197 | 
198 |   @media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
199 |     &[class*="#{$toast-grid-column-namespace}--m-"] {
200 |       display: inline-block;
201 |       margin-right: -.24em;
202 |     }
203 | 
204 |     &.#{$toast-grid-column-namespace}--m-1-of-2 {
205 |       width: percentage(1/2);
206 |     }
207 | 
208 |     &.#{$toast-grid-column-namespace}--m-1-of-3 {
209 |       width: percentage(1/3);
210 |     }
211 | 
212 |     &.#{$toast-grid-column-namespace}--m-2-of-3 {
213 |       width: percentage(2/3);
214 |     }
215 | 
216 |     &.#{$toast-grid-column-namespace}--m-1-of-4 {
217 |       width: percentage(1/4);
218 |     }
219 | 
220 |     &.#{$toast-grid-column-namespace}--m-2-of-4 {
221 |       @extend .#{$toast-grid-column-namespace}--m-1-of-2;
222 |     }
223 | 
224 |     &.#{$toast-grid-column-namespace}--m-3-of-4 {
225 |       width: percentage(3/4);
226 |     }
227 |   }
228 | 
229 |   @media (max-width: $toast-breakpoint-small) {
230 |     &[class*="#{$toast-grid-column-namespace}--s-"] {
231 |       display: inline-block;
232 |       margin-right: -.24em;
233 |     }
234 | 
235 |     &.#{$toast-grid-column-namespace}--s-1-of-2 {
236 |       width: percentage(1/2);
237 |     }
238 | 
239 |     &.#{$toast-grid-column-namespace}--s-1-of-3 {
240 |       width: percentage(1/3);
241 |     }
242 | 
243 |     &.#{$toast-grid-column-namespace}--s-2-of-3 {
244 |       width: percentage(2/3);
245 |     }
246 | 
247 |     &.#{$toast-grid-column-namespace}--s-1-of-4 {
248 |       width: percentage(1/4);
249 |     }
250 | 
251 |     &.#{$toast-grid-column-namespace}--s-2-of-4 {
252 |       @extend .#{$toast-grid-column-namespace}--s-1-of-2;
253 |     }
254 | 
255 |     &.#{$toast-grid-column-namespace}--s-3-of-4 {
256 |       width: percentage(3/4);
257 |     }
258 |   }
259 | }
260 | 
261 | // Centers the column in the grid and clears the row of all other columns
262 | .#{$toast-grid-column-namespace}--centered {
263 |   display: block;
264 |   margin-left: auto;
265 |   margin-right: auto;
266 | }
267 | 
268 | 
269 | // Displays the column as the first in its row
270 | .#{$toast-grid-column-namespace}--d-first {
271 |   float: left;
272 | }
273 | 
274 | // Displays the column as the last in its row
275 | .#{$toast-grid-column-namespace}--d-last {
276 |   float: right;
277 | }
278 | 
279 | // Removes gutters from the columns
280 | .#{$toast-grid-namespace}--no-gutter {
281 |   margin-left: 0;
282 |   width: 100%;
283 | 
284 |   .#{$toast-grid-column-namespace} {
285 |     padding-left: 0;
286 |   }
287 | 
288 |   .#{$toast-grid-column-namespace}--span-all {
289 |     margin-left: 0;
290 |     width: 100%;
291 |   }
292 | }
293 | 
294 | // Align column to the bottom.
295 | .#{$toast-grid-column-namespace}--ab {
296 |   vertical-align: bottom;
297 | }
298 | 
299 | // Align column to the middle.
300 | .#{$toast-grid-column-namespace}--am {
301 |   vertical-align: middle;
302 | }
303 | 
304 | 


--------------------------------------------------------------------------------