Filterable portfolio with Shuffle.JS and Bootstrap 3

In this lesson I’ll show you how to build a basic responsive and filterable portfolio powered by Bootstrap 3 and Shuffle.JS.
Shuffle.JS is a free alternative to the popular Isotope plugin.

Final Result:

Our final portfolio
Our final portfolio

Download source files View Demo

Resources used

1. Download Bootstrap 3

Head to Bootstrap 3 and grab a copy. We’ll be using the grid system and a few list styles and paragraph classes.
Download and extract the archive in the folder project.
You’ll now have 3 folders: css, fonts, js. In the css folder add a custom.css file and add custom.js file in the js folder.

Project folder structure
Project folder structure

2. Bootstrap template and Shuffle.js plugin

Create an index.html file and copy & paste the content from Bootstrap’s Basic Template.
We also have to download the Shuffle.js plugin. After you extract the archive, go to the dist folder and copy the jquery.shuffle.modernizr.min to our project js folder.

Before we start coding, we just have to download one more javascript dependecy – jQuery throttle / debounce. Grab the minified file and paste it in our project’s js folder.
If you want, you can combine the minified jQuery throttle / debounce with the minfied shuffle.js and only use one file.

Now we have to add links to the custom.css, custom.js and shuffle.js. We’ll add the css in the head and the js script in the footer.

3. The Filter menu

Right bellow the body, add an h1 heading. To center align the text you can use Bootstrap’s special css class: text-center.

Now it’s time to create the Portfolio section. We need a section element will contain the filter menu and the grid, container div and row div – part of the Bootstrap 3 grid, our filter menu is stored in an unordered list – ul and 4 list items (li) that will hold our menu options.

If you’re using Emmet plugin for your favorite code editor you can easily generate this by expanding the following code with the TAB key or CTRL+E:
section.portfolio>.container>.row>ul.portfolio-sorting.list-inline.text-center>li*4>a[href="#"]

Quickly generate the code with Emmet
Quickly generate the code with Emmet

The list-inline class used in our unordered list is a Bootstrap 3 class that removes the list styling and displays the list items inline. Text-center is another Bootstrap class used to center align the text in the parent container.

Now we have to add a data-group to the links in our filter menu. Data-groups will act as a category, enabling us to filter our portfolio.

4. The Portfolio items and grid

We have to display a list of images that represent the portfolio items. This means that we need an unordered list that will hold our list items.
One list item will have a data-groups that will allow our plug-in to compare the filter menu item with the portfolio item and then filter it. Inside a list item we’ll have a figure element that will hold our image.

A critical element that will allow us to filter our content is the sizer. The sizer will be used by the javascript plugin to find out the dimensions of our element. To add the sizer simply add another list item with the Bootstrap columns that you want to use in your portfolio items design.

5. Adding more items to our portfolio

To easily add pictures, without having to edit them, I used 2 awesome image placeholder services that provide us with free images: Lorempixel and Lorempicsum.
To make sure that our images are responsive, don’t forget to add the Bootstrap 3 class img-responsive to our images.

Here is the final portfolio section, with all the elements added:

6. Adding the CSS

Now we have to style the grid elements. Since we are using the Bootstrap grid system, we don’t need to add special sizing to the items.

7. Adding JavaScript

Now that we finished the HTML and CSS part, it’s time to add functionality to our portfolio. We’ll base our code on the example code provided by the Shuffle.JS plugin in the demos folder.

In the custom.css we’ll begin by initializing the plugin:

Next we have to identify the target items: the grid, the filter menu and the item size.

Here is the final JavaScript code in the custom.js:

The setupFilters function allows us to filter the portfolio by identifying the active filter menu item.

8. Additional HTML & CSS

For easy reference, I added the resources used in this tutorial in the footer. I placed the content inside 3 divs with col-md-4 class.

With Emmet you can quickly generate the HTML code by expanding this line of code: footer>.container>.row>.col-md-4.column*3>h4

Quickly generate footer code with Emmet
Quickly generate footer code with Emmet

Congratulations

You’ve completed this tutorial and learned how to easily create and set-up a filterable grid powered by Bootstrap 3 and Shuffle.JS.
Thanks for reading!

Tags: , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *