ASCII Boxes
The box- utility utilizes CSS ::before and ::after pseudo-elements to mimic a boxes drawn with ASCII Box-drawing characters
<div box-="square" shear-="both">
<div class="header">
<span is-="badge" variant-="background0">top-left</span>
<span is-="badge" variant-="background0">top-right</span>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet sit dolor ipsum lorem idk i dont speak french</p>
<div id="buttons">
<button box-="round">Cancel</button>
<button box-="round">Ok</button>
</div>
</div>
<div class="header">
<span is-="badge" variant-="background0">bottom-left</span>
<span is-="badge" variant-="background0">bottom-right</span>
</div>
</div>.header {
display: flex;
justify-content: space-between;
}
#content {
padding: 0lh 1ch;
padding-top: 1lh;
display: flex;
flex-direction: column;
gap: 1lh;
}
#buttons {
display: flex;
justify-content: flex-end;
} Theme
Import
@import "@webtui/css/utils/box.css";Usage
<div box-="square">
Hi Mom
</div>Important: The box- utility is suffixed with a -
Using box="..." will not work
Examples
Border Types
<div box-="square">Square</div>
<div box-="round">Round</div>
<div box-="double">Double</div>
<div box-="double round">Double + Round</div> Theme
Shearing
Shearing off top/bottom padding allows overlaying content over the top and/or bottom edges of the box
<!-- Shear off the top edge's padding -->
<div box-="square" shear-="top">
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
Caption on Top
</div>
<!-- Shear off the bottom edge's padding -->
<div box-="square" shear-="bottom">
Caption on Bottom
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
</div>
<!-- Shear off the padding of both top & bottom edges -->
<div box-="square" shear-="both">
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
Caption on Top and Bottom
<div class="header">
<span>Left</span>
<span>Right</span>
</div>
</div>.header {
display: flex;
justify-content: space-between;
}
span {
background-color: var(--background0);
padding: 0 1ch;
} Theme
Reference
Properties
--box-border-color: The border color of the box--box-rounded-radius: The border radius ofroundboxes--box-border-width: The border width forsquareandroundboxes--box-double-border-width: The width of boxes withdoubleborders
#my-box {
--box-border-color: cyan;
--box-rounded-radius: 8px;
--box-border-width: 1px;
--box-double-border-width: 1px;
}Extending
To extend the Box stylesheet, define a CSS rule on the utils layer
@layer utils {
[box-~="square"],
[box-~="round"],
[box-~="double"] {
/* ... */
}
}