Set Class

Utility classes defined in the @lism-base layer are provided in the format set--{className}. They are used to override base styles, redefine tokens, and set initial values for functional properties.

set--plain

A class for resetting primary styles.

<div class='l--flex -g:20 -ff:mono'>
  <button class='set--plain'>button</button>
</div>

set--shadow

Elements with the .set--shadow class have the --bxsh-- variables that compose the shadow redefined.

By overriding the --shc variable here, you can adjust the color tint of the shadow.

<div class="set--shadow l--flex -g:30" style="--shc:hsl(200 50% 50% / 20%)">
  <div class="l--box -bxsh:20 -p:30 -bdrs:20">Box</div>
  <div class="l--box -bxsh:40 -p:30 -bdrs:20">Box</div>
</div>

<Flex className='set--shadow' g='30' style={{'--shc': 'hsl(200 50% 50% / 20%)'}}>
  <Box bxsh='20' p='30' bdrs='20'>Box</Box>
  <Box bxsh='40' p='30' bdrs='20'>Box</Box>
</Flex>

set--bp

A utility class for applying styles only at or above a specific breakpoint. It can be used as a workaround for properties that do not support responsive breakpoints.

<div class="set--bp l--box -p:20" style="color:var(--_is_sm) red;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<Box className='set--bp' p='20' style={{'color': 'var(--_is_sm) red;'}}>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</Box>

set--cqUnit

A class for scaling using cqw units.

Recalculates font-size clamp() values using cqw instead of vw, and redefines spacing and half-leading token units accordingly.

set--hov

Sets CSS variables for hover style management. Primarily used to control hover styles on child elements.

set--transition

Sets the transition property using dedicated variables.

set--innerRs

A utility class that calculates the inner border radius (--bdrs--inner) of a child element based on the parent element’s padding and border radius. The calculation is based on the parent element’s (set--innerRs) p (--p) and bdrs (--bdrs) values. (Both must be specified.)

To apply the calculated --bdrs--inner to a child element, use -bdrs:inner on that child.

↓

Usage example

JSX HTML

<Lism className='set--innerRs' p='15' bd bxsh='20' bdrs='50'>
  <Frame bdrs='inner' ar='og'>
    <img src='https://cdn.lism-css.com/img/u-5.jpg' width='1920' height='1280' alt='' />
  </Frame>
</Lism>

<div class="set--innerRs -p:15 -bd -bxsh:20 -bdrs:50">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </div>
</div>

Since p and bdrs are managed as variables even when their values change at breakpoints, set--innerRs also supports responsive border radius.

<Lism p={[10, 20, 30]} bd bdw='2px' bdrs={['40',null,'50']} class='set--innerRs'>
  <Lism bd p='15' bdrs='inner'>
    Example
  </Lism>
</Lism>

set--gutter

A class that adds predefined horizontal spacing to the left and right sides of content. It is provided as a separate class from padding utilities to reserve a consistent horizontal margin across the entire site.

<div class="set--gutter">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</div>

<Lism setGutter>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</Lism>