Home 零对冲(ZeroHedge)每日HackerNews

WebTUI——一个将终端UI之美带到浏览器的CSS库
WebTUI – A CSS Library That Brings the Beauty of Terminal UIs to the Browser

原始链接: https://webtui.ironclad.sh

WebTUI是一个模块化的CSS库，它将终端UI的美感带到网页浏览器中。它提供按钮、徽章、输入框和排版元素等组件，并采用TUI风格的设计。您可以通过ESM、CDN或完整库导入来安装WebTUI。 该库高度可定制，提供主题（如Catppuccin和Nord）和插件，包括一个用于Nerd Font集成的插件。组件可以使用CSS变量进行扩展和样式设置，从而实现一致的主题和自定义外观。 主要特性包括：可自定义边框的ASCII方框创建、颜色和字体样式的主题选项，以及对等宽字体和字符单元格对齐（类似于终端环境）的考虑。WebTUI专注于创建具有独特终端风格的可访问且视觉上吸引人的网页界面。

Hacker News 最新 | 过去 | 评论 | 提问 | 展示 | 招聘 | 提交 登录 WebTUI – 一个将终端 UI 的美感带到浏览器的 CSS 库 (ironclad.sh) 13 分，来自 IroncladDev，3 小时前 | 隐藏 | 过去 | 收藏 | 讨论 加入我们，参加 6 月 16-17 日在旧金山举办的 AI 初创公司学校！ 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 申请 YC | 联系我们 搜索：
相关文章
  • 开放式UI：维护开放的UI标准，并促进其遵守和采用。 2025-03-13
  • （评论） 2024-03-23
  • 等宽网页 2024-08-29
  • FastUI：更快地构建更好的 UI 2024-03-03
  • 显示 HN：magick.css – 巫师的极简 CSS 2024-03-24
    • 原文
     Search
    guides/style-guide: Style Guide guides/style-guide: ## Box Model guides/style-guide: ## Text plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins components/input: Input components/input: ## Import components/input: ## Usage components/input: ### box- components/input: ### size- components/input: ### Extending plugins/theme-catppuccin: Catppuccin Theme plugins/theme-catppuccin: ## Installation plugins/theme-catppuccin: ## Components plugins/theme-catppuccin: ### Typography plugins/theme-catppuccin: ### Badge plugins/theme-catppuccin: ### Button plugins/theme-catppuccin: ## CSS Variables plugins/theme-nord: Nord Theme plugins/theme-nord: ## Installation plugins/theme-nord: ## Components plugins/theme-nord: ### Typography plugins/theme-nord: ### Badge plugins/theme-nord: ### Button plugins/theme-nord: ## CSS Variables plugins/plugin-nf: Nerd Font Plugin plugins/plugin-nf: ## Installation plugins/plugin-nf: ## Install a Nerd Font plugins/plugin-nf: ### Static Font plugins/plugin-nf: ### CDN plugins/plugin-nf: ## Components plugins/plugin-nf: ###
    plugins/plugin-nf: ### Badge plugins/plugin-nf: #### cap- components/badge: Badge components/badge: ## Import components/badge: ## Usage components/badge: ### variant- components/badge: ### Styling components/badge: ### Extending components/badge: ## Scope start/ascii-boxes: ASCII Boxes start/ascii-boxes: ## Usage start/ascii-boxes: ## Border Types start/ascii-boxes: ## Containment start/ascii-boxes: ## Custom Properties start/ascii-boxes: ### --box-border-color start/ascii-boxes: ### --box-rounded-radius start/ascii-boxes: ### --box-border-width start/ascii-boxes: ### --box-double-border-width components/button: Button components/button: ## Import components/button: ## Usage components/button: ### box- components/button: ### variant- components/button: ### size- components/button: ### disabled components/button: ### Styling components/button: ### Extending components/button: ## Scope components/typography: Typography components/typography: ## Import components/typography: ## Usage components/typography: ###

    -

    components/typography: ###

    components/typography: ###

    components/typography: ###
      components/typography: ###

    UI Design that goes HARD

    WebTUI is a modular CSS library that brings the beauty of Terminal UIs to the browser

    NORMAL  master
    index.astro
    utf-8 Top 1:1
     Search
    guides/style-guide: Style Guide guides/style-guide: ## Box Model guides/style-guide: ## Text plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins components/input: Input components/input: ## Import components/input: ## Usage components/input: ### box- components/input: ### size- components/input: ### Extending plugins/theme-catppuccin: Catppuccin Theme plugins/theme-catppuccin: ## Installation plugins/theme-catppuccin: ## Components plugins/theme-catppuccin: ### Typography plugins/theme-catppuccin: ### Badge plugins/theme-catppuccin: ### Button plugins/theme-catppuccin: ## CSS Variables plugins/theme-nord: Nord Theme plugins/theme-nord: ## Installation plugins/theme-nord: ## Components plugins/theme-nord: ### Typography plugins/theme-nord: ### Badge plugins/theme-nord: ### Button plugins/theme-nord: ## CSS Variables plugins/plugin-nf: Nerd Font Plugin plugins/plugin-nf: ## Installation plugins/plugin-nf: ## Install a Nerd Font plugins/plugin-nf: ### Static Font plugins/plugin-nf: ### CDN plugins/plugin-nf: ## Components plugins/plugin-nf: ###
    plugins/plugin-nf: ### Badge plugins/plugin-nf: #### cap- components/badge: Badge components/badge: ## Import components/badge: ## Usage components/badge: ### variant- components/badge: ### Styling components/badge: ### Extending components/badge: ## Scope start/ascii-boxes: ASCII Boxes start/ascii-boxes: ## Usage start/ascii-boxes: ## Border Types start/ascii-boxes: ## Containment start/ascii-boxes: ## Custom Properties start/ascii-boxes: ### --box-border-color start/ascii-boxes: ### --box-rounded-radius start/ascii-boxes: ### --box-border-width start/ascii-boxes: ### --box-double-border-width components/button: Button components/button: ## Import components/button: ## Usage components/button: ### box- components/button: ### variant- components/button: ### size- components/button: ### disabled components/button: ### Styling components/button: ### Extending components/button: ## Scope components/typography: Typography components/typography: ## Import components/typography: ## Usage components/typography: ###

    -

    components/typography: ###

    components/typography: ###

    components/typography: ###
      components/typography: ###
    联系我们 contact @ memedata.com