Isolde

Isolde is a lightweight, flexible, and responsive javascript plugin allow you to filter elements from a "masonry" grid.

Demo

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

1. Create links (a, div, etc.) that have the attribute data-isolde-link with an identification value corresponding to a family (ex: food, development, etc.).
2. Wrap your items with blocks (li, div, etc.) that have the attribute data-isolde-el with an identification value corresponding to their family.
3. Wrap your blocks with a container (ul, div, etc.) that have a className class="isolde-default" and an id id="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>

Documentation

Doc

License

MIT