_grid.scss
Add or subtract various column breakdowns. Follow the pattern when adding.
/* --------------- Grid Variables --------------- */
/* Columns - Add or subtract various column breakdowns. Follow the pattern when adding. */
$columns: (
1: (1), /* creates one column */
2: (1, 2), /* creates two columns of equal width */
3: (1, 2, 3), /* creates three columns of equal width */
4: (1, 2, 3, 4), /* creates four columns of equal width */
5: (1, 2, 3, 4, 5), /* creates five columns of equal width */
6: (1, 2, 3, 4, 5, 6), /* creates six columns of equal width */
7: (1, 2, 3, 4, 5, 6, 7), /* creates seven columns of equal width */
8: (1, 2, 3, 4, 5, 6, 7, 8), /* creates eight columns of equal width */
9: (1, 2, 3, 4, 5, 6, 7, 8, 9), /* creates nine columns of equal width */
10: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10), /* creates ten columns of equal width */
11: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11), /* creates eleven columns of equal width */
12: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12), /* creates twelve columns of equal width */
);
/* --------------- /Grid Variables --------------- */
The Row Class can be written as follows.
Class | Effect |
---|---|
.row | All columns must be wrapped in a row |
The Grid Class Prefixes can be written in different ways depending on your desired specificity.
Columns | Offsets | |
---|---|---|
Minimal | .col | .off |
Strict | .column | .offset |
The following breakpoint extension can be customized and extended in the variable-settings.scss file.
Ext | Def | Breakpoint | Device |
---|---|---|---|
-tn | tiny | 0px | Small Phone |
-xs | extra-small | 480px | Phone |
-sm | small | 640px | Small Tablet |
-md | medium | 768px | Tablet |
-lg | large | 992px | Laptop |
-xl | extra-large | 1200px | Desktop |
-pr | Printed Page | All Devices |
The following Grid values are provided as they are the most commonly used. Grid values can be altered in the variable-settings.scss file. Be careful. Grid values are tied to breakpoints. Your css can get rather large.
1 | -1of1 | |||||
---|---|---|---|---|---|---|
2 | -1of2 | -2of2 | ||||
3 | -1of3 | -2of3 | -3of3 | |||
4 | -1of4 | -2of4 | -3of4 | -4of4 | ||
5 | -1of5 | -2of5 | -3of5 | -4of5 | -5of5 | |
6 | -1of6 | -2of6 | -3of6 | -4of6 | -5of6 | -6of6 |
7 | -1of7 | -2of7 | -3of7 | -4of7 | -5of7 | -6of7 |
-7of7 | ||||||
8 | -1of8 | -2of8 | -3of8 | -4of8 | -5of8 | -6of8 |
-7of8 | -8of8 | |||||
9 | -1of9 | -2of9 | -3of9 | -4of9 | -5of9 | -6of9 |
-7of9 | -8of9 | -9of9 | ||||
10 | -1of10 | -2of10 | -3of10 | -4of10 | -5of10 | -6of10 |
-7of10 | -8of10 | -9of10 | -10of10 | |||
11 | -1of11 | -2of11 | -3of11 | -4of11 | -5of11 | -6of11 |
-7of11 | -8of11 | -9of11 | -10of11 | -11of11 | ||
12 | -1of12 | -2of12 | -3of12 | -4of12 | -5of12 | -6of12 |
-7of12 | -8of12 | -9of12 | -10of12 | -11of12 | -12of12 |
Use the Padding and Margin classes to create gutters. Because the Padding and Margin classes are tied to breakpoints, gutter size can be set for each breakpoint.
Use the Display classes to hide and show rows or columns at various breakpoints. Because the Display classes are tied to breakpoints, hide and show can be set for each breakpoint.
Use the Float classes to the order of rows or columns at various breakpoints. Because the Float classes are tied to breakpoints, order can be set for each breakpoint.
The grid above was created by the code below. Resize your window to watch the grid respond to different breakpoint settings.