在当今 Web 技术飞速发展的时代，界面设计愈发复杂多样。然而，随着现代化工具的广泛使用，一些开发者开始回归极简风格，追求一种简洁而富有韵味的设计。WebTUI 正是这样一款 CSS 库，它将经典的终端用户界面（TUI）风格引入现代浏览器，为用户带来轻便、简洁的设计体验。

什么是 WebTUI？

WebTUI 是一个将终端用户界面（TUI）风格移植到现代浏览器的 CSS 库。TUI 通常出现在命令行终端中，以文本和符号的形式展示信息，简洁而高效。WebTUI 通过 CSS 技术，让 Web 开发者能够用最少的标记和样式，打造出具有 TUI 风格的网页界面。

这种设计风格以简洁为主，通常使用 ASCII 字符、文本框和表格布局来呈现信息。WebTUI 采用模块化和纯粹的设计方法，让开发者可以快速构建 Web 应用，而无需过多依赖复杂的前端框架或组件库。

模块化设计，按需加载

WebTUI 遵循模块化设计原则，为开发者提供了一个精简而强大的功能模块。开发者只需按需加载所需的部分，避免了加载不必要的代码。这种方法不仅提高了页面加载速度，也让开发过程更加灵活。

例如，WebTUI 提供了多个独立模块，如表格布局、按钮样式、文本框样式等。开发者可以根据实际需求，选择仅引入需要的模块，使其成为一个高效的工具，适合构建快速、轻量的 Web 应用。

使用 CSS 层简化样式管理

WebTUI 的一大亮点是使用了 CSS 层（CSS Layers）功能。这种新兴技术能够帮助开发者在不同层次上管理样式规则，从而避免使用 !important 强制覆盖现有样式的问题。

CSS 层让 WebTUI 更加优雅地控制样式的层叠顺序，同时避免了样式冲突，使得开发者能够更轻松地在复杂的项目中管理样式。对于那些对 CSS 层级关系和样式优先级有严格要求的项目，WebTUI 提供了一种更加简洁和直观的解决方案。

极简设计，最大化 HTML 语义化

WebTUI 的设计理念之一是尽量减少 HTML 结构，确保开发者不必为实现功能而编写冗长的代码。它致力于通过纯粹的 HTML 和 CSS 实现尽可能简洁的布局，避免不必要的 JavaScript 或复杂的前端框架依赖。

例如，WebTUI 不会强制开发者使用复杂的 div 结构或冗余的类名，而是鼓励使用语义化 HTML 标签和简单的 CSS 类来构建用户界面。开发者可以以最简洁的方式实现直观的终端风格界面，进一步提高代码的可维护性和清晰度。

高度可定制，支持灵活扩展

WebTUI 提供了一个高度可定制的接口，支持灵活的样式扩展和自定义。在使用 WebTUI 时，开发者可以轻松修改默认的颜色、字体、间距等样式，确保最终的界面符合项目的视觉要求。

此外，WebTUI 的模块化设计使其与其他 Web 技术栈的兼容性非常高。无论你是在使用传统的 HTML/CSS，还是结合 React 或 Vue 等现代前端框架，WebTUI 都能无缝集成，帮助你打造符合 TUI 风格的应用界面。

高性能和低开销

WebTUI 的另一个优势是其高性能和低开销。由于 WebTUI 基于纯 CSS 设计，不依赖于复杂的 JavaScript 代码，因此页面的加载速度非常快，适合那些需要高效加载和低延迟的应用。对于资源紧张或需要处理大量数据的项目，WebTUI 提供了一种理想的解决方案。

如何使用 WebTUI？

使用 WebTUI 非常简单，以下是基本的步骤说明：

1. 引入 WebTUI 样式

WebTUI 提供了多种安装方式，开发者可以通过 CDN 或 NPM 来引入它。

• 通过 CDN 引入：如果你不想进行本地安装，可以直接通过 CDN 引入 WebTUI。不过，如果你在引入时遇到问题，可能是由于网络原因或者链接本身存在问题。你可以检查一下链接的合法性，看看是否有拼写错误或者路径不完整的情况。如果链接没有问题，建议稍后再试。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@webtui/css/dist/base.css"
/>

• 通过 NPM 安装：对于基于 Node.js 的项目，你可以使用 NPM 安装。

npm i @webtui/css

2. 使用 WebTUI 样式类

WebTUI 的样式类设计非常简洁，你只需将相关的类添加到 HTML 元素中，即可创建 TUI 风格的界面。例如：

<h1>Hello World</h1>
<h2>Hi world</h2>
<h3>Hi</h3>

<button>Normal button</button>

<button box-="square">Square button</button>

<div box-="square">
  <h1>Hi mom</h1>
  <h2>I'm in a box</h2>
</div>

通过简洁的 HTML 结构和 CSS 类，你便可以轻松构建符合终端风格的 Web 页面。

3. ASCII Boxes

在 WebTUI 中，Boxes工具通过 CSS 的 ::before 和 ::after 伪元素，使用 ASCII 字符（如 +、-、|）来模拟各种框架和表格样式。这个工具非常适合那些想要在网页中展示复古风格框架的开发者，它能够快速为任何 HTML 元素添加不同样式的边框，并允许定制化样式和内容。

Boxes工具的特点

• 使用伪元素：通过 ::before 和 ::after 伪元素创建边框，使得 HTML 元素能够呈现出类似命令行的框架效果。
• 三种边框样式：支持 square（方形）、round（圆角）和 double（双边框）三种不同的边框样式。
• 灵活的自定义：允许使用 CSS 自定义属性来调整边框的颜色、宽度和圆角半径等，使得框架完全可以与页面的其他设计风格匹配。

使用方法

首先，引入css。

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

然后给html标签添加box-属性就可以了。

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

边框类型

box- 工具支持三种不同的边框类型：

Square（方形）：简单的直线框架，四个角为直角。

<div box-="square">Square</div>

Round（圆角）：框架的角部为圆角，提供更为柔和的视觉效果。

<div box-="round">Round</div>

Double（双边框）：框架有两层边框，看起来更加复杂且富有层次感。

<div box-="double">Double</div>

组件支持

WebTUI支持一些常用的组件，比如button，checkbox，popover等。

主题支持

WebTUI支持通过插件的方式加载不同主题。

npm i @webtui/theme-gruvbox

通过上面的命令就安装了gruvbox主题，非常的方便，然后引入即可，需要注意的是，需要将引入的主题放在所有层的最后。

@layer base, utils, components;

@import "@webtui/css/base.css";
@import "@webtui/css/components/typography.css";
/* ... */

@import "@webtui/theme-gruvbox";

结论

WebTUI 是一个专为喜爱终端风格界面的开发者设计的 CSS 库。它通过模块化设计、简洁的样式类、CSS 层支持和高度可定制的功能，为开发者提供了一种高效、轻量且优雅的解决方案。无论是在快速原型设计还是在构建生产级 Web 应用时，WebTUI 都能够帮助开发者快速实现符合 TUI 风格的界面。

如果你正在寻找一种简单而有趣的方式来将终端用户界面的美学带入 Web 开发，WebTUI 无疑是一个值得尝试的工具。它能够为你的项目带来既复古又现代的视觉效果，并在性能和可维护性方面提供保证。