Building a Responsive Portfolio with UIkit

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.

Continue reading this article on SitePoint

Hi, thank you for the clear description.
Do you know if it is possible to set items to belong to more than 1 filter? Let’s say you add a filter “white” and “have a colour”. For the last I want to show both geen and blue but not white … hope you get my drift.
I couldn’t find it in the Uikit docs.

Regards,
Patrick

Hi Patrick,

As far as I know, you can’t use more than 1 filter for an item, because if you do so, only the first one is applied and the next one is ignored. But if I’ve understood you correctly for the effect you want to achieve, just add a “have a colour” filter for each coloured item and a “white” filter for your white items. Unfortunately, set in that way, you won’t be able to filter the items by individual colour.

Hi Kensho,

I guess I’m looking more at a tagging function where each item can have multiple tags. Think Uikit doesn’t have this solution (yet). Thanks for teh response!

Hi, you can have multiple tags for each item. Just separate them by comma. For example data-uk-filter="tag-a,tag-b".

There is an extension for Joomla and WordPress called Widgetkit which makes use of the UIkit dynamic grid. You can see an example of a gallery with multiple tags here.

Hey Jack123
OMG! How silly of me :smile: It’s so simple, but when I tried to use multiple filters I just forgot to put a comma as you mention. Big thanks for the info.

Hahaha, sometimes we just think too complicated. I thought it worked like classes so it never crossed my mind to add comma’s :smile:
Thanks Jack!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.