Trait Class
Trait Classes declare a role on an element or attach a feature to it.
They belong to @layer lism-trait.
is--{name}: declares a role / existence (“is a …”).has--{name}: attaches a feature (“has a …”).
is--* (Role declaration)
| Class | Description |
|---|---|
| is--container | Defines the reference element for container queries |
| is--wrapper | Wrapper element that controls content width |
| is--layer | Overlay layer positioned over a parent element |
| is--boxLink | Makes the entire box a clickable link |
| is--coverLink | A link with a clickable area covering the entire parent element (→ see is--boxLink) |
| is--side | For the side element of l--withSide (→ see l--withSide) |
| is--skipFlow | Cancels spacing with the next sibling inside l--flow (→ see l--flow) |
has--* (Feature attachment)
has--transition
Sets the transition property using dedicated variables.
.has--transition {
--duration: var(--transition-duration, 0.25s);
--ease: ease;
--delay: 0s;
--transitionProps: all;
transition: var(--duration) var(--ease) var(--delay);
transition-property: var(--transitionProps);
}<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>See the hover documentation page for usage examples.
How to use the -hov property classes for controlling hover behavior and transitions.
has--gutter
Adds consistent horizontal padding (left and right) to content. It is kept separate from the padding utilities so that you can always reserve the same site-wide gutter regardless of other padding applied.
| Class name | Spacing | Default value |
|---|---|---|
| has--gutter | --gutter (baseline: --gutter--base) | var(--s30) |
.has--gutter {
--gutter: var(--gutter--base);
padding-inline: var(--gutter);
}Lorem ipsum content…
Lorem ipsum content…
Lorem ipsum content…
<div class="has--gutter"> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p></div>has--snap
Lets you configure scroll-snap properties via CSS variables.
.has--snap {
--snapType: both mandatory;
--snapAlign: start;
--snapStop: normal;
scroll-snap-type: var(--snapType);
& > * {
scroll-snap-align: var(--snapAlign);
scroll-snap-stop: var(--snapStop);
}
}| Variable | Purpose | Default |
|---|---|---|
| --snapType | Value for scroll-snap-type | both mandatory |
| --snapAlign | Value for child scroll-snap-align | start |
| --snapStop | Value for child scroll-snap-stop | normal |
has--mask
Applies a CSS mask to the element, driven by the --maskImg variable.
.has--mask {
--maskPos: 50%;
--maskSize: contain;
--maskRepeat: no-repeat;
mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}| Variable | Purpose | Default |
|---|---|---|
| --maskImg | Mask image (SVG, etc.) | — |
| --maskPos | Mask position | 50% |
| --maskSize | Mask size | contain |
| --maskRepeat | Mask repeat | no-repeat |
<div class="l--frame has--mask -ar:og" style="--maskImg:url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="M170.4,25.7c16.1,14.2,23.2,38.5,24.8,61.7c1.7,23.3-1.8,45.5-12.9,62.3c-11,16.9-29.3,28.6-48.8,34.5 c-19.4,5.9-40,6.1-59.5,0.4c-19.5-5.6-37.9-17.4-51.7-34.9c-14-17.5-23.2-40.8-18-60.2c5-19.4,24.5-34.7,43.5-48.4 s37.6-25.7,59.5-29.7C129.1,7.3,154.2,11.4,170.4,25.7z" /></svg>')"> <img src="https://cdn.lism-css.com/img/u-2.jpg" width="960" height="640" alt="" loading="lazy" /></div>