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.

.-p{ padding: var(--p); }

/* @sm ~ */
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}

/* @md ~ */
@container (min-width: 720px) {
  .-p_md{ padding: var(--p_md); }
}

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

<Lism p={[20, 40, 50]} bd>
  <p>Example</p>
</Lism>

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:

1. Properties where the value is always accessible via the -{prop} variable
2. Properties that are simply overridden at each breakpoint

.-p{ padding: var(--p) }

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

Only a limited set of properties (p, m, g, fz, c, bgc, bdrs) — those where having the value always accessible via a CSS variable is considered useful — use this pattern.

.-d { display: var(--d) }

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

Container Queries and Media Queries

Lism adopts container queries by default.

(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.)

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.cq('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.cq('md') {
  // Your styles for md sizes(width >= 720px) ...
}