Combine-layout: Example B

Zurb Foundation w/ combine-layout

by phloe

HTML

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<div class="header">
    <h1>Combine-layout: Example B</h1><h2><small>Zurb Foundation w/ combine-layout</small></h2>
</div>

<ol class="row">
    <li class="small-12 large-8 break-small-large columns">
        <div class="panel">
            <h2>Story 1</h2>
            
            <p>Integer dui massa, pellentesque non hendrerit viverra, imperdiet a diam. Nam sit amet blandit diam.</p>
            <p><a class="button radius" href="#" role="button">Read more</a></p>
        </div>
    </li>
    <li class="small-6 medium-4 columns">
        <div class="item">
            <h4>Story 2</h4>
            
            <p>Donec sit amet convallis urna.</p>
            <p><a href="#" role="button">Read more</a></p>
        </div>
    </li>
    <li class="small-6 medium-4 break-small break-large columns">
        <div class="item">
            <h4>Story 3</h4>
            
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <p><a href="#" role="button">Read more</a></p>
        </div>
    </li>
    <li class="small-12 medium-8 break-medium divide-medium-large columns">
        <div class="item">
            <h4>Story 4</h4>
            
            <p>Fusce tempor, nisi id tincidunt rhoncus, massa diam ornare nisl, id imperdiet nunc nisi a magna.</p>
            <p><a href="#" role="button">Read more</a></p>
        </div>
    </li>
    <li class="small-6 medium-4 columns">
        <div class="item">
            <h4>Story 5</h4>
            
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam rutrum consequat lacus, ac aliquam tellus euismod et.</p>
            <p><a href="#" role="button">Read more</a></p>
        </div>
    </li>
    <li class="small-6 medium-4 columns">
        <div class="item">
            <h4>Story 6</h4>
            
            <p>Nulla felis mi,...

CSS

ol.row {
    list-style-type: none;
    padding: 0;
}

ol.row p {
    font-size: 0.875rem; 
}

.panel {
    margin-bottom: 0;
}

.item {
    background-color: #F8F8F8;
    padding: 10px;
}

.row > * {
    margin-bottom: 20px;
}

.header {
    margin: 20px 0;
    padding: 0 0.9375rem;
    border-bottom: 1px solid #ddd;
}

.header h1, .header h2 {
    margin: 0 auto;
    max-width: 60.625rem;
}


.row {
  font-size: 0;
  text-align: right;
}
.row > * {
  font-size: 1rem;
  text-align: left;
}
@media (max-width: 40em) {
  .break-small + * {
    clear: left;
  }
  .divide-small ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .divide-small ~ [class*=column]:last-child {
    float: none;
  }
}
@media (max-width: 64em) {
  .break-small-medium + * {
    clear: left;
  }
  .divide-small-medium ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .divide-small-medium ~ [class*=column]:last-child {
    float: none;
  }
}

.break-small-large + * {
    clear: left;
}
.divide-small-large ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
}
  .divide-small-large ~ [class*=column]:last-child {
    float: none;
  }

@media (min-width: 40.063em) and (max-width: 64em) {
  .break-medium + * {
    clear: left;
  }
  .divide-medium ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .divide-medium ~ [class*=column]:last-child {
    float: none;
  }
}
@media (min-width: 40.063em) {
  .break-medium-large + * {
    clear: left;
  }
  .divide-medium-large ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .divide-medium-large ~ [class*=column]:last-child {
    float: none;
  }
}
@media (min-width: 64.063em) {
  .break-large + * {
    clear: left;
  }
  .divide-large ~ * {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
  .divide-large ~ [class*=column]:last-child {
    float: none;
  }
}