UIkit 3.2 – Column and Row Gap

  • Sascha
  • UIkit

Today we are happy to present UIkit 3.2. It comes with some small but very useful features like the column and row gap for the Grid component and additional font weight utility classes for the Text component. There's also some news about UIkit 4. Let's take a look.

Column and Row Gap

We updated the Grid component and added new classes to apply column and row gaps separately. Instead of using the uk-grid-small class, which sets the same gap size for columns and rows, you can now apply different gaps, for example using uk-grid-column-small and uk-grid-row-large.

Class Description
.uk-grid-column-small
.uk-grid-row-small
Add one of these classes to apply a small gap to the column or row.
.uk-grid-column-medium
.uk-grid-row-medium
Add one of these classes to apply a medium gap to the column or row.
.uk-grid-column-large
.uk-grid-row-large
Add one of these classes to apply a large gap to the column or row.
.uk-grid-column-collapse
.uk-grid-row-collapse
Add one of these classes to remove the grid gap entirely from the column or row.

A good example is a multi-column blog layout. Here you can set small gaps for the columns and large ones for rows. This is also very useful for responsive grids. Aligned side by side the column gap can be small, and once the grid items stack on smaller devices the row gap can be large.

Column and row gap

Font Weight

In addition to the .uk-text-bold class, we added some more font weight utility classes to the Text component.

Class Description
.uk-text-light Add this class to apply a font weight of 300.
.uk-text-normal Add this class to apply a font weight of 400.
.uk-text-bold Add this class to apply a font weight of 700.
.uk-text-lighter Add this class to apply a lighter font weight.
.uk-text-bolder Add this class to apply a bolder font weight.

Migration to UIkit 3.2

There are some small breaking changes for the Text component, so please take a look at the migration guide. For further release discussions or to report issues, visit our Discord chat.

What's Next

We are really excited to announce that the UIkit 4 development has started 🥳. The release is planned for the end of the year. We will share details at a later point when things start shaping up. For now, we would like to ask you what you think can be improved in UIkit 4, and what features are missing. We have created a dedicated thread UIkit 4 Ideas and Suggestions in the Github issues where you can share your thoughts on UIkit 4.

Let us think what you think about this release in the comments below.

Related



Join Now

Documentation