UIkit 2.17 – New Thumbnav component and some refactoring

UIkit is back with a new release and this is a good one. With spring almost in sight we reckoned it was time for a little cleanup. So apart from the new Thumbnav component, we focused on some rearrangements and additional features. We want to give you an overview of the major changes and advise you on how these will affect your projects and what you need to keep in mind when updating.

Overlay and Caption

First the sad news: the Caption component is no more. The good news: its functionality has been merged into the Overlay component. The Overlay component meanwhile has been reworked and improved. It now supports image animations and can be triggered on hover or remain steadily visible. Some of the old overlay classes are now deprecated but will continue to work. Check out all the new nifty features in the Overlay documentation.

Grid

We removed the .uk-grid-preserve class, which prevented the grid gutter from adjusting itself on large screens. Instead, we added the .uk-grid-medium and .uk-grid-collapse classes. Again, for more information, take a look at the Grid documentation.

Moved components

Since the Flex and Cover components have become more and more important and involved in other parts of UIkit, we have decided to move them from the additional components to the UIkit core. This means that you no longer have to include their files in the head of your project.

On the other hand we have migrated Progress and Tooltip to the additional components to keep UIkit nice and slim. So make sure to add them to your document's head, if they are needed.

New and reworked Nav components

We've added the new Thumbnav component, which allows you to create image based navigations.

Generally we are slowly working Flexbox into UIkit. That's why the Dotnav and Subnav have been updated to use flex, as does the Thumbnav. The only thing you need to consider is that in order to center those navigations, you now need to apply the .uk-flex-center class.

What else

These are the major changes that you should know about. But we sneaked in many more great features. For example, we updated FontAwesome to the latest version 4.3. Also, there now is a new .uk-icon-hover class that allows you to display anchors as icons without the usual link styling, like text underline. And there are many new enhancements for the JavaScript components that will make the developer's day to day life easier.

As usual, we want to know what you think. We just recently opened a new UIkit Chat. Here you can exchange ideas, post pull request and issues and report those nasty bugs directly to us. See you there!