Prop Responsive

Responsive Support

In Lism, responsive support is implemented by combining classes in the .-{prop}_{bp} format with variables in the --{prop}_{bp} format.

↓

Responsive example

Example

Resize

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm: var(--s40); --p_md: var(--s50)">
  <p>Example</p>
</div>

Not all CSS properties support responsive switching. For details on which properties support breakpoint switching by default, refer to the Property Class list page.

You can also toggle responsive support per property by customizing via SCSS files.

The CSS implementation differs slightly depending on the property

There are two patterns:

Default: Properties that are simply overridden at each breakpoint
Exception: Properties where the value is always accessible via the -{prop} variable

↓

CSS example for the default pattern

.-d {display: var(--d)}
@container (min-width: 480px) {
  .-d_sm {display: var(--d_sm)}
}
@container (min-width: 800px) {
  .-d_md {display: var(--d_md)}
}

↓

CSS example for the exception pattern

.-p {padding: var(--p);}
@container (min-width: 480px) {
  .-p_sm {padding: var(--p);--p: var(--p_sm) !important}
}
@container (min-width: 800px) {
  .-p_md {padding: var(--p);--p: var(--p_md) !important}
}

Properties in the exception pattern always let you reference the value via a CSS variable. By default, only a very limited set of properties (c, bgc, p, m, bdrs) is implemented this way.

In the source code, any property with alwaysVar: 1 set in props.ts is output using this pattern.

Container Queries and Media Queries

Lism adopts container queries by default.

Note that with container queries, a container element must be defined on an ancestor element in order to switch values at breakpoints.

(To define a container element in Lism, .is--container is the convenient way to do so.)

You can also switch from container queries to media queries by customizing via SCSS files.

Breakpoints

Breakpoints are defined mobile-first, using the values 480px, 800px, and 1120px. (No device-specific sizes are used.)

Size notation	Default value
`sm`	`width >= 480px`
`md`	`width >= 800px`
(`lg`)	`width >= 1120px`

Standard support covers sm and md only. Support for lg and beyond requires additional SCSS configuration customization.

To use these breakpoints in your own project with .scss, you can do so as follows:

@use '../path/to/node_modules/lism-css/scss/query' as query;

@include query.bp-up('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.bp-up('md') {
  // Your styles for md sizes(width >= 800px) ...
}