isolde
v1.1.6
Published
A javascript plugin to filter elements from a masonry grid.
Downloads
21
Readme
Isolde
Isolde is a lightweight, flexible, and responsive javascript plugin allow you to filter elements from a "masonry" grid.
Quick start
Install
This package can be installed with:
npm install isolde
Or download the latest release.
Load
import isolde from 'isolde';
import 'isolde/dist/isolde.min.css';
const ijs = new isolde();
Usage
- Create links (a, div, etc.) that have the attribute
data-isolde-link
with an identification value corresponding to a family (ex: food, development, etc.). - Wrap your items with blocks (li, div, etc.) that have the attribute
data-isolde-el
with an identification value corresponding to their family. - Wrap your blocks with a container (ul, div, etc.) that have a className
class="isolde-default"
and an idid="isolde"
.
<!-- 1st step -->
<ul>
<li>
<a data-isolde-link="all"> [...] </a>
</li>
<li>
<a data-isolde-link="food"> [...] </a>
</li>
<li>
<a data-isolde-link="development"> [...] </a>
</li>
</ul>
<!-- 3st step -->
<div id="isolde" class="isolde-default">
<!-- 2nd step -->
<div data-isolde-el="food"> [...] </div>
<div data-isolde-el="development"> [...] </div>
<div data-isolde-el="development"> [...] </div>
</div>