Vestride_Shuffle/index.html

---
layout: default
title: jQuery Shuffle Plugin
bodyClass: home
extraJS: [ "homepage.js" ]
---
<header class="container-fluid">
  <div class="row-fluid">
    <div class="span7">
      <h1>Shuffle</h1>
      <p>Categorize, sort, and filter a responsive grid of items</p>
    </div>
  </div>
</header>

<section id="downloads">
  <div class="container-fluid">
    <h2>Downloads</h2>
    <nav role="secondary">
      <a href="js/jquery.shuffle.js">jquery.shuffle.js</a>
      <a href="js/jquery.shuffle.min.js">jquery.shuffle.min.js</a>
    </nav>
  </div>
</section>


<section id="demo">
  <div class="container-fluid">
    <h2>Example</h2>
  </div>

  <div class="container-fluid filter">
    <div class="row-fluid">
      <p class="filter__label">Filter:</p>
      <div class="filter-options btn-group">
        <button class="btn btn--filter" data-group="wallpaper">Wallpapers</button>
        <button class="btn btn--filter" data-group="graphics">Graphic Design</button>
        <button class="btn btn--filter" data-group="photography">Photography</button>
        <button class="btn btn--filter" data-group="3d">3D Renders</button>
      </div>
    </div>

    <div class="row-fluid">
      <p class="filter__label">Sort:</p>
      <div class="sort-options btn-group">
        <button class="btn btn--sort" data-sort class="active">Default</button>
        <button class="btn btn--sort" data-sort="title">Title</button>
        <button class="btn btn--sort" data-sort="date-created">Date Created</button>
      </div>

      <input class="filter__search js-shuffle-search" type="search" placeholder="Search..." />
    </div>

  </div>

  <div class="container-fluid">
    <div id="grid" class="row-fluid shuffle--container shuffle--fluid">
      {% for item in site.items %}
          {% assign item = item %}
          {% include picture-item.html %}
      {% endfor %}
      <div class="span3 shuffle__sizer"></div>
    </div>
  </div>
</section>

<section id="demos">
  <div class="container-fluid">
    <h2>Other Examples</h2>
    <nav role="primary">
        <a href="{% post_url demos/2013-05-01-basic %}">Basic masonry layout</a>
        <a href="{% post_url demos/2013-05-03-minimal %}">The minimal markup with filters</a>
        <a href="{% post_url demos/2013-05-02-adaptive %}">Twitter bootstrap adaptive masonry with compounded filters</a>
    </nav>
  </div>
</section>

<section id="features">
  <div class="container-fluid">
    {% include features.html %}
  </div>
</section>

<section id="options">
  <div class="container-fluid">
    {% include options.html %}
  </div>
</section>

<section id="usage">
  <div class="container-fluid">
    {% include usage.html %}
  </div>
</section>

<section id="events">
  <div class="container-fluid">
    {% include events.html %}
  </div>
</section>

<section id="sorting">
  <div class="container-fluid">
    {% include sorting.html %}
  </div>
</section>

<section id="advanced-filters">
  <div class="container-fluid">
    {% include advanced-filters.html %}
  </div>
</section>

<section id="extra-features">
  <div class="container-fluid">
    <h2>Extra Features</h2>

    <p>Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into <a target="_blank" href="http://packery.metafizzy.co/">packery</a> or <a target="_blank" href="http://isotope.metafizzy.co/">isotope</a>.</p>
  </div>
</section>

<section id="dependencies">
  <div class="container-fluid">
    <h2>Dependencies</h2>

    <ul>
        <li><a target="_blank" href="http://jquery.com">jQuery</a></li>
        <li><a target="_blank" href="http://modernizr.com">Modernizr</a>
        <ul>
            <li>A custom Modernizr build has been included with the plugin.</li>
            <li>If you already have Modernizr on your site, you may delete it.</li>
            <li>If you don't know what Modernizr is, leave it!</li>
        </ul>
        </li>
    </ul>
  </div>
</section>


<section id="browsers">
  <div class="container-fluid">
    <h2>Supported Browsers</h2>

    <ul>
        <li>Chrome</li>
        <li>Firefox</li>
        <li>IE 7+</li>
        <li>Opera</li>
        <li>Safari</li>
    </ul>

    <p>
        Browsers that don't support CSS transitions and transforms <strong>*cough*</strong> IE &lt;= 9 <strong>*cough*</strong> will see a less cool, javascript based version of the effect.
    </p>
  </div>
</section>

<section id="links">
  <div class="container-fluid">
    <h2>Links</h2>

    <ul>
        <li><a href="https://github.com/Vestride/Shuffle">GitHub Repo</a></li>
        <li><a href="http://isotope.metafizzy.co/">Inspired by Isotope</a></li>
        <li><a href="http://glencheney.com">Me</a></li>
    </ul>
  </div>
</section>


<section id="changelog">
  <div class="container-fluid">
    {% include changelog.html %}
  </div>
</section>