combine-layout plus

by phloe

HTML

<div class="combine-layout">
    <div class="span-6 (large)"></div>
    <div class="divide span-2"></div>
    <div class="span-2"></div>
    <div class="span-2"></div>
    <div class="break span-2"></div>
    <div class="span-2"></div>
    <div class="span-2"></div>
    <div class="break span-2"></div>
    <div class="span-2"></div>
    <div class="span-2 (medium)"></div>
    <div class="span-8 (small) divide"></div>
    <div class="break span-4 (small)"></div>
    <div class="span-4 (small)"></div>
    <div class="break span-8 (small)"></div>
    <div class="divide span-4 (medium)"></div>
    <div class="break span-4 (medium)"></div>
    <div class="span-6 (large) divide"></div>
    <div class="divide span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
</div>

<div class="combine-layout">
    <div class="span-8 (small)"></div>
    <div class="break span-4 (small)"></div>
    <div class="span-4 (small)"></div>
    <div class="break span-8 (small)"></div>
    <div class="divide span-4 (medium)"></div>
    <div class="break span-4 (medium)"></div>
</div>

<div class="combine-layout">
    <div class="span-6 (large)"></div>
    <div class="divide span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
</div>

<div class="combine-layout">
    <div class="span-6 (large)"></div>
    <div class="divide span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
    <div class="break span-3"></div>
</div>

CSS

.combine-layout {
    text-align: right; /* align inline-blocks right */
    font-size: 0; /* make sure whitespace between inline-blocks doesn't ruin the layout */
}
.combine-layout:after {
    /* clear those floats */
    display: table;
    clear: both;
    content: " ";
}
.combine-layout > *,
.combine-layout > .divide ~ .divide,
.combine-layout > .divide ~ .divide ~ * {
    float: left; /* float blocks by default */
    text-align: left; /* reset text-align right */
    font-size: 16px; /* reset font-size to something sane */
}
.combine-layout > .break {
    clear: left; /* make sure floated blocks start new row with .break */
}
.combine-layout > .divide,
.combine-layout > .divide ~ *,
.combine-layout > .divide ~ .divide ~ .divide,
.combine-layout > .divide ~ .divide ~ .divide ~ *{
    /* start new pseudo column by switching from floated blocks to inline-blocks */
    display: inline-block; /* duh */
    vertical-align: top; /* make sure blocks align at top */
    float: none; /* reset float */
}

.combine-layout > .divide.break,
.combine-layout > .divide ~ .break,
.combine-layout > .divide ~ .divide ~ .divide.break,
.combine-layout > .divide ~ .divide ~ .divide ~ .break,{
    clear: none; /* reset .break occurring after .divide */
}

.span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-12 {
    -webkit-box-sizing: border-box; /* good old border-box */
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}
.span-2 {
    width: 16.6666666666%;
}
.span-3 {
    width: 25%;
}
.span-4 {
    width: 33.3333333333%;
}
.span-5 {
    width: 41.6666666666%;
}
.span-6 {
    width: 50%;
}
.span-7 {
    width: 58.3333333333%;
}
.span-8 {
    width: 66.6666666666%;
}
.span-9 {
    width: 75%;
}
.span-10 {
    width: 83.3333333333%;
}
.span-12 {
    width: 100%;
}

.combine-layout {
    counter-reset: items;
    background-color: #08c8ff;
    padding:...