 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/radio: Radio components/separator: Separator components/pre: Pre components/switch: Switch components/table: Table components/textarea: Textarea components/typography: Typography components/tooltip: Tooltip start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme installation/nextjs: Next.js installation/vite: Vite plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme plugins/theme-vitesse: Vitesse Theme start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/theming: ### Using Multiple Theme Accents start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import

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 }

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

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 }

Reference

Properties

  • --box-border-color: The border color of the box
  • --box-rounded-radius: The border radius of round boxes
  • --box-border-width: The border width for square and round boxes
  • --box-double-border-width: The width of boxes with double 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"] {
        /* ... */
    }
}