Author: | TristanBlg |
---|---|
Views Total: | 3,149 views |
Official Page: | Go to website |
Last Update: | June 11, 2021 |
License: | MIT |
Preview:

Description:
Isolde is a lightweight and easy-to-use JavaScript plugin to filter through a set of grid items with a subtle shuffle effect.
How to use it:
1. Install & download the Isolde library with NPM.
# NPM $ npm i isolde --save
2. Import the Isolde.
import isolde from 'isolde'; import 'isolde/dist/isolde.min.css';
// OR <link rel="stylesheet" href="./isolde.css"> <script type="module"> import isolde from './isolde.js'; const isoldejs = new isolde(); </script>
2. Categorize your grid items using the ‘data-isolde-el’ attribute:
<div id="isolde" class="isolde-default"> <div data-isolde-el="javascript"> Item 1 </div> <div data-isolde-el="css"> Item 2 </div> <div data-isolde-ell="html"> Item 3 </div> <div data-isolde-el="css"> Item 4 </div> <div data-isolde-el="javascript"> Item 5 </div> ... </div>
3. Create links to filter through the grid items.
<ul> <li> <a data-isolde-link="javascript">JavaScript</a> </li> <li> <a data-isolde-link="css">CSS</a> </li> <li> <a data-isolde-link="html">HTML</a> </li> </ul>
4. Initialize the library and done.
const isoldejs = new isolde();
5. Possible options to customize the masonry grid.
const isoldejs = new isolde({ // parent element parent: document.querySelector('#isolde'), // filter links links: document.querySelectorAll('[data-isolde-link]'), // active class active: 'is-active', // in pixels margin: 20, // for responsive responsive: { 980: { columns: 3 }, 480: { columns: 2 }, 0: { columns: 1 } }, // fade in/out duration fadeDuration:{ in: 300, out: 0 } });
Changelog:
06/11/2021
- Renamed to Isolde.
- Demo Updated
- Doc updated