UDX Example: udx.ui.gallery

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<section class="row">
  <article class="col-md-12">
    <h2>Cat Gallery</h2>
    <p>Basic gallery that applies isotope.</p>
    <div class="example" data-requires="udx.ui.gallery" data-options="">
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/250" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/290" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/300" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/200" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/300" class="img-responsive img-thumbnail"/>
      <img src="http://placekitten.com/250/300" class="img-responsive img-thumbnail"/>
    </div>
  </article>
</section>

CSS

/* Get Bootstrap */
 @import"//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css";

/* Add spacing around images */
 .img-thumbnail {
    margin: 0.5em;
}