You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
6.9 KiB
HTML
257 lines
6.9 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle.js
|
|
bodyClass: home
|
|
extraJS: [ "demos/homepage.js" ]
|
|
includeHeader: true
|
|
prism: true
|
|
---
|
|
<section id="install">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Install<a href="#install"></a></h2>
|
|
</div>
|
|
<div class="col-12@sm">
|
|
<div class="code-block">
|
|
<pre><code class="language">npm install shufflejs --save</code></pre>
|
|
</div>
|
|
<p>Shuffle is also available on bower as <code>shufflejs</code>.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<nav class="col-6@sm" 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">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Example<a href="#demo"></a></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container filter">
|
|
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<input class="filter__search js-shuffle-search" type="search" placeholder="Search..." />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-9@sm">
|
|
<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="col-3@sm">
|
|
<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">
|
|
<div id="grid" class="row shuffle--container shuffle--fluid">
|
|
{% for item in site.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
<div class="col-3@sm col-3@xs shuffle__sizer"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="demos">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Demos<a href="#demos"></a></h2>
|
|
</div>
|
|
</div>
|
|
{% include demo-list.html %}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include features.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="options">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include options.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="usage">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include usage.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="events">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include events.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sorting">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include sorting.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="advanced-filters">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include advanced-filters.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="adding-removing">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include adding-removing.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="public-methods">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include public-methods.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="extra-features">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="dependencies">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Dependencies<a href="#dependencies"></a></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="browsers">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Supported Browsers<a href="#browsers"></a></h2>
|
|
|
|
<ul>
|
|
<li>Chrome</li>
|
|
<li>Firefox</li>
|
|
<li>IE 11+</li>
|
|
<li>Safari</li>
|
|
</ul>
|
|
|
|
<p>Many other browsers will likely work as well and support for others may be added with polyfills for ES5 features. If you require broader browser support, use the most recent <code>v3</code> of Shuffle.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="be-social">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="changelog">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include changelog.html %}
|
|
</div>
|
|
</div>
|
|
</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>
|