search

mhulse / wiffle

Wiffle = ((640 - 3x) / 4): A "responsive" grid system based on Frameless, OOCSS Grids and Standard Advertising Units.
http://mhulse.github.io/wiffle/demos/
Apache License 2.0
3 stars 1 forks source link

Allow cols to have a min-height? (i.e. really need push/pull/offset classes) #22

Open mhulse opened 11 years ago

mhulse commented 11 years ago

I've been adding   to cols I want empty. Should I add some sort of "push" class or allow the cols to be of a certain min-height? Need to investigate.

mhulse commented 11 years ago

Actually, I think offset classes are the way to go. Will need one for every breakpoint. Shouldn't be too complicated to do.

mhulse commented 11 years ago

Columnal

/* spacing for before column */
.pre_1 {padding-left: 8.65%;} /* 4.85 + 3.8 */
.pre_2 {padding-left: 17.3%;} /* 13.5 + 3.8 */
.pre_3 {padding-left: 25.95%;} /* 22.15 + 3.8 */
.pre_4 {padding-left: 34.6%;} /* 30.8 + 3.8 */
.pre_5 {padding-left: 43.25%;} /* 39.45 + 3.8 */
.pre_6 {padding-left: 51.9%;} /* 48.1 + 3.8 */
.pre_7 {padding-left: 60.55%;} /* 56.75 + 3.8 */
.pre_8 {padding-left: 69.2%;} /* 65.4 + 3.8 */
.pre_9 {padding-left: 77.85%;} /* 74.05 + 3.8 */
.pre_10 {padding-left: 86.5%;} /* 82.7 + 3.8 */
.pre_11 {padding-left: 95.15%;} /* 91.35 + 3.8 */

/* spacing for after column */
.suf_1 {padding-right: 8.65%;}
.suf_2 {padding-right: 17.3%;}
.suf_3 {padding-right: 25.95%}
.suf_4 {padding-right: 34.6%;}
.suf_5 {padding-right: 43.25%;}
.suf_6 {padding-right: 51.9%;}
.suf_7 {padding-right: 60.55%;}
.suf_8 {padding-right: 69.2%;}
.suf_9 {padding-right: 77.85%;}
.suf_10 {padding-right: 86.5%;}
.suf_11 {padding-right: 95.15%;}

/* COLUMNAL - MOBILE
///////////////////////////////////////////// */

@media handheld, only screen and (max-width: 767px) {
    /* kill prefixes and suffixes, otherwise 1-column version breaks */
    .pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11 {padding-left: 0;}
    .suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11 {padding-right: 0;}
}

... and the HTML:

<div class="container test">
  <div class="row">
  <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
    <div class="pre_1 col_1">pre_1</div>
    <div class="pre_2 col_1">pre_2</div>
    <div class="pre_3 col_1">pre_3</div>
    <div class="col_1">&nbsp;</div>
    <div class="col_1">&nbsp;</div>
    <div class="col_1 omega">&nbsp;</div>
  </div>
</div><!--class="container" -->

<div class="container test">
  <div class="row">
  <div class="col_12 title"><h4>prefixes & 1-column</h4></div>
    <div class="pre_4 col_1">pre_4</div>
    <div class="pre_5 col_1">pre_5</div>
    <div class="col_1 omega">&nbsp;</div>

  </div>
</div><!--class="container" -->

Demo page here. Not really sure why they're using padding instead of margins.

mhulse commented 11 years ago

Foundation

Offset:

.row .offset-by-one { margin-left: 8.33333%; }

.row .offset-by-two { margin-left: 16.66667%; }

.row .offset-by-three { margin-left: 25%; }

.row .offset-by-four { margin-left: 33.33333%; }

.row .offset-by-five { margin-left: 41.66667%; }

.row .offset-by-six { margin-left: 50%; }

.row .offset-by-seven { margin-left: 58.33333%; }

.row .offset-by-eight { margin-left: 66.66667%; }

.row .offset-by-nine { margin-left: 75%; }

.row .offset-by-ten { margin-left: 83.33333%; }

... and the HTML:


<div class="row">
  <div class="one columns">
    .one
  </div>
  <div class="eleven columns">
    .eleven.columns
  </div>
</div>
<div class="row">
  <div class="one columns">
    .one
  </div>
  <div class="ten columns offset-by-one">
    .ten.columns.offset-by-one
  </div>
</div>
<div class="row">
  <div class="one columns">
    .one
  </div>
  <div class="nine columns offset-by-two">
    .nine.columns.offset-by-two
  </div>
</div>
<div class="row">
  <div class="one columns">
    .one
  </div>
  <div class="eight columns offset-by-three">
    .eight.columns.offset-by-three
  </div>
</div>
<div class="row">
  <div class="seven columns offset-by-five">
    .seven.columns.offset-by-five
  </div>
</div>
<div class="row">
  <div class="six columns offset-by-six">
    .six.columns.offset-by-six
  </div>
</div>
<div class="row">
  <div class="five columns offset-by-seven">
    .five.columns.offset-by-seven
  </div>
</div>
<div class="row">
  <div class="four columns offset-by-eight">
    .four.columns.offset-by-eight
  </div>
</div>

Push/Pull:

.push-two { left: 16.66667%; }

.pull-two { right: 16.66667%; }

.push-three { left: 25%; }

.pull-three { right: 25%; }

.push-four { left: 33.33333%; }

.pull-four { right: 33.33333%; }

.push-five { left: 41.66667%; }

.pull-five { right: 41.66667%; }

.push-six { left: 50%; }

.pull-six { right: 50%; }

.push-seven { left: 58.33333%; }

.pull-seven { right: 58.33333%; }

.push-eight { left: 66.66667%; }

.pull-eight { right: 66.66667%; }

.push-nine { left: 75%; }

.pull-nine { right: 75%; }

.push-ten { left: 83.33333%; }

.pull-ten { right: 83.33333%; }

... and the HTML:

<div class="row">
  <div class="two columns push-ten">
    .two.columns
  </div>
  <div class="ten columns pull-two">
    .ten.columns (last)
  </div>
</div>
<div class="row">
  <div class="three columns push-nine">
    .three.columns
  </div>
  <div class="nine columns pull-three">
    .nine.columns (last)
  </div>
</div>
<div class="row">
  <div class="four columns push-eight">
    .four.columns
  </div>
  <div class="eight columns pull-four">
    .eight.columns (last)
  </div>
</div>
<div class="row">
  <div class="five columns push-seven">
    .five.columns
  </div>
  <div class="seven columns pull-five">
    .seven.columns (last)
  </div>
</div>
<div class="row">
  <div class="six columns push-six">
    .six.columns
  </div>
  <div class="six columns pull-six">
    .six.columns (last)
  </div>
</div>
<div class="row">
  <div class="seven columns push-five">
    .seven.columns
  </div>
  <div class="five columns pull-seven">
    .five.columns (last)
  </div>
</div>
<div class="row">
  <div class="eight columns push-four">
    .eight.columns
  </div>
  <div class="four columns pull-eight">
    .four.columns (last)
  </div>
</div>
<div class="row">
  <div class="nine columns push-three">
    .nine.columns
  </div>
  <div class="three columns pull-nine">
    .three.columns (last)
  </div>
</div>
<div class="row">
  <div class="ten columns push-two">
    .ten.columns
  </div>
  <div class="two columns pull-ten">
    .two (last)
  </div>
</div>
mhulse commented 11 years ago

[960.gs]()

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15 {
  position: relative;
}

/* `Push Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .push_3,
.container_16 .push_4 {
  left: 240px;
}

.container_12 .push_6,
.container_16 .push_8 {
  left: 480px;
}

.container_12 .push_9,
.container_16 .push_12 {
  left: 720px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Push Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .push_1 {
  left: 60px;
}

.container_16 .push_2 {
  left: 120px;
}

.container_16 .push_3 {
  left: 180px;
}

.container_16 .push_5 {
  left: 300px;
}

.container_16 .push_6 {
  left: 360px;
}

.container_16 .push_7 {
  left: 420px;
}

.container_16 .push_9 {
  left: 540px;
}

.container_16 .push_10 {
  left: 600px;
}

.container_16 .push_11 {
  left: 660px;
}

.container_16 .push_13 {
  left: 780px;
}

.container_16 .push_14 {
  left: 840px;
}

.container_16 .push_15 {
  left: 900px;
}

/* `Pull Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_3,
.container_16 .pull_4 {
  left: -240px;
}

.container_12 .pull_6,
.container_16 .pull_8 {
  left: -480px;
}

.container_12 .pull_9,
.container_16 .pull_12 {
  left: -720px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Pull Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .pull_1 {
  left: -60px;
}

.container_16 .pull_2 {
  left: -120px;
}

.container_16 .pull_3 {
  left: -180px;
}

.container_16 .pull_5 {
  left: -300px;
}

.container_16 .pull_6 {
  left: -360px;
}

.container_16 .pull_7 {
  left: -420px;
}

.container_16 .pull_9 {
  left: -540px;
}

.container_16 .pull_10 {
  left: -600px;
}

.container_16 .pull_11 {
  left: -660px;
}

.container_16 .pull_13 {
  left: -780px;
}

.container_16 .pull_14 {
  left: -840px;
}

.container_16 .pull_15 {
  left: -900px;
}
/* `Prefix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_3,
.container_16 .prefix_4 {
  padding-left: 240px;
}

.container_12 .prefix_6,
.container_16 .prefix_8 {
  padding-left: 480px;
}

.container_12 .prefix_9,
.container_16 .prefix_12 {
  padding-left: 720px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Prefix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .prefix_1 {
  padding-left: 60px;
}

.container_16 .prefix_2 {
  padding-left: 120px;
}

.container_16 .prefix_3 {
  padding-left: 180px;
}

.container_16 .prefix_5 {
  padding-left: 300px;
}

.container_16 .prefix_6 {
  padding-left: 360px;
}

.container_16 .prefix_7 {
  padding-left: 420px;
}

.container_16 .prefix_9 {
  padding-left: 540px;
}

.container_16 .prefix_10 {
  padding-left: 600px;
}

.container_16 .prefix_11 {
  padding-left: 660px;
}

.container_16 .prefix_13 {
  padding-left: 780px;
}

.container_16 .prefix_14 {
  padding-left: 840px;
}

.container_16 .prefix_15 {
  padding-left: 900px;
}

/* `Suffix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_3,
.container_16 .suffix_4 {
  padding-right: 240px;
}

.container_12 .suffix_6,
.container_16 .suffix_8 {
  padding-right: 480px;
}

.container_12 .suffix_9,
.container_16 .suffix_12 {
  padding-right: 720px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Suffix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .suffix_1 {
  padding-right: 60px;
}

.container_16 .suffix_2 {
  padding-right: 120px;
}

.container_16 .suffix_3 {
  padding-right: 180px;
}

.container_16 .suffix_5 {
  padding-right: 300px;
}

.container_16 .suffix_6 {
  padding-right: 360px;
}

.container_16 .suffix_7 {
  padding-right: 420px;
}

.container_16 .suffix_9 {
  padding-right: 540px;
}

.container_16 .suffix_10 {
  padding-right: 600px;
}

.container_16 .suffix_11 {
  padding-right: 660px;
}

.container_16 .suffix_13 {
  padding-right: 780px;
}

.container_16 .suffix_14 {
  padding-right: 840px;
}

.container_16 .suffix_15 {
  padding-right: 900px;
}

... and here's the whole HTML demo page:

<div class="container_12">
  <h2>
    12 Column Grid
  </h2>
  <div class="grid_12">
    <p>
      940
    </p>
  </div>
  <!-- end .grid_12 -->
  <div class="clear"></div>
  <div class="grid_1">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1 -->
  <div class="grid_11">
    <p>
      860
    </p>
  </div>
  <!-- end .grid_11 -->
  <div class="clear"></div>
  <div class="grid_2">
    <p>
      140
    </p>
  </div>
  <!-- end .grid_2 -->
  <div class="grid_10">
    <p>
      780
    </p>
  </div>
  <!-- end .grid_10 -->
  <div class="clear"></div>
  <div class="grid_3">
    <p>
      220
    </p>
  </div>
  <!-- end .grid_3 -->
  <div class="grid_9">
    <p>
      700
    </p>
  </div>
  <!-- end .grid_9 -->
  <div class="clear"></div>
  <div class="grid_4">
    <p>
      300
    </p>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_8">
    <p>
      620
    </p>
  </div>
  <!-- end .grid_8 -->
  <div class="clear"></div>
  <div class="grid_5">
    <p>
      380
    </p>
  </div>
  <!-- end .grid_5 -->
  <div class="grid_7">
    <p>
      540
    </p>
  </div>
  <!-- end .grid_7 -->
  <div class="clear"></div>
  <div class="grid_6">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="grid_6">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="clear"></div>
  <div class="grid_1 suffix_11">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.suffix_11 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_1 suffix_10">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_1.suffix_10 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_2 suffix_9">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_2.suffix_9 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_3 suffix_8">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_3.suffix_8 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_4 suffix_7">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_4.suffix_7 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_5 suffix_6">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_5.suffix_6 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_6 suffix_5">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_6.suffix_5 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_7 suffix_4">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_7.suffix_4 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_8 suffix_3">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_8.suffix_3 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_9 suffix_2">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_9.suffix_2 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_10 suffix_1">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_10.suffix_1 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_11">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_11 -->
  <div class="clear"></div>
  <div class="grid_6 push_6">
    <div class="grid_1 alpha">
      <p>
        60
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_5 omega">
      <p>
        380
      </p>
    </div>
    <!-- end .grid_5.omega -->
    <div class="clear"></div>
    <div class="grid_3 alpha">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_3.alpha -->
    <div class="grid_3 omega">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_3.omega -->
  </div>
  <!-- end .grid_6.push_6 -->
  <div class="grid_6 pull_6">
    <div class="grid_3 alpha">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_3.alpha -->
    <div class="grid_3 omega">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_3.omega -->
    <div class="clear"></div>
    <div class="grid_1 alpha">
      <p>
        60
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_5 omega">
      <p>
        380
      </p>
    </div>
    <!-- end .grid_5.omega -->
  </div>
  <!-- end .grid_6.pull_6 -->
</div>
<!-- end .container_12 -->
<div class="container_16">
  <h2>
    16 Column Grid
  </h2>
  <div class="grid_16">
    <p>
      940
    </p>
  </div>
  <!-- end .grid_16 -->
  <div class="clear"></div>
  <div class="grid_1">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1 -->
  <div class="grid_15">
    <p>
      880
    </p>
  </div>
  <!-- end .grid_15 -->
  <div class="clear"></div>
  <div class="grid_2">
    <p>
      100
    </p>
  </div>
  <!-- end .grid_2 -->
  <div class="grid_14">
    <p>
      820
    </p>
  </div>
  <!-- end .grid_14 -->
  <div class="clear"></div>
  <div class="grid_3">
    <p>
      160
    </p>
  </div>
  <!-- end .grid_3 -->
  <div class="grid_13">
    <p>
      760
    </p>
  </div>
  <!-- end .grid_13 -->
  <div class="clear"></div>
  <div class="grid_4">
    <p>
      220
    </p>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_12">
    <p>
      700
    </p>
  </div>
  <!-- end .grid_12 -->
  <div class="clear"></div>
  <div class="grid_5">
    <p>
      280
    </p>
  </div>
  <!-- end .grid_5 -->
  <div class="grid_11">
    <p>
      640
    </p>
  </div>
  <!-- end .grid_11 -->
  <div class="clear"></div>
  <div class="grid_6">
    <p>
      340
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="grid_10">
    <p>
      580
    </p>
  </div>
  <!-- end .grid_10 -->
  <div class="clear"></div>
  <div class="grid_7">
    <p>
      400
    </p>
  </div>
  <!-- end .grid_7 -->
  <div class="grid_9">
    <p>
      520
    </p>
  </div>
  <!-- end .grid_9 -->
  <div class="clear"></div>
  <div class="grid_8">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_8 -->
  <div class="grid_8">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_8 -->
  <div class="clear"></div>
  <div class="grid_1 suffix_15">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.suffix_15 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_1 suffix_14">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_1.suffix_14 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_2 suffix_13">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_2.suffix_13 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_3 suffix_12">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_3.suffix_12 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_4 suffix_11">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_4.suffix_11 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_5 suffix_10">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_5.suffix_10 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_6 suffix_9">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_6.suffix_9 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_7 suffix_8">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_7.suffix_8 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_8 suffix_7">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_8.suffix_7 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_9 suffix_6">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_9.suffix_6 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_10 suffix_5">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_10.suffix_5 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_11 suffix_4">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_11.suffix_4 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_12 suffix_3">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_12.suffix_3 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_13 suffix_2">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_13.suffix_2 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_14 suffix_1">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_14.suffix_1 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_15">
    <p>
      40
    </p>
  </div>
  <!-- end .grid_1.prefix_15 -->
  <div class="clear"></div>
  <div class="grid_8 push_8">
    <div class="grid_1 alpha">
      <p>
        40
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_7 omega">
      <p>
        400
      </p>
    </div>
    <!-- end .grid_7.omega -->
    <div class="clear"></div>
    <div class="grid_4 alpha">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_4.alpha -->
    <div class="grid_4 omega">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_4.omega -->
  </div>
  <!-- end .grid_8.push_8 -->
  <div class="grid_8 pull_8">
    <div class="grid_4 alpha">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_4.alpha -->
    <div class="grid_4 omega">
      <p>
        220
      </p>
    </div>
    <!-- end .grid_4.omega -->
    <div class="clear"></div>
    <div class="grid_1 alpha">
      <p>
        40
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_7 omega">
      <p>
        400
      </p>
    </div>
    <!-- end .grid_7.omega -->
  </div>
  <!-- end .grid_8.pull_8 -->
</div>
<!-- end .container_16 -->
mhulse commented 11 years ago

See:

Query about alignment of push-x classes - Google Groups

Need to figure out when to use padding, margins and positioning. Also need to cross-browser test and be aware of how the reverse flow of floats can be affected by these new classes.

mhulse commented 11 years ago

Blueprint

CSS:

/* Add these to a column to append empty cols. */

.append-1 { padding-right: 40px;}
.append-2 { padding-right: 80px;}
.append-3 { padding-right: 120px;}
.append-4 { padding-right: 160px;}
.append-5 { padding-right: 200px;}
.append-6 { padding-right: 240px;}
.append-7 { padding-right: 280px;}
.append-8 { padding-right: 320px;}
.append-9 { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

/* Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
.prepend-4 { padding-left: 160px;}
.prepend-5 { padding-left: 200px;}
.prepend-6 { padding-left: 240px;}
.prepend-7 { padding-left: 280px;}
.prepend-8 { padding-left: 320px;}
.prepend-9 { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-6 { margin-left: -240px; }
.pull-7 { margin-left: -280px; }
.pull-8 { margin-left: -320px; }
.pull-9 { margin-left: -360px; }
.pull-10 { margin-left: -400px; }
.pull-11 { margin-left: -440px; }
.pull-12 { margin-left: -480px; }
.pull-13 { margin-left: -520px; }
.pull-14 { margin-left: -560px; }
.pull-15 { margin-left: -600px; }
.pull-16 { margin-left: -640px; }
.pull-17 { margin-left: -680px; }
.pull-18 { margin-left: -720px; }
.pull-19 { margin-left: -760px; }
.pull-20 { margin-left: -800px; }
.pull-21 { margin-left: -840px; }
.pull-22 { margin-left: -880px; }
.pull-23 { margin-left: -920px; }
.pull-24 { margin-left: -960px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}

HTML:

<div class="span-6 append-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 append-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 append-3 last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 prepend-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 prepend-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 prepend-3 last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<hr>
<div class="span-1 prepend-1"><p>1</p></div>
<div class="span-1 prepend-2"><p>2</p></div>
<div class="span-1 prepend-3"><p>3</p></div>
<div class="span-1 prepend-4"><p>4</p></div>
<div class="span-1 prepend-5"><p>5</p></div>
<div class="span-1 prepend-3 last"><p>3</p></div>
<div class="span-1 append-1"><p>1</p></div>
<div class="span-1 append-2"><p>2</p></div>
<div class="span-1 append-3"><p>3</p></div>
<div class="span-1 append-4"><p>4</p></div>
<div class="span-1 append-5"><p>5</p></div>
<div class="span-1 append-3 last"><p>3</p></div>
<div class="prepend-23 span-1 last"><p>24</p></div>
<div class="prepend-1 span-1"><p>2</p></div>
<div class="prepend-20 span-1 append-1 last"><p>23</p></div>
<div class="span-14 prepend-5 append-5 last">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="span-12">
    <h5>TESTING .PUSH-1 TO .PUSH-5</h5>
    <div class="span-2"><img src="test-small.jpg" class="push-1"></div>
    <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2"><img src="test-small.jpg" class="push-2"></div>
    <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2"><img src="test-small.jpg" class="push-3"></div>
    <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2"><img src="test-small.jpg" class="push-4"></div>
    <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2"><img src="test-small.jpg" class="push-5"></div>
    <div class="span-10 last"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

<div class="span-12 last">
    <h5>TESTING .PULL-1 TO .PULL-5</h5>
    <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2 last"><img src="test-small.jpg" class="top pull-1"></div>
    <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2 last"><img src="test-small.jpg" class="top pull-2"></div>
    <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2 last"><img src="test-small.jpg" class="top pull-3"></div>
    <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2 last"><img src="test-small.jpg" class="top pull-4"></div>
    <div class="span-10"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    <div class="span-2 last"><img src="test-small.jpg" class="top pull-5"></div>
</div>