Lism CSS
Search

-bd

Border-related properties in Lism follow a slightly different convention.

  • Use the -bd class to show a border on all sides.
  • To show a border on a single side, use the -bd-{side} class. In addition to the block / inline directions, the top / right / bottom / left directions are also supported.
  • Fine-grained styles for these borders are controlled by three variables: --bdc, --bdw, and --bds.
  • To change the border direction at a breakpoint, adjust --bdw.
↓
css
:where(.-bd, [class*=' -bd-'], [class^='-bd-']) {
  --bds: solid;
  --bdw: 1px;
  --bdc: var(--divider);
  border-width: var(--bdw);
  border-color: var(--bdc);
}
.-bd {
  border-style: var(--bds);
}
.-bd-x {
  border-inline-style: var(--bds);
}
.-bd-y {
  border-block-style: var(--bds);
}
.-bd-x-s {
  border-inline-start-style: var(--bds);
}
.-bd-x-e {
  border-inline-end-style: var(--bds);
}
.-bd-y-s {
  border-block-start-style: var(--bds);
}
.-bd-y-e {
  border-block-end-style: var(--bds);
}
.-bd-t {
  border-top-style: var(--bds);
}
.-bd-b {
  border-bottom-style: var(--bds);
}
.-bd-l {
  border-left-style: var(--bds);
}
.-bd-r {
  border-right-style: var(--bds);
}

Accordingly, components also accept bd, bd-{side}, bdc, bdw, and bds, where bdc, bdw, and bds are output as CSS variables.

Additionally, bdw supports breakpoint specification.

↓
Usage example

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

<Box bd p="10">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
</Box>
<Box bd bds="dashed" bdw="4px" bdc="red" p="15">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
</Box>

Side Specification

To apply a border on only one side, use the -bd-{side} class.

↓
Specifying all 4 sides
-t: Top
-r: Right
-b: Bottom
-l: Left
<Box bd-t px="10">-t: Top</Box>
<Box bd-r px="10">-r: Right</Box>
<Box bd-b px="10">-b: Bottom</Box>
<Box bd-l px="10">-l: Left</Box>
↓
Specifying block and inline directions
inline-start
inline-end
block-start
block-end
inline
block
<Box bd-x-s bdw="2px" px="10" bgc="base-2">inline-start</Box>
<Box bd-x-e bdw="2px" px="10" bgc="base-2">inline-end</Box>
<Box bd-y-s bdw="2px" px="10" bgc="base-2">block-start</Box>
<Box bd-y-e bdw="2px" px="10" bgc="base-2">block-end</Box>
<Box bd-x bdw="2px" px="10" bgc="base-2">inline</Box>
<Box bd-y bdw="2px" px="10" bgc="base-2">block</Box>

When different styles are needed for each side, you can combine the -bd class with --bdw, --bds, and --bdc as follows:

↓
Per-side specification of bdw, bds, bdc
border
Resize 
<Box bd bdw="0 0 1px .5em" bds="dashed solid" bdc="var(--purple) var(--blue)" p="15">
  border
</Box>

Switching bdw at breakpoints

bdw supports breakpoint specification.

↓
Example of bd
border
Resize 
<Box bd bdw={['1px', '3px', '6px']} p="15">
  border
</Box>

Switching the border side

By switching bdw at breakpoints, you can also change which side the border appears on.

↓
Switching the border side
Box
Box
Box
Resize 
<Flex fxd={['column', 'row']}>
  <Box px="15" py="5">
    Box
  </Box>
  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>
    Box
  </Box>
  <Box px="15" py="5" bd-x-s bd-y-s bdw={['1px 0', '0 1px']}>
    Box
  </Box>
</Flex>

© Lism CSS. All rights reserved.

TOC