## mark a section (Learn more)

@variables { W: 960px; // Container Width C: 12; // Column Count G: 20px; // Gutter Width } /* `Containers -------------------------------------------------------------*/ .container-12 { width: var(W); margin-left: auto; margin-right: auto; } /* `Grid >> Global ---------------------------------------------------------*/ .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { display: inline; position: relative; float: left; margin-left: eval(G/2); margin-right: eval(G/2); } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) -------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* `Grid >> 12 Columns -----------------------------------------------------*/ .container-12 .grid-1 { width: eval(((W/C)* 1)-G); } .container-12 .grid-2 { width: eval(((W/C)* 2)-G); } .container-12 .grid-3 { width: eval(((W/C)* 3)-G); } .container-12 .grid-4 { width: eval(((W/C)* 4)-G); } .container-12 .grid-5 { width: eval(((W/C)* 5)-G); } .container-12 .grid-6 { width: eval(((W/C)* 6)-G); } .container-12 .grid-7 { width: eval(((W/C)* 7)-G); } .container-12 .grid-8 { width: eval(((W/C)* 8)-G); } .container-12 .grid-9 { width: eval(((W/C)* 9)-G); } .container-12 .grid-10 { width: eval(((W/C)*10)-G); } .container-12 .grid-11 { width: eval(((W/C)*11)-G); } .container-12 .grid-12 { width: eval(((W/C)*12)-G); } /* `Prefix Extra Space >> 12 Columns ---------------------------------------*/ .container-12 .prefix-1 { padding-left: eval(((W/C)* 1)); } .container-12 .prefix-2 { padding-left: eval(((W/C)* 2)); } .container-12 .prefix-3 { padding-left: eval(((W/C)* 3)); } .container-12 .prefix-4 { padding-left: eval(((W/C)* 4)); } .container-12 .prefix-5 { padding-left: eval(((W/C)* 5)); } .container-12 .prefix-6 { padding-left: eval(((W/C)* 6)); } .container-12 .prefix-7 { padding-left: eval(((W/C)* 7)); } .container-12 .prefix-8 { padding-left: eval(((W/C)* 8)); } .container-12 .prefix-9 { padding-left: eval(((W/C)* 9)); } .container-12 .prefix-10 { padding-left: eval(((W/C)*10)); } .container-12 .prefix-11 { padding-left: eval(((W/C)*11)); } /* `Suffix Extra Space >> 12 Columns ---------------------------------------*/ .container-12 .suffix-1 { padding-right: eval(((W/C)* 1)); } .container-12 .suffix-2 { padding-right: eval(((W/C)* 2)); } .container-12 .suffix-3 { padding-right: eval(((W/C)* 3)); } .container-12 .suffix-4 { padding-right: eval(((W/C)* 4)); } .container-12 .suffix-5 { padding-right: eval(((W/C)* 5)); } .container-12 .suffix-6 { padding-right: eval(((W/C)* 6)); } .container-12 .suffix-7 { padding-right: eval(((W/C)* 7)); } .container-12 .suffix-8 { padding-right: eval(((W/C)* 8)); } .container-12 .suffix-9 { padding-right: eval(((W/C)* 9)); } .container-12 .suffix-10 { padding-right: eval(((W/C)*10)); } .container-12 .suffix-11 { padding-right: eval(((W/C)*11)); } /* `Push Space >> 16 Columns -----------------------------------------------*/ .container-12 .push-1 { left: eval(((W/C)* 1)); } .container-12 .push-2 { left: eval(((W/C)* 2)); } .container-12 .push-3 { left: eval(((W/C)* 3)); } .container-12 .push-4 { left: eval(((W/C)* 4)); } .container-12 .push-5 { left: eval(((W/C)* 5)); } .container-12 .push-6 { left: eval(((W/C)* 6)); } .container-12 .push-7 { left: eval(((W/C)* 7)); } .container-12 .push-8 { left: eval(((W/C)* 8)); } .container-12 .push-9 { left: eval(((W/C)* 9)); } .container-12 .push-10 { left: eval(((W/C)*10)); } .container-12 .push-11 { left: eval(((W/C)*11)); } /* `Pull Space >> 12 Columns -----------------------------------------------*/ .container-12 .pull-1 { left: -eval(((W/C)* 1)); } .container-12 .pull-2 { left: -eval(((W/C)* 2)); } .container-12 .pull-3 { left: -eval(((W/C)* 3)); } .container-12 .pull-4 { left: -eval(((W/C)* 4)); } .container-12 .pull-5 { left: -eval(((W/C)* 5)); } .container-12 .pull-6 { left: -eval(((W/C)* 6)); } .container-12 .pull-7 { left: -eval(((W/C)* 7)); } .container-12 .pull-8 { left: -eval(((W/C)* 8)); } .container-12 .pull-9 { left: -eval(((W/C)* 9)); } .container-12 .pull-10 { left: -eval(((W/C)*10)); } .container-12 .pull-11 { left: -eval(((W/C)*11)); } /* `Clear Floated Elements -------------------------------------------------*/ .clear { clear: left; } br.clear { line-height: 0; }

This paste will be private.