Building a Responsive Portfolio with UIkit

April 22, 2015

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.

The uk-grid-width-small-1-1 and uk-grid-width-medium-1-4 classes tell the browser to render items differently on different devices. On smart phones the items will be shown stacked as one column, while on tablets and devices with larger screens the items will be placed in four columns.

Now, let’s make a prototype for the portfolio’s items. The next block of code creates a thumbnail with a caption at the bottom:

<div>
  <figure class="uk-thumbnail uk-overlay uk-overlay-hover">
    <img class="uk-overlay-fade" 
         src="http://placehold.it/1200x800/1e90ff/fff&amp;text=A+4">
      <div class="uk-overlay-panel uk-overlay-scale uk-flex 
                  uk-flex-center uk-flex-middle uk-text-center">
        <button class="uk-button" data-uk-modal="{target:'#project-details'}" 
                type="button">VIEW MORE</button>
      </div>
    <figcaption class="uk-thumbnail-caption">My Project</figcaption>
  </figure>
</div>

To create the thumbnail, we use a figure element with a class of uk-thumbnail, and add a caption by adding the uk-thumbnail-caption class to the figcaption element.

Next, we add a “View More” button with a class of uk-button, which will show up on hover.

We need some classes from UIkit’s Overlay component.

First we add uk-overlay and uk-overlay-hover classes to the figure element.
Then we add uk-overlay-fade class to the img element, which initially makes the image appear faded out, and fade it in on hover.
Lastly, we wrap the button with a div element with a uk-overlay-panel class, which serves as a container for the overlay’s content — in our case, a button.

The uk-overlay-scale class forces the button to scale up when hovered. The rest of the classes (uk-flex uk-flex-center uk-flex-middle uk-text-center) are used to align and center the button and the text on it.

You may have noticed the data-uk-modal="{target:'#project-details'}" attribute inside the button element. This is used to reference the modal, which we’re going to create in a moment.

<div id="project-details" class="uk-modal">
  <div class="uk-modal-dialog">
    <a class="uk-modal-close uk-close"></a>
    <div class="uk-modal-header"><h2>My Project Title</h2></div>
    <div class="uk-overflow-container">
      <img src="http://placehold.it/1200x800/1e90ff/fff&amp;text=My+Project+Image">
      <p>Lorem Ipsum...</p>
    </div>
  </div>
</div>

To create a working modal dialog — which will show details about a particular item when the button is clicked — we do the following:

Add a div element with a uk-modal class, and id="project-details" attribute. We create the actual dialog by adding a div element with a class of uk-modal-dialog.
We add an a element with uk-modal-close uk-close classes to create a close button.
To add a header, we use another div element with class uk-modal-header.
Finally, to display the modal’s content in a scrollable container, we add one more div element with a class of uk-overflow-container.

You can copy and paste the prototype code multiple times to create the rest of the portfolio’s items. You can omit the code for the modal dialog, because it’s not essential. The primer from the first item is enough to show the desired functionality and it’s unnecessary to replicate it for the others.

Adding Filtering and Sorting

Next, we want to create a navigation bar with filtering and sorting controls. Put the following code above the markup for the portfolio’s items:

<nav data-uk-sticky id="items" class="uk-navbar">
  <label class="uk-navbar-content uk-hidden-small">Filter:</label>
    <ul class="uk-navbar-nav uk-hidden-small">
      <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li>
      <li data-uk-filter="blue"><a href="#">BLUE</a></li>
      <li data-uk-filter="green"><a href="#">GREEN</a></li>
    </ul>
</nav>

Here’s what is happening in the code above:

We use a nav element with a class of uk-navbar.
We add the data-uk-sticky attribute to make the navigation bar stick to the top when we scroll down the content.
To add text (“Filter:”), we use a label element with uk-navbar-content uk-hidden-small classes. The second class hides the text when viewed on smart phones.
We use a ul element with uk-navbar-nav uk-hidden-small classes to create the filtering controls.
For each control, we use a list item with a data-uk-filter attribute with the corresponding filter’s name. To show all portfolio items without an applied filter, we leave the value of the data-uk-filter attribute empty. Also, to make the “ALL” control chosen by default, we use the uk-active class.

For the sorting controls we do almost the same with some minor differences. Put this markup inside the nav element, after the filtering controls:

<label class="uk-navbar-content uk-hidden-small">Sort:</label>
<ul class="uk-navbar-nav uk-hidden-small">
  <li data-uk-sort="numbers">
    <a href="#">NUMBERS <i class="uk-icon-sort-numeric-asc"></i></a>
  </li>
  <li data-uk-sort="numbers:desc">
    <a href="#">NUMBERS <i class="uk-icon-sort-numeric-desc"></i></a>
  </li>
  <li data-uk-sort="letters">
    <a href="#">LETTERS <i class="uk-icon-sort-alpha-asc"></i></a>
  </li>
  <li data-uk-sort="letters:desc">
    <a href="#">LETTERS <i class="uk-icon-sort-alpha-desc"></i></a>
  </li>
</ul>

To add a category for sorting, we use the data-uk-sort attribute. To make the sorting descending we just append a :desc suffix to the category’s name. We also add some icons to the controls for more aesthetics and usability. As you can see, you can create as many categories as you wish.

And now, to make everything work, we need to do two more things.

Change the settings for our dynamic grid to: data-uk-grid="{gutter: 20, controls: '#items', duration: 500}". This connects the portfolio’s items with the controls by using the id="items" from the nav element, and set the animation duration to 500 ms.
Connect the controls with the portfolio’s items. To do so, for each item-wrapping div we add the following attributes: data-uk-filter (to connect with filter controls), data-numbers and data-letters (to connect with sorting controls).

The code looks like this:

<!-- item-wrapping div -->
<div data-uk-filter="blue" data-numbers="4" data-letters="A">
  <figure class="uk-thumbnail uk-overlay uk-overlay-hover">
    <img class="uk-overlay-fade" 
         src="http://placehold.it/1200x800/1e90ff/fff&amp;text=A+4">
    <!-- etc... -->
  </figure>
</div>

So far so good. But to make the portfolio truly responsive, we’ll add one more ingredient. When the portfolio is viewed on smart phones, instead of the controls, we want only a menu icon to be shown on the navigation bar. And when a user clicks this icon, we want the controls to be displayed inside a dropdown. To do this, we’ll put the following markup inside the nav element – after the controls:

<div data-uk-dropdown="{mode:'click'}">
  <a href="#" class="uk-navbar-toggle uk-visible-small"></a>
  <div class="uk-dropdown uk-dropdown-navbar">
    <!-- where the navbar will go -->
  </div>
</div>

To summarize the above code:

The dropdown is created with a div element with the data-uk-dropdown attribute, whose mode is set to “click”. This means that the dropdown will open on click and not on hover.
We put an a element inside, with a class of uk-navbar-toggle uk-visible-small. This creates the aforementioned menu icon and ensures that it will be visible only on smart phones.
We add another div element with uk-dropdown uk-dropdown-navbar classes.

The last thing to add is the controls. We do this by putting the following markup inside the last div we created:

<ul class="uk-nav uk-nav-navbar">
  <li class="uk-nav-header">Filter:</li>
  <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li>
  <li data-uk-filter="blue"><a href="#">BLUE</a></li>
  <li data-uk-filter="green"><a href="#">GREEN</a></li>
  <li class="uk-nav-divider"></li>
</ul>
<ul class="uk-nav uk-nav-navbar">
  <li class="uk-nav-header">Sort:</li>
  <li data-uk-sort="numbers">
    <a href="#">NUMBERS <i class="uk-icon-sort-numeric-asc"></i></a>
  </li>
  <li data-uk-sort="numbers:desc">
    <a href="#">NUMBERS <i class="uk-icon-sort-numeric-desc"></i>
  </a></li>
  <li data-uk-sort="letters">
    <a href="#">LETTERS <i class="uk-icon-sort-alpha-asc"></i></a>
  </li>
  <li data-uk-sort="letters:desc">
    <a href="#">LETTERS <i class="uk-icon-sort-alpha-desc"></i></a>
  </li>
</ul>

Conclusion and Demo

And here is the final result:

See the Pen Responsive Portfolio with UIkit by SitePoint (@SitePoint) on CodePen.

Note: As mentioned, only the first item in the demo has the modal overlay functionality.

This is only the basic structure and functionality required for a working portfolio page. From here you can add more bells and whistles, particularly to the portfolio, or to the whole page (additional styles, other components, and so on).

For example, if your portfolio is more like an image gallery, you can use the Lightbox and/or Slideshow components. Just have some fun, experiment and see what works best for you.

UIkit’s Dynamic Grid

Setting Up Our Project

Creating Individual Portfolio Items

Adding a Modal Overlay to Each Item

Adding Filtering and Sorting

Conclusion and Demo