UIkit 3.17 – Transparent Sticky Navbar, Masonry Grid and Parallax Grid

Sascha
September 28, 2023
UIkit

Today we are happy to introduce UIkit 3.17. It comes with some nice refinements for transparent and sticky navbars, additional options for the masonry and parallax grids and more. Let's check it out.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Transparent navbars are a common design element for more artistic websites. But how should transparency behave when the dropbar opens and stretches to the full width of the viewport? Keeping the navbar transparent is not really an option because you can see the background image or video underneath, which doesn't look good. This is why we added the dropbar-transparent-mode option for the transparent navbar when used with a dropbar.

To remove navbar transparency when the dropbar opens and add it when the dropbar closes, set dropbar-transparent-mode: remove. This is useful, for example, if the navbar is only transparent in the hero section, but not when sticky.

Alternatively, if the navbar is transparent even when sticky, set dropbar-transparent-mode: behind to open the dropbar behind the navbar, so it is no longer transparent. The navbar content will show above the dropbar background. If you need to inverse the color of the navbar content to better fit the dropbar background, set the Less variable @navbar-dropbar-behind-color-mode to either light or dark.

When using a sticky transparent navbar, it's quite common to blend it with the page background. In this case, you need to place the dropbar outside of the blending element using dropbar-anchor, and the dropdowns using container, both with the corresponding CSS selectors. Otherwise, the dropbar and dropdowns would also blend with the page background. This also means the dropbar will be placed outside of the sticky container. As a result, only the navbar will stay sticky, and the opened dropbar will scroll out of the view. This is why we added a new close-on-scroll option to close the dropbar before scrolling.

To get you covered, we have prepared some dedicated examples in the Sticky Navbar UIkit test and Sticky Navbar documentation.

Transparent Navbars and Sections

The Section component now defines the --uk-navbar-color custom property in the UIkit CSS. Depending on the section background, it is set to either light or dark. If the transparent navbar intersects with a section, it automatically sets the corresponding .uk-light or .uk-dark class to adjust the navbar color. A sticky transparent navbar will automatically change its color depending on the section beneath.

The Scroll component now automatically adds the height of a sticky element, for example the sticky navbar, as offset to the scroll target so it is not covered by the sticky element. If there is already an offset for a sticky element, the offset option is added up. This means that you no longer have to set the offset option to prevent the navbar from covering the scroll target.

Grid Masonry

The Grid component now has a new masonry pack mode which will sort items into columns with the most room. To keep backward compatibility, setting masonry to true, will just use the new pack mode. To show items in their natural order, as before, use the next mode.

Grid Parallax

As you know, the Grid component has a parallax option to move single grid columns at different speeds while scrolling. Similar to the Parallax component, we added parallax-start and parallax-end options to give you more control over the duration of the parallax animation. By default, the animation starts when the top border of the element enters the viewport, and ends when its bottom border leaves the viewport.

With the new options you can offset the start and end points. Values can be set in any dimension units, namely vh, % and px. The % unit relates to the element's height. Both options allow basic mathematics operands, + and -.

Additionally, there is a new option to justify the grid parallax if columns have different heights, which is often the case for masonry grids. You can now set parallax-justify: true so all grid columns reach the bottom at the same time. Set parallax: 0 to only move the columns by their height until they justify. Of course, you can add an additional parallax translation value as well.

3XL Heading

Additionally, we added an extra style to the Heading component. This 3XLarge modifier now provides an even bigger font-size for headlines which may come in handy for hero sections.

Migration to UIkit 3.17

As mentioned above, there are breaking changes for the Scroll and Grid components. So please take a look at the migration guide.

What's Next

We are really happy with all the changes for the transparent navbar. Now you can finally combine it with dropbars, and it will look good. And thanks to refined masonry grid, the items will align more evenly without too much space at the bottom. You can even animate them when scrolling, so they completely justify at the bottom. Now it is your turn to share your feedback, so let us know what you think about this release in the comments below.