Shuffle.js

Showcase your content with Masonry-like layout with Shuffle.js plugin which is integrated into PROFI.

Plugin homepage

zoom_in
zoom_in
zoom_in
zoom_in
zoom_in
zoom_in
zoom_in
zoom_in

How it works

.shuffle-grid-gap-{n} controls gap size between items. .shuffle-grid-cols-{gridBreakpoint}-{n} controls how much items should be shown in each row for gridBreakpoint.

<div class="shuffle-grid shuffle-grid-gap-14 shuffle-grid-cols-1 shuffle-grid-cols-md-2 shuffle-grid-cols-xl-4" id="projects-grid">
    <div class="shuffle-grid-item" data-groups="group-1">...</div>
    <div class="shuffle-grid-item" data-groups="group-2">...</div>
    <div class="shuffle-grid-item" data-groups="group-1,group-2">...</div>
</div>

Filters

Use data-groups attribute for .shuffle-grid-item with comma-separated list of group identifier to use in filters.

<div class="btn-group">
    <!-- please note that data-target and data-toggle attributes are required -->
    <div class="radio-buttons-group" data-toggle="shuffle-grid" data-target="#projects-grid">
        <button class="btn btn-light selected" data-value="all">All</button>
        <button class="btn btn-light" data-value="group-1">Group 1</button>
        <button class="btn btn-light" data-value="group-2">Group 2</button>
    </div>
</div>