Building a Responsive Portfolio with 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.

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.

Frequently Asked Questions on Building a Responsive Portfolio with UIkit

How can I customize the UIkit theme for my portfolio?

UIkit offers a wide range of customization options. You can modify the theme by changing the variables in the custom.less file. This file is located in the themes folder of your UIkit directory. You can change the colors, fonts, and other design elements by modifying the values of these variables. After making your changes, compile the LESS files to CSS using a compiler like Prepros or Koala. Remember to always create a backup of your original files before making any changes.

How can I integrate UIkit with Angular?

UIkit can be integrated with Angular by installing the UIkit package via npm and importing it into your Angular project. You can install UIkit using the command npm install uikit. After installation, import UIkit into your main Angular file (usually main.ts) using the command import UIkit from 'uikit';. You can then use UIkit components within your Angular templates.

How can I use UIkit with Tailwind CSS?

UIkit and Tailwind CSS can be used together, but it requires careful management to avoid conflicts between the two frameworks. Both frameworks have their own set of classes and styles, so you need to ensure that they don’t override each other. You can do this by using specific classes for each framework and avoiding using generic class names that might be used by both.

How can I add a backdrop to my UIkit modal?

UIkit modals come with a built-in backdrop feature. When a modal is active, the rest of the page is darkened, creating a backdrop effect. You can customize the appearance of the backdrop by modifying the .uk-modal-page class in your CSS. For example, you can change the backdrop color or add a blur effect.

How can I use UIkit with React?

Similar to Angular, UIkit can be used with React by installing the UIkit package via npm and importing it into your React project. After installing UIkit using the command npm install uikit, import it into your main React file (usually index.js) using the command import UIkit from 'uikit';. You can then use UIkit components within your React components.

How can I make my UIkit portfolio responsive?

UIkit is designed to be responsive out of the box. It uses a grid system that automatically adjusts to the screen size. You can control the layout of your portfolio at different screen sizes using the uk-grid class along with the @m, @s, @l, and @xl modifiers. For example, uk-grid@l applies the grid layout at large screen sizes and above.

How can I add animations to my UIkit portfolio?

UIkit comes with a variety of built-in animations that you can use. These animations can be applied to almost any element using the uk-animation-* classes. For example, uk-animation-slide-top applies a slide-in animation from the top. You can control the duration and delay of the animation using the uk-animation-duration and uk-animation-delay attributes.

How can I add a navigation bar to my UIkit portfolio?

UIkit provides a uk-navbar component that you can use to create a navigation bar. This component is highly customizable and supports various features like dropdowns, off-canvas menus, and sticky behavior. You can customize the appearance of the navbar by modifying the .uk-navbar class in your CSS.

How can I add a footer to my UIkit portfolio?

UIkit provides a uk-footer component that you can use to create a footer. This component supports various layout options and can contain any type of content. You can customize the appearance of the footer by modifying the .uk-footer class in your CSS.

How can I add a contact form to my UIkit portfolio?

UIkit provides a uk-form component that you can use to create a contact form. This component supports various form controls like text fields, checkboxes, and buttons. You can customize the appearance of the form by modifying the .uk-form class in your CSS. To handle form submissions, you will need to use a server-side script or a third-party service like Formspree.