Zurb Foundation - Base

by metaxos

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"></script>
<div class="row small-up-12 medium-up-12 large-up-12" data-equalizer>
  <div class="column column-block " data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss</figcaption>
    </figure>
  </div>
  <div class="column column-block " data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss</figcaption>
    </figure>
  </div>
  <div class="column column-block " data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss</figcaption>
    </figure>
  </div>
</div>


<div class="row" data-equalizer>
  <div class="columns small-12 medium-4 large-4" data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss tesss tesss tesss tesss tesss<br>tesss<br>tesss<br>tesss<br>tesss<br>tesss<br>tesss<br>tesss<br>tesss<br></figcaption>
    </figure>
  </div>
  <div class="columns small-12 medium-4 large-4" data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss</figcaption>
    </figure>
  </div>
  <div class="columns small-12 medium-4 large-4" data-equalizer-watch>
    <figure>
      <img src="http://placehold.it/100x100" />
      <figcaption>tesss</figcaption>
    </figure>
  </div>
</div>

CSS

.col-left img:last-child {
  padding-top: 1em;
}

.column {
  background-color: #CCC;
}

.columns {
  background-color: red;
}

JavaScript

$(document).foundation();