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.
273 lines
7.2 KiB
HTML
273 lines
7.2 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle.js
|
|
bodyClass: home
|
|
extraJS: [ "demos/homepage.js", "animated-favicon.js" ]
|
|
includeHeader: true
|
|
prism: true
|
|
---
|
|
<section id="install">
|
|
<div class="container">
|
|
<div class="row">
|
|
{% include install.html %}
|
|
</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">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-4@sm col-3@md">
|
|
<div class="filters-group">
|
|
<label for="filters-search-input" class="filter-label">Search</label>
|
|
<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div class="col-12@sm filters-group-wrap">
|
|
<div class="filters-group">
|
|
<p class="filter-label">Filter</p>
|
|
<div class="btn-group filter-options">
|
|
<button class="btn btn--primary" data-group="space">Space</button>
|
|
<button class="btn btn--primary" data-group="nature">Nature</button>
|
|
<button class="btn btn--primary" data-group="animal">Animal</button>
|
|
<button class="btn btn--primary" data-group="city">City</button>
|
|
</div>
|
|
</div>
|
|
<fieldset class="filters-group">
|
|
<legend class="filter-label">Sort</legend>
|
|
<div class="btn-group sort-options">
|
|
<label class="btn active">
|
|
<input type="radio" name="sort-value" value="dom" /> Default
|
|
</label>
|
|
<label class="btn">
|
|
<input type="radio" name="sort-value" value="title" /> Title
|
|
</label>
|
|
<label class="btn">
|
|
<input type="radio" name="sort-value" value="date-created" /> Date Created
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div id="grid" class="row my-shuffle-container">
|
|
{% for item in site.data.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
<div class="col-1@sm col-1@xs my-sizer-element"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-6@xs">
|
|
<p class="demo-link-container demo-link-container--external"><a href="https://codepen.io/Vestride/pen/ZVWmMX" target="_blank" rel="noopener">Open in CodePen</a></p>
|
|
</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="filters">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include filters.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="sorting">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include sorting.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="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="custom-styles">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
{% include custom-styles.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" rel="noopener" href="http://packery.metafizzy.co/">packery</a> or <a target="_blank" rel="noopener" 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>
|
|
<p>Shuffle's <a href="https://github.com/Vestride/Shuffle/blob/master/package.json">dependencies</a> are bundled with the dist file.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="supported-browsers">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Supported Browsers<a href="#supported-browsers"></a></h2>
|
|
|
|
<ul>
|
|
<li>Chrome</li>
|
|
<li>Firefox</li>
|
|
<li>Edge</li>
|
|
<li>Safari</li>
|
|
</ul>
|
|
|
|
<p>If you still need to support IE 11, you can use Shuffle v5.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="share">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Share<a href="#share"></a></h2>
|
|
<div>
|
|
<a href="https://www.buymeacoffee.com/glen.cheney" target="_blank" style="display:inline-block;">
|
|
<img loading="lazy" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 160px !important;" />
|
|
</a>
|
|
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=Vestride&repo=Shuffle&type=star&size=large" frameborder="0" scrolling="0" width="76px" height="30px" title="Star this repository on GitHub"></iframe>
|
|
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Vestride" data-size="large">Tweet</a>
|
|
</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>
|
|
|
|
<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');
|
|
</script>
|