UIkit 3 RC 1 – Masonry Grid, Filter and more
We are excited to present to you the first Release Candidate for UIkit 3. It comes with a whole bunch of highlights. There are the long-awaited Masonry Grid and Filter components, and we've also got a nice surprise up our sleeves: a new Image component that lazy loads images and boosts your page speed. Let's dive in.
uk-grid="masonry: true" to any grid to enable the Masonry effect.
The second highlight is the new Filter component. It's the perfect match for the Masonry grid. Filter and sort items in multi-column layouts by category, date or other meta data. In UIkit 3, the Filter component works on its own and is no longer tied to the grid. Any layout can be filtered or sorted no matter how the items are positioned. It even works with both the masonry and the parallax effects applied to the grid. Items fade and move with smooth transitions between the different filtering and sorting states.
You can have multiple filter controls on different positions in your layout. For example, there can be a navigation at the top for the primary filter and a sidebar navigation with secondary filters. Filter controls can also be grouped, which allows filtering items using multiple criteria at the same time.
This is our surprise for you. While working on the new YOOtheme website, we took a deep look into page speed optimizations, and this new Image component is what we came up with. It speeds up page loading times and decreases traffic by only loading images as they enter the viewport. Here is how it works:
- Only images which are initially in the viewport are loaded.
- Other images are lazy loaded as they enter the viewport when scrolling.
- An empty placeholder image is generated instantly to prevent content from jumping while images are loaded or not yet in the viewport.
- Optionally, the placeholder image can have any kind of background or preload animation.
The Image component supports the
img element and the CSS
background-image property. The
srcset attribute for images is supported as well to serve the optimal image for different device widths and high resolution (retina) displays.
The Image component even allows you to use srcset for the CSS background-image property.
It's very easy to use. Here are some examples:
<!-- `img` element --> <img data-src="" width="" height="" alt="" uk-img> <!-- `img` element with `srcset`--> <img data-src="" data-srcset="" sizes="" width="" height="" alt="" uk-img> <!-- Background image --> <div data-src="" uk-img></div> <!-- Background image with `srcset`--> <div data-src="" data-srcset="" data-sizes="" uk-img></div>
Smaller Fonts on Mobiles
Headings in UIkit 3 have also received a small update.
uk-article-tile now have a smaller font size on mobile devices, which guarantees better readability.
We also removed the Grid Parallax component and instead added a parallax option to the Grid. This means that you can use the parallax effect combined with the Masonry grid as well.
Instead of the old syntax
<div uk-grid-parallax="translate: 150px">...</div>
just use the new one
<div uk-grid="parallax: 150px">...</div>
This was a big UIkit 3 update with many bug fixes and small features. These include left and right icons that are now possible in form input fields. Form icons have an inverse style and long words will automatically break into the next line in article comments. For a full list of fixes and changes, take a look at the Changelog.
We removed the documentation for the deprecated Gif component. It’s now fully replaced by the Video component. Since we introduced
uk-video="autoplay: inview", videos can start playing when they enter the viewport and pause when they leave it.
And 🥁 ... as you noticed this is a RC release. We are now just waiting to fix incoming bugs and then start wrapping up for the UIkit 3 Stable release!!! We hope you are as excited as we are to finally see this happen! Stay tuned and give us your feedback in the comments section.