Skip to main content

Dimensions

Usage​

Utility classes for setting width, min-width, max-width, height, min-height, and max-height properties are defined for the enums listed below. Compose the utility classes like:

[property]--[enum]

See the sections below for examples.

Em-based dimensions​

Particle defines a sliding scale of dimension enums that map to em values. Some examples:

  • width--0.5
  • height--10
  • min-width--1.5
  • max-height--20
info

Punctuation like periods in a CSS class name may seem out of place at first, but they are valid. The period just needs to be escaped in the CSS.

If querying for an element by a class with a period in it, you'll need to double-escape the period. E.g.:

document.querySelector('.width--0\\.5');

Special dimensions​

Particle supports some special non-numerical enums. Some examples:

  • width--auto
  • height--none
note

The auto enum is primarily useful when overriding an existing value.

Percentage-based dimensions​

Particle also supports percentages. The values scale by 10, starting from 10%. Some examples:

  • height--10-pct
  • width--50-pct
  • max-height--80-pct
  • min-width--20-pct
  • height--100-vh