-bd

Border-related specifications in Lism follow a slightly unique 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. (Note: only block and inline directions are supported by default.)
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.

<Box bd p='10'>
  <Dummy length='s'/>
</Box>
<Box bd bds='dashed' bdw='4px' bdc='red' p='15'>
  <Dummy length='s'/>
</Box>

<div class="l--box -bd -p:10">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>
<div class="l--box -bd -bds:dashed -p:15" style="--bdw:4px;--bdc:var(--red)">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

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>

<div class="l--box -bd-x-s -px:10 -bgc:base-2" style="--bdw:2px">inline-start</div>
<div class="l--box -bd-x-e -px:10 -bgc:base-2" style="--bdw:2px">inline-end</div>
<div class="l--box -bd-y-s -px:10 -bgc:base-2" style="--bdw:2px">block-start</div>
<div class="l--box -bd-y-e -px:10 -bgc:base-2" style="--bdw:2px">block-end</div>
<div class="l--box -bd-x -px:10 -bgc:base-2" style="--bdw:2px">inline</div>
<div class="l--box -bd-y -px:10 -bgc:base-2" style="--bdw:2px">block</div>

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

リサイズ可能

<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

リサイズ可能

<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

リサイズ可能

<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>

<div class='l--flex -fxd:col -fxd_sm' style='--fxd_sm:row'>
  <div class='l--box -px:15 -py:5'>Box</div>
  <div class='l--box -px:15 -py:5 -bd-x-s -bd-y-s -bdw_sm' style='--bdw:1px 0;--bdw_sm:0 1px'>Box</div>
  <div class='l--box -px:15 -py:5 -bd-x-s -bd-y-s -bdw_sm' style='--bdw:1px 0;--bdw_sm:0 1px'>Box</div>
</div>