ASCII Boxes
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 | } |
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
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 |
Theme
Shearing
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 | } |
Theme
Reference
Properties
--box-border-color
: The border color of the box--box-rounded-radius
: The border radius ofround
boxes--box-border-width
: The border width forsquare
andround
boxes--box-double-border-width
: The width of boxes withdouble
borders
#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"] {
/* ... */
}
}