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-linkwith 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-elwith 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>
1.9k Dec 27, 2022
8 Jun 9, 2022
1 May 20, 2022
17 Sep 24, 2022
5 Oct 28, 2022
2 Feb 4, 2022
343 Dec 4, 2022
5 Sep 7, 2022
2.6k Jan 9, 2023
113 Dec 19, 2022