The template uses the awesome isotope JS script to handle layouts and filtering of certain elements. Much like other elements of the template, we have made isotope very simlpe to work with and you control the setup of each isotope area with easy to understand data attributes. Lets take a look at the typical markup used for an isotope grid.
<div class="isotope-wrapper">
<div class="isotope-filter-wrapper text-center mb-5">
<a href="#" class="btn btn-transparent-black mb-15 mb-sm-0 btn-circled" data-filter="*">All</a>
<a href="#" class="btn btn-white btn-circled mb-15 mb-sm-0 ml-2" data-filter=".photography">Case Studies</a>
<a href="#" class="btn btn-white btn-circled mb-15 mb-sm-0 ml-2" data-filter=".video">Media Pieces</a>
<a href="#" class="btn btn-white btn-circled mb-15 mb-sm-0 ml-2" data-filter=".design">Web Design</a>
</div>
<div class="row" data-isotope='{ "itemSelector": ".col-lg-4", "masonry": { "columnWidth": ".grid-sizer" } }'>
<div class="grid-sizer col-lg-4 col-sm-6 col-md-4 mb-30 photography">
ITEM HERE
</div>
<div class="col-lg-4 col-sm-6 col-md-4 mb-30 photography">
ITEM HERE
</div
</div>
</div>
So first of all you will need to wrap each instance of isotope in a div with the class “isotope-wrapper” – from there you can add filters like you see above or you can go ahead and create a grid without filters by creating a row with the custom attribute “data-isotope” – you can then pass on your configuration within the attribute and the template will do the rest.
The key part is to tell isotope what elements to target via
"itemSelector": ".col-lg-4",
You will also need at least 1 item in your grid with the class “grid-sizer” as this is how isotope determines how wide each item should be.
For more on using Isotope, please see the scripts documentation.
