WebTUI

The box- utility utilizes CSS ::before and ::after pseudo-elements to mimic a boxes drawn with ASCII Box-drawing characters

1	<div box-="square" shear-="both">
2	<div class="header">
3	<span is-="badge" variant-="background0">top-left</span>
4	<span is-="badge" variant-="background0">top-right</span>
5	</div>
6	<div id="content">
7	<p>Lorem ipsum dolor sit amet sit dolor ipsum lorem idk i dont speak french</p>
8	<div id="buttons">
9	<button box-="round">Cancel</button>
10	<button box-="round">Ok</button>
11	</div>
12	</div>
13	<div class="header">
14	<span is-="badge" variant-="background0">bottom-left</span>
15	<span is-="badge" variant-="background0">bottom-right</span>
16	</div>
17	</div>

1	.header {
2	display: flex;
3	justify-content: space-between;
4	}
5	#content {
6	padding: 0lh 1ch;
7	padding-top: 1lh;
8	display: flex;
9	flex-direction: column;
10	gap: 1lh;
11	}
12	#buttons {
13	display: flex;
14	justify-content: flex-end;
15	}

Import

@import "@webtui/css/utils/box.css";

<div box-="square">
  Hi Mom
</div>

Important: The box- utility is suffixed with a -

Using box="..." will not work

1
2	<div box-="square">Square</div>
3	<div box-="round">Round</div>
4	<div box-="double">Double</div>
5	<div box-="double round">Double + Round</div>
6

Shearing off top/bottom padding allows overlaying content over the top and/or bottom edges of the box

1
2	<!-- Shear off the top edge's padding -->
3	<div box-="square" shear-="top">
4	<div class="header">
5	<span>Left</span>
6	<span>Right</span>
7	</div>
8	Caption on Top
9	</div>
10
11	<!-- Shear off the bottom edge's padding -->
12	<div box-="square" shear-="bottom">
13	Caption on Bottom
14	<div class="header">
15	<span>Left</span>
16	<span>Right</span>
17	</div>
18	</div>
19
20	<!-- Shear off the padding of both top & bottom edges -->
21	<div box-="square" shear-="both">
22	<div class="header">
23	<span>Left</span>
24	<span>Right</span>
25	</div>
26	Caption on Top and Bottom
27	<div class="header">
28	<span>Left</span>
29	<span>Right</span>
30	</div>
31	</div>
32

1
2	.header {
3	display: flex;
4	justify-content: space-between;
5	}
6	span {
7	background-color: var(--background0);
8	padding: 0 1ch;
9	}

#my-box {
    --box-border-color: cyan;
    --box-rounded-radius: 8px;
    --box-border-width: 1px;
    --box-double-border-width: 1px;
}

To extend the Box stylesheet, define a CSS rule on the utils layer

@layer utils {
    [box-~="square"], 
    [box-~="round"],
    [box-~="double"] {
        /* ... */
    }
}