Whilst Bootstrap and Foundation might be the two most popular front-end frameworks amongst web designers, in this article I’m going to introduce you to the features of UIkit, a lightweight and modular front-end framework which I use in almost all of my projects.
Note: This article assumes you’re familiar with how front-end frameworks work. Also, the main goal of this article isn’t to cover extensively individual parts of this framework (e.g. the grid system). Instead we’ll focus on briefly presenting different useful UIkit features.
Getting Started
UIkit is built and maintained by YOOtheme, a German company which specializes in building themes and applications for the web.
How to Download UIkit
There are a few different options available for including UIkit in your projects. You can use a package manager like Bower, a Content Delivery Network like cdnjs, or you can download it manually from its GitHub page. Note that UIkit requires jQuery, so make sure you’ve included that in your projects.
For the purposes of this tutorial, we’ll use cdnjs to pull the required UIkit files into our CodePen demos. Most of the time, for simplicity, we’ll have to include the uikit.min.css and uikit.min.js files. In the final two examples though, we’ll also add some additional files which aren’t included in the core framework. Keep in mind that UIkit is modular, allowing us to load only the files that are actually needed.
You can learn about the structure of UIkit on this page.
Customizing UIkit
The framework is fully customizable. Before downloading we’re able to overwrite its default styles and apply our very own. For instance, if we want to change the default breakpoints, we can visit the customizer page and check the Advanced Mode option. From there, we find the Breakpoints section and add our new breakpoints. Then, we get the newly generated CSS file.
Browser Support
UIkit works in all recent browsers, specifically:
Useful UIkit Features
It’s time now to explore some useful UIkit features which you might want to use in one of your upcoming projects!
Flexbox and Grids
UIkit provides its Grid and Flex components for building responsive layouts. To better understand how these components work, let’s create a simple layout. Before doing that, we have to add the uikit.min.css file to our example.
Here are the requirements:
- On viewports up to 767px wide, all columns are stacked vertically.
- On viewports wider than 767px, the widths of the first and third columns are 25% of the parent width, while the width of the second column is 50% of the parent width.
The markup looks like this:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="card">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="card">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="card">
<!-- content here -->
</div>
</div>
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
Notice the .card elements within our columns. For stylistic reasons, we’ll apply some basic styles:
.card {
background: #e0e0e0;
padding: 10px;
margin-top: 35px;
}
Here’s the Codepen demo:
As you can see from the demo above (when the viewport width is greater than 767px), the .card elements don’t fill the parent’s full height. Let’s assume we want to make that happen.
A quick solution might be to give target elements height: 100%, right? However, this doesn’t work in some browsers (e.g. Safari), so we have to abandon that approach and search for an alternative. One trick is to define the columns as flex containers by giving them the class of uk-flex. So now if we test the page again, we’ll see that the .card elements inherit the parent height. If you want to get some more information about why that solution works, I recommend you look at this Stack Overflow thread.
Here’s the updated demo:
Creating Scroll-based Animations
If you’re a fan of scroll-based animations you’ll certainly appreciate UIkit’s Scrollspy component. This component allows us to trigger animations and events as we scroll up and down the page. Let’s see a live example to understand how it works.
For this example, we’ll include the uikit.min.css and uikit.min.js files in our project.
The code structure is similar to the previous example. Our goal here is to trigger different animations when the elements with the class of blue (in total five elements) enter the viewport. To implement this behavior, we add the data-uk-scrollspy attribute to the target elements; their value being a configurable object which controls the actual animation. For instance, the cls object property stores the animation type:
<div data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">
Part of the required markup is shown below:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<!-- content here -->
<div class="uk-width-medium-1-2 uk-flex">
<div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-2 uk-flex">
<div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true, delay: 300}">
<!-- content here -->
</div>
</div>
<!-- content here/more animations -->
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
Here’s the corresponding Codepen demo:
Manipulating SVGs
UIkit provides a handy way for controlling the appearance of SVGs. Instead of bloating our HTML with inline SVGs, we can use img tags to load our SVGs, then add the data-uk-svg attribute to those tags. This way, the images are converted into inline SVGs which we can manipulate later. This behavior is possible if we add the uikit.min.js file to our project.
The markup for an SVG is as simple as follows:
<img src="IMAGE_PATH" alt="" data-uk-svg>
Now in the CSS, we’re able to customize it. For example, in our case we change a few basic styles:
svg {
width: 100px;
height: auto;
fill: maroon;
}
The Codepen demo:
Responsive Background Images
There are times when we want a background image to adopt the responsive behavior of an img tag. To do so, we can take advantage of UIkit’s Cover component. So, first we add the uk-invisible class to an img tag and then wrap it within a parent element with the class of uk-cover-background. Next, optionally, we can use the Utility and Flex components to position content on top of the background image.
In order for this to work, we have to include the uikit.min.css file in our project.
With that in mind, to create a responsive background image with content that’s vertically and horizontally centered within it, we’ll need HTML that looks like this:
<div class="uk-cover-background uk-position-relative">
<img class="uk-invisible" src="IMAGE_PATH" alt="">
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<!-- content here -->
</div>
</div>
In our CSS, we now have to specify the background image for the top parent (of course we can add an inline background image as well):
div.uk-cover-background {
background-image: url(IMAGE_PATH);
}
That gives us the following result:
Creating Overlays
UIkit provides the Overlay component to help build image overlays. What’s really nice about this component is that these overlays come in different styles with lots of interesting options.
For this behavior, the only requisite file is uikit.min.css. An example of the required markup for building four overlays is shown below:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
<!-- content here -->
<a class="uk-position-cover" href=""></a>
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
<!-- content here -->
<a class="uk-position-cover" href=""></a>
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left">
<!-- content here -->
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right">
<!-- content here -->
</figcaption>
</figure>
</div>
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
Don’t be afraid of the code above. The bulk is due to a number of helper classes we’ve added to our images. For better understanding, be sure to read the documentation for this component.
Here’s the embedded Codepen demo:
Creating Responsive Full Screen Slideshows
One of the coolest UIkit components is the Slideshow component. This allows us to create (see if you can guess) beautiful responsive slideshows. To demonstrate it, let’s build a responsive full width slideshow.
Here are the UIkit files that we’ll need:
uikit.min.css-
slideshow.min.css
-
slidenav.min.css
-
uikit.min.js
slideshow.min.js
The code for the slideshow looks as follows:
<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true, kenburns:true, pauseOnHover: false}">
<ul class="uk-slideshow uk-slideshow-fullscreen">
<li>
<img src="IMAGE_PATH" alt="">
</li>
<li>
<img src="IMAGE_PATH" alt="">
</li>
<li>
<img src="IMAGE_PATH" alt="">
</li>
</ul>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
Two things here are worth mentioning:
- The value of the
data-uk-slideshowattribute is a configurable object which determines the appearance of our slideshow. - As we hover over a slide, the navigation arrows appear. This is something optional and we’ve achieved it thanks to the Slidenav component. In the same way, we could have used the Dotnav component to generate a dot navigation.
Have a look at the related Codepen demo below:
Creating Sticky Headers
Another useful component is the Sticky component. Let’s see it in action by creating a sticky header.
Again, here are the required UIkit files:
uikit.min.csssticky.min.cssuikit.min.jssticky.min.js
In our markup, we add the data-uk-sticky attribute to the header element. Also, just for stylistic reasons, we use the navbar component to build the navigation bar.
Here’s part of the HTML code:
<!-- content here -->
<header data-uk-sticky>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="">Home</a>
</li>
<!-- three more list items here -->
</ul>
</nav>
</div>
</header>
<!-- content here -->
For this example, we don’t pass any values to the data-uk-sticky attribute. But if we want to customize the default behavior of the sticky element, we have to modify the object that’s passed as a value to this attribute.
The related Codepen demo:
Conclusion
I hope you enjoyed this quick whistle-stop tour of UIkit and have taken away an idea of what we can build with this amazing framework. Of course, there are so many other great components available that we didn’t dive into, so I encourage you to look further yourself. Last but not least, a new UIkit version (v.3) will be launched in the upcoming months with even more interesting features. Stay tuned!
If you have any questions regarding UIkit, let me know in the comments below.
