UIkit 3.2 – Column and Row Gap
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.
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. |
Tags: Development