Lumo

Sizing and spacing

Lumo defines a set of CSS custom properties you can use to apply consistent sizing and spacing across your application.

Import sizing.html and spacing.html to use them.

Sizing

Use these properties to adjust the sizing of regular elements (buttons, text fields, list items).

M is the standard size, and it is primarily used to size buttons, text fields and list items. If you adjust the sizing, make sure to keep it large enough for touch targets.

Spacing

Use these properties to adjust the inter-component spacings, i.e. space outside a regular component (button, text field) or inside a container component (layouts, grid cells)

Uniform

Use these properties for margin or padding in a single direction or uniformly on all sides.

Wide

Use these properties for margin or padding to have a bigger horizontal space than vertical space.

Tall

Use these properties for margin or padding to have a bigger vertical space than horizontal space.

Compact preset

The compact preset defines values for the sizing and spacing properties to reduce the visual space required by components to better fit a large amount of content on the screen

The preset can be taken into use by importing the file from under the "presets" folder.

Custom properties

Size

--lumo-size-xs

--lumo-size-s

--lumo-size-m

--lumo-size-l

--lumo-size-xl

Space

--lumo-space-xs

--lumo-space-s

--lumo-space-m

--lumo-space-l

--lumo-space-xl

Space, wide

--lumo-space-wide-xs

--lumo-space-wide-s

--lumo-space-wide-m

--lumo-space-wide-l

--lumo-space-wide-xl

Space, tall

--lumo-space-tall-xs

--lumo-space-tall-s

--lumo-space-tall-m

--lumo-space-tall-l

--lumo-space-tall-xl