Zurb Foundation Sandbox

by waffl

HTML

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.js //cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/normalize.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<div class="row">
    <div class="columns small-3 small-offset-1" data-stellar-ratio="0.25">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-2" data-stellar-ratio="0.5">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-3" data-stellar-ratio="0.75">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-4" data-stellar-ratio="1">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-5" data-stellar-ratio="1.25">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-6" data-stellar-ratio="1.5">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-7" data-stellar-ratio="1.75">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-8" data-stellar-ratio="2">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>
<div class="row">
    <div class="columns small-3 small-offset-9" data-stellar-ratio="2.25">
        <img src="http://placehold.it/300x300/" />
    </div>
</div>

CSS

img {
    width: 300px;
    height: 300px;
}

JavaScript

$(document).foundation();

$.stellar({
    responsive: true
});