ASCII Boxes — Pranesh Nikhar

 󰈤

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

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
13	<div box-="square" shear-="bottom">
14	Caption on Bottom
15	<div class="header">
16	<span>Left</span>
17	<span>Right</span>
18	</div>
19	</div>
20
21	<!-- Shear off the padding of both top & bottom edges -->
22
23	<div box-="square" shear-="both">
24	<div class="header">
25	<span>Left</span>
26	<span>Right</span>
27	</div>
28	Caption on Top and Bottom
29	<div class="header">
30	<span>Left</span>
31	<span>Right</span>
32	</div>
33	</div>
34

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'] {
        /* ... */
    }
}