Grid: Requirements

---

Grid: Variables

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 --------------- */

---

Grid: Row (Required)

The Row Class can be written as follows.

Class	Effect
.row	All columns must be wrapped in a row element. Allows parent elements to clear floated column elements.

---

Grid: Class Prefix Options (Required)

The Grid Class Prefixes can be written in different ways depending on your desired specificity.

	Columns	Offsets
Minimal	.col	.off
Strict	.column	.offset

Grid: Class Breakpoint Extensions (Required)

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	print	Printed Page	All Devices

Grid: Class Value Extensions (Required)

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

Grid: Gutters (Optional)

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.

Grid: Hide & Show (Optional)

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.

Grid: Change Order (Optional)

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.

Grid: Example Code (Optional)

The grid above was created by the code below. Resize your window to watch the grid respond to different breakpoint settings.

<div class="clearfix bg-gray-light p-tn-trl-18 m-tn-b-36">
	<div class="row m-tn-b-18 m-tn-rl-neg-6">
		<div class="col-tn-1of1 p-tn-rl-6">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
	</div>

	<!-- The right/left negative margins compensate 
		 for the padding on the first and last column. -->
	<div class="row m-tn-b-18 m-tn-rl-neg-6 m-lg-rl-neg-12">
		<div class="col-tn-1of2 p-tn-rl-6 p-lg-rl-12">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="col-tn-1of2 p-tn-rl-6 p-lg-rl-12">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
	</div>

	<!-- The display classes hide and show the third column. -->
	<div class="row m-tn-b-18 m-tn-rl-neg-2 m-sm-rl-neg-4">
		<div class="col-tn-1of2 p-tn-rbl-3 col-sm-1of3 p-sm-rl-4">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="col-tn-1of2 p-tn-rbl-3 col-sm-1of3 p-sm-rl-4">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="dis-tn-none dis-sm-inline-block col-sm-1of3 p-sm-rl-4">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
	</div>

	<!-- The offset class centers the first three columns. -->
	<div class="row m-tn-b-18 m-tn-rl-neg-9 m-md-rl-neg-18">
		<div class="col-tn-1of4 off-tn-1of8 p-tn-rl-9 off-md-0 p-md-rl-18 p-md-rl-18">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="col-tn-1of4 p-tn-rl-9 p-md-rl-18">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="col-tn-1of4 p-tn-rl-9 p-md-rl-18">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
		<div class="dis-tn-none dis-md-inline-block col-md-1of4 p-md-rl-18">
			<div class="bg-gray-lightest p-tn-tb-36"></div>
		</div>
	</div>
</div>