Pastie now auto-senses if line-wrap is a bad or good idea. Feedback?
## mark a section (Learn more)
/* `Containers -------------------------------------------------------------*/ .container-12 { width: 960px; 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: 5px; margin-right: 5px; } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) -------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* `Grid >> 12 Columns -----------------------------------------------------*/ .container-12 .grid-1 { width: 70px; } .container-12 .grid-2 { width: 150px; } .container-12 .grid-3 { width: 230px; } .container-12 .grid-4 { width: 310px; } .container-12 .grid-5 { width: 390px; } .container-12 .grid-6 { width: 470px; } .container-12 .grid-7 { width: 550px; } .container-12 .grid-8 { width: 630px; } .container-12 .grid-9 { width: 710px; } .container-12 .grid-10 { width: 790px; } .container-12 .grid-11 { width: 870px; } .container-12 .grid-12 { width: 950px; } /* `Prefix Extra Space >> 12 Columns ---------------------------------------*/ .container-12 .prefix-1 { padding-left: 80px; } .container-12 .prefix-2 { padding-left: 160px; } .container-12 .prefix-3 { padding-left: 240px; } .container-12 .prefix-4 { padding-left: 320px; } .container-12 .prefix-5 { padding-left: 400px; } .container-12 .prefix-6 { padding-left: 480px; } .container-12 .prefix-7 { padding-left: 560px; } .container-12 .prefix-8 { padding-left: 640px; } .container-12 .prefix-9 { padding-left: 720px; } .container-12 .prefix-10 { padding-left: 800px; } .container-12 .prefix-11 { padding-left: 880px; } /* `Suffix Extra Space >> 12 Columns ---------------------------------------*/ .container-12 .suffix-1 { padding-right: 80px; } .container-12 .suffix-2 { padding-right: 160px; } .container-12 .suffix-3 { padding-right: 240px; } .container-12 .suffix-4 { padding-right: 320px; } .container-12 .suffix-5 { padding-right: 400px; } .container-12 .suffix-6 { padding-right: 480px; } .container-12 .suffix-7 { padding-right: 560px; } .container-12 .suffix-8 { padding-right: 640px; } .container-12 .suffix-9 { padding-right: 720px; } .container-12 .suffix-10 { padding-right: 800px; } .container-12 .suffix-11 { padding-right: 880px; } /* `Push Space >> 16 Columns -----------------------------------------------*/ .container-12 .push-1 { left: 80px; } .container-12 .push-2 { left: 160px; } .container-12 .push-3 { left: 240px; } .container-12 .push-4 { left: 320px; } .container-12 .push-5 { left: 400px; } .container-12 .push-6 { left: 480px; } .container-12 .push-7 { left: 560px; } .container-12 .push-8 { left: 640px; } .container-12 .push-9 { left: 720px; } .container-12 .push-10 { left: 800px; } .container-12 .push-11 { left: 880px; } /* `Pull Space >> 12 Columns -----------------------------------------------*/ .container-12 .pull-1 { left: -80px; } .container-12 .pull-2 { left: -160px; } .container-12 .pull-3 { left: -240px; } .container-12 .pull-4 { left: -320px; } .container-12 .pull-5 { left: -400px; } .container-12 .pull-6 { left: -480px; } .container-12 .pull-7 { left: -560px; } .container-12 .pull-8 { left: -640px; } .container-12 .pull-9 { left: -720px; } .container-12 .pull-10 { left: -800px; } .container-12 .pull-11 { left: -880px; } /* `Clear Floated Elements -------------------------------------------------*/ .clear { clear: left; } br.clear { line-height: 0; }
This paste will be private.
From the Design Piracy series on my blog: