Lism CSS
Docs
Search

Trait Class( is--*, has--* )

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;
  // `all` は読み込み時やレイアウト変化時に意図しないアニメーションを起こすため、対象を見た目系プロパティに限定する。
  --transitionProps: color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter;
  transition: var(--duration) var(--ease) var(--delay);
  transition-property: var(--transitionProps);
}

By default, the transitioned properties (--transitionProps) are limited to colors, shadows, opacity, transform-related, and filter-related properties. Using all tends to cause unintended animations (flickering) on page load or layout changes.

We recommend explicitly listing only the properties that actually change via --transitionProps. In Lism components, passing a string to hasTransition outputs it as --transitionProps.

↓
Usage example
Example
<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>

See the hover documentation page for usage examples.

-hov

How to use the -hov Property Class 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);
}
↓
Example

Lorem ipsum content…

Lorem ipsum content…

Lorem ipsum content…

Resize 
<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
↓
Example
<div class="l--frame has--mask -ar:og" style="--maskImg:url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;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&quot; /></svg>')">
  <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?auto=format&fit=max&w=1920&q=80" width="960" height="640" alt="" loading="lazy" />
</div>

© 2026 Lism CSS.