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.
71 lines
2.3 KiB
HTML
71 lines
2.3 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle Adaptive Demo
|
|
description: A responsive demo using the adaptive Twitter Bootstrap grid with compound filtering
|
|
image: /demos/adaptive.jpg
|
|
extraJS: [ "demos/gallery.js" ]
|
|
extraCSS: [ "/css/gallery.css" ]
|
|
---
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<h2 class="col-12@sm">Adaptive Layout with Compound Filters</h2>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="gallery container">
|
|
|
|
<div class="filter-options row">
|
|
|
|
<div class="col-6@sm">
|
|
<div class="filter-group filter--colors js-colors">
|
|
<h5 class="filter__label">Colors</h5>
|
|
<button class="btn btn--go" data-filter-value="green"><span class="visuallyhidden">Green</span></button>
|
|
<button class="btn btn--primary" data-filter-value="blue"><span class="visuallyhidden">Blue</span></button>
|
|
<button class="btn btn--danger" data-filter-value="red"><span class="visuallyhidden">Red</span></button>
|
|
<button class="btn btn--warning" data-filter-value="orange"><span class="visuallyhidden">Orange</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6@sm">
|
|
<div class="filter-group filter--shapes js-shapes">
|
|
<h5 class="filter-group__label">Shapes</h5>
|
|
<span class="ib">
|
|
<input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
|
|
</span>
|
|
<span class="ib">
|
|
<input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="shape-up js-shuffle">
|
|
{% for shape in site.shapes %}
|
|
<div class="col-3@sm shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}">
|
|
<div class="keep-ratio">
|
|
<div class="shape__inner">
|
|
<div class="shape__space">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<div class="container">
|
|
<h2>Shuffle.js</h2>
|
|
<p>{{ site.longDescription }}</p>
|
|
</div>
|
|
</section>
|