Finally, the Masonry grid landed in the UIkit 3 as part of the Grid component. Grid items can now be arranged in a gap-free multi-column layout, no matter if the grid cells have a different height. It removes the gaps, and tiles dynamically on-the-fly. No magic, no position absolute! Just enable Masonry to any grid.

Filter Component

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.

Image Loading

With the most recent upgrades to the UIKit, a deep look into page speed optimizations was taken, and this new Image component is what resulted. It speeds up page loading times dramatically, and decreases traffic by only loading images as they enter the viewport. The Image component even allows you to use srcset for the CSS background-image property. This means we can set multiple versions of the same image--or video--meant for specific screen sizes or devices. We don't need to waste browser resources loading an image that the user never scrolls into view, and we wouldn't want to render a 4MP hi-definition image for a user viewing your content at a 600px screen size. 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.