Originally published at: http://www.sitepoint.com/building-responsive-portfolio-uikit/
There are many tools to help you create a good looking and functional portfolio with filtering and sorting options. Some examples are Masonry, Isotope, MixItUp, and so on.
Some of these tools can’t be used for commercial projects unless you purchase a commercial license. And while there are other options for commercial use, these can bring an additional layer of complexity and code inconsistency. For example, if you use Bootstrap as your front-end framework and Masonry as your portfolio builder plugin, it will require some extra effort to make the work seamlessly.
Wouldn’t it be great if there was portfolio building functionality built right in to Bootstrap? Well… Bootstrap doesn’t offer such, but UIkit does!
UIkit’s Dynamic Grid
UIkit is feature-rich and has components that you can’t find in other popular frameworks. One such component is called Dynamic Grid, and can be used in conjunction with another framework’s components to create a fully functional portfolio. And that’s exactly what we’re going to do in the rest of this tutorial.
Setting Up Our Project
To create the portfolio, we’ll need the following resources:
- UIkit’s CSS, including the CSS for the Sticky component
- jQuery
- UIkit’s primary JavaScript
- UIkit’s JavaScript for the Dynamic Grid and Sticky components
It’s important to note here that the regular Grid component and Dynamic Grid have the same file name: grid.js
or grid.min.js
. But they are put in different folders, “core” and “components”, respectively.
Creating Individual Portfolio Items
After we set the stage, let’s continue by creating a container to hold and center the portfolio’s items.
<div class="uk-container uk-container-center uk-margin-top"> <div class="uk-grid-width-small-1-1 uk-grid-width-medium-1-4" data-uk-grid="{gutter: 20}"> <!-- content... --> </div> </div>
We use a div
element with uk-container
and uk-container-center
classes. We also use uk-margin-top
to add some space above the content. Inside the container we create a grid with some gutter between the columns, which we specify using the data-uk-grid="{gutter: 20}"
attribute.