Responsive design

Responsive design is accomplished by wrappers, flexbox and grid layouts, and various utility classes all controlled by media query breakpoint widths, plus a few utilities controlled by CSS clamp().

Layouts

For controlling layouts on different viewport dimensions, we have various wrappers and max-width wrappers:

• Wrappers have a max-width, some x-axis padding (for keeping wrapper content away from the sides of screens, thereby preventing legibility problems), and x-axis margin-auto-centering.
• There are also max-width wrappers that are similar to the wrappers above, but without the x-axis padding and margin-auto-centering.

Widths and breakpoint tiers

There are several layout widths built in, used in wrappers, max-width wrappers, offcanvas panel overrides, and several typographic styles.

These pre-set widths are in increments of 256px. These are common device viewport sizes such as 1024px × 768px.

Many of the CSS utility classes have media query width variants. A number of variants are available for each, indicated by a colon-separated prefix that indicates the media query width at which the utility style takes effect.

CSS classes that have media query width variants:

1. Block utilities
2. Flexbox layouts
3. Grid layouts
4. Block positions
5. Floats
6. Spacing (margins and paddings) and borders
7. Invisibility utilities
8. Offcanvas panel components, powered by AlpineJS

There are also some and viewport-height based heights utilities