Responsive

Responsive Styling

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.

Array notation and object notation

Responsive values can be specified in two ways: array notation and object notation.

<Lism p={[20, 40, 50]} />                  // Array notation
<Lism p={{ base: 20, sm: 40, md: 50 }} />  // Object notation

In array notation, each position is permanently fixed to [base, sm, md, lg, xl] (index 0 = base, 1 = sm, 2 = md, 3 = lg, 4 = xl). To skip a breakpoint in the middle, use null.

<Lism p={[20, null, 50]} />  // base and md only

xs cannot be specified with array notation.
(Because positions are fixed, inserting xs at the front would silently shift the meaning of every existing array entry.)
Use object notation if you need xs.

<Lism p={{ base: 20, xs: 10, sm: 30 }} />

The CSS implementation varies by 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 expose their value through 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.

(In Lism, the easiest way to define a container element is to add is--container to an ancestor.)

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`

Each breakpoint label means “styles apply once the size exceeds it”.
For example, sm is not “for smartphone-sized screens only” — it is a label for “applies above the sm size”.

Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
             │                       │                        │
          sm:480px                md:800px               lg:1120px

Example: -d:none -d_sm + --d_sm: block → hidden by default, shown at sm and above.

Responsive Property Classes support all breakpoints (sm, md, and lg) by default.
You can check which properties are responsive in the BP column of the Property Class list page.
To use breakpoint classes with non-responsive properties, additional SCSS configuration customization is required.

xs and xl are also reserved keys, but they are undefined (disabled) by default and produce no output. See Customize to learn how to enable them.

Breakpoints offered by type completion

The TypeScript types and autocompletion defaults to offering base, sm, md, and lg as valid breakpoint keys (and array notation accepts up to 4 elements). xl and xs are not included by default because no CSS is output for them.

If you want to enable xl / xs and also have them appear in type completion, the simplest approach depends on your setup:

When using the @lism-css/plugin integrated plugin (lismCss() from @lism-css/plugin/vite or @lism-css/plugin/astro): just set the sizes in lism.config.js’s breakpoints and lism-env.d.ts is automatically generated, reflecting the enabled BP keys in type completion. No hand-written type extension is needed.

When not using the plugin (direct SCSS usage, other bundlers, etc.): extend BreakpointRegistry manually in a type declaration file in your project:

import 'lism-css';

declare module 'lism-css' {
  interface BreakpointRegistry {
    xl: true; // Enables the 5th array element [.., xl] and { xl: ... }
    xs: true; // Enables { xs: ... } (xs cannot be used in array notation)
  }
}

This only widens what types and autocompletion suggest. To actually output the corresponding CSS, you also need to define sizes for xs / xl via lism.config.js breakpoints (see Customize).

To use these breakpoints in your own SCSS files:

@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) ...
}