index.html

---
layout: default
title: Shuffle.js
bodyClass: home
extraJS: [ "demos/homepage.js" ]
includeHeader: true
prism: true
---
<section id="install">
  <div class="container-fluid">
    <h2>Install<a href="#install"></a></h2>
    <div class="row-fluid">
      <div class="span12">
        <pre><code class="language">bower install shufflejs</code></pre>
        <p>Shuffle is also available on NPM as <code>shufflejs</code>.</p>
      </div>
    </div>
    <div class="row-fluid">
      <nav class="span6" role="secondary">
        <a href="https://github.com/Vestride/Shuffle">View the GitHub repository</a>
        <a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
      </nav>
    </div>
  </div>
</section>


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

  <div class="container-fluid filter">

    <div class="row-fluid">
      <input class="filter__search js-shuffle-search" type="search" placeholder="Search..." />
    </div>
    <div class="row-fluid">
      <div class="span9">
        <p class="filter__label">Filter:</p>
        <div class="filter-options btn-group">
          <button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
          <button class="btn btn--warning" data-group="graphics">Graphic Design</button>
          <button class="btn btn--warning" data-group="photography">Photos</button>
          <button class="btn btn--warning" data-group="3d">3D Renders</button>
        </div>
      </div>
      <div class="span3">
        <div class="m-nofloat pull-right">
          <p class="filter__label">Sort:</p>
          <select class="sort-options">
            <option value>Default</option>
            <option value="title">Title</option>
            <option value="date-created">Date Created</option>
          </select>
        </div>
      </div>
    </div>

  </div>

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

<section id="demos">
  <div class="container-fluid">
    <h2>Demos<a href="#demos"></a></h2>
    {% include demo-list.html %}
  </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="adding-removing">
  <div class="container-fluid">
    {% include adding-removing.html %}
  </div>
</section>

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

<section id="extra-features">
  <div class="container-fluid">
    <h2>Extra Features<a href="#extra-features"></a></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<a href="#dependencies"></a></h2>

    <ul>
        <li><a target="_blank" href="http://jquery.com">jQuery 1.9+</a></li>
        <li><a target="_blank" href="http://modernizr.com">Modernizr</a>
        <ul>
            <li>In case you aren't already using Modernizr, there is <a href="{{ site.baseurl }}/dist/jquery.shuffle.modernizr.js">a Shuffle.js build which includes Modernizr</a>.</li>
            <li>Shuffle relies on <code>Modernizr.csstransitions</code>, <code>Modernizr.csstransforms</code>, <code>Modernizr.csstransforms3d</code>, and <code>Modernizr.prefixed</code>.</li>
        </ul>
        </li>
    </ul>
  </div>
</section>


<section id="browsers">
  <div class="container-fluid">
    <h2>Supported Browsers<a href="#browsers"></a></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="be-social">
  <div class="container-fluid">
    <h2>Be Social<a href="#be-social"></a></h2>
    <div class="text-center">
      <iframe src="http://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=watch&count=true&size=large" height="30" width="170" frameborder="0" scrolling="0" style="width:170px; height: 30px;" allowTransparency="true" seamless></iframe>

      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://vestride.github.io/Shuffle/" data-via="Vestride" data-size="large">Tweet</a>

      <div class="g-plusone" data-href="http://vestride.github.io/Shuffle/" data-size="standard" data-annotation="bubble"></div>
    </div>
  </div>
</section>


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


{% include credit-jake.html %}

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/platform.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>