-max-sz
Lism provides content size tokens in the form --sz--{sz} (where {sz} = xs, s, m, l, xl), and corresponding -max-sz classes are available for each.
| Class | CSS Variable | Value |
|---|---|---|
| -max-sz:xs | --sz--xs | 400px |
| -max-sz:s | --sz--s | 640px |
| -max-sz:m | --sz--m | 880px |
| -max-sz:l | --sz--l | 1200px |
| -max-sz:xl | --sz--xl | 1600px |
full & bleed
In addition, -max-sz provides the following special preset classes:
| Class | Description |
|---|---|
| -max-sz:full | When placed directly inside a has--gutter element, this class adds the gutter spacing on top of 100% to expand to the full size of the parent. |
| -max-sz:bleed | Expands to the width of the outermost is--container, breaking through both content widths and nested containers to provide a page-wide full-bleed layout. When no is--container ancestor exists, it falls back to the viewport width (100svi). |
Demo Page
You can see these -max-sz classes in action on a separate demo page.