TelUI 1.2：带有趣对齐方式的 TelUI
# TelUI
TelUI 是一个基于 Electron 的用户界面框架，打包了一些可重用的前端基本组件——颜色工具、排版助手和基本结构样式——使您能够以最小的设置原型化简单的桌面用户界面想法。
## 特性
- 集成的 Electron 运行器（`npm start`），可即时提供 `index.html` 的桌面预览。
- 令牌化的样式层：`color.css`、`font.css`、`header.css` 和 `align.css` 使展示规则保持独立，易于重混。
- `animation.css` 中的微交互助手（例如，`.hover-fade`、`light`）用于细微的悬停状态或强调效果。
- 集成 Google Fonts（Funnel Display），以及可选的实用类，如 `.arial`。
- 在 `icons/` 下提供图标资源，帮助说明加载和状态。
## 快速开始
```bash
npm install
npm run start
```
该应用程序启动一个 800×600 的 Electron 窗口，加载 `index.html`。修改任何 CSS 或 HTML 文件后重启（或重新加载）以查看更改。
## 项目结构
```text
index.js # Electron 启动文件
index.html # 使用 TelUI 样式的演示画布
font.css # 排版工具和 Google Fonts 导入
color.css # 颜色令牌（例如，gentleblue、brightblue、gray/grey、green）
animation.css # 悬停淡出助手和光效过滤器
header.css # 头部容器的结构调整
align.css # `<center>` 助手，用于水平居中任何块元素
icons/ # 共享位图 / gif 资源（例如，loading.gif）
package.json # 依赖项和 npm 脚本
```
## 使用工具
1. 在您的 HTML 入口文件中引用所需的样式：
```html
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="align.css">
```
2. 应用提供的类或自定义元素标签：
```html
<gentleblue>
<header>
<h1>TelUI</h1>
</header>
<p class="arial">原型文本在这里。</p>
</gentleblue>
```
`font.css` 提供了 `.funneldisplay` 和 `.arial`。颜色令牌（`gentleblue`、`brightblue`、`gray`、`grey`、`green`）可以作为元素选择器使用，或者如果您更喜欢 `.gentleblue` 语法，可以转换为类。
3. 在需要的地方添加动画助手：
```html
<button class="hover-fade funneldisplay">悬停我</button>
<light>强调块</light>
```
`.hover-fade` 应用共享的不透明度/缩放过渡；`light` 标签提供了一个过滤的高亮包装，而无需触及内联样式。
4. 使用专用标签居中块元素：
```html
<center>
<button>CTA</button>
</center>
```
`align.css` 样式表将 `<center>` 限制为 `max-width: fit-content`，并使用自动水平边距，使任何嵌套元素保持居中，而无需额外的包装。
5. 通过指向资源目录重用图标：
```html
<img src="icons/loading.gif" alt="加载指示器">
```
## 扩展 TelUI
- 通过更新相应的 CSS 文件添加新的颜色令牌或排版助手；保持选择器声明性，并按类别组织。
- 对于额外的 Electron 行为（菜单、预加载脚本、IPC），扩展 `index.js`，同时保持以 UI 为中心的文件与框架无关。
- 当作为可分发应用程序发布时，配置 `electron-builder` 或您喜欢的打包工具；当前的设置故意保持简单。
## 许可证
除非在单独的文件中另有说明，TelUI 在 MIT 许可证下分发。请在重新分发 TelUI 或衍生作品时包含许可证文本。
网址：
https://github.com/eotter-beep/telui
查看原文
# TelUI<p>TelUI is a Electron-based UI framework that packages a handful of reusable front-end primitives—color utilities, typography helpers, and basic structural styles—so you can prototype simple desktop UI ideas with minimal setup.<p>## Features
- Bundled Electron runner (`npm start`) that serves `index.html` for instant desktop previews.
- Tokenized styling layers: `color.css`, `font.css`, `header.css`, and `align.css` keep presentation rules isolated and easy to remix.
- Micro-interaction helpers in `animation.css` (e.g., `.hover-fade`, `light`) for subtle hover states or accent passes.
- Google Fonts integration (Funnel Display) plus opt-in utility classes like `.arial`.
- Drop-in icon assets under `icons/` to help illustrate loading and status states.<p>## Quick start<p>```bash
npm install
npm run start
```<p>The app launches an 800×600 Electron window that loads `index.html`. Modify any CSS or HTML file and restart (or reload) to see the changes.<p>## Project layout<p>```text
index.js # Electron bootstrapper
index.html # Demo canvas that consumes TelUI styles
font.css # Typography utilities and Google Fonts import
color.css # Color tokens (e.g., gentleblue, brightblue, gray/grey, green)
animation.css # Hover fade helper and light filter effects
header.css # Structural tweaks for header containers
align.css # `<center>` helper to horizontally center any block
icons/ # Shared bitmap / gif assets (e.g., loading.gif)
package.json # Dependencies and npm scripts
```<p>## Using the utilities<p>1. Reference the styles you need in your HTML entry point:<p><pre><code> ```html
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="align.css">
```
</code></pre>
2. Apply the provided classes or custom element tags:<p><pre><code> ```html
<gentleblue>
<header>
<h1>TelUI</h1>
</header>
<p class="arial">Prototype copy goes here.</p>
</gentleblue>
```
`font.css` exposes `.funneldisplay` and `.arial`. The color tokens (`gentleblue`, `brightblue`, `gray`, `grey`, `green`) can be used either as element selectors or converted into classes if you prefer `.gentleblue` syntax.
</code></pre>
3. Add animation helpers where needed:<p><pre><code> ```html
<button class="hover-fade funneldisplay">Hover me</button>
<light>Accent block</light>
```
`.hover-fade` applies the shared opacity/scale transition; the `light` tag gives you a filtered highlight wrapper without touching inline styles.
</code></pre>
4. Center blocks with the dedicated tag:<p><pre><code> ```html
<center>
<button>CTA</button>
</center>
```
The `align.css` stylesheet constrains `<center>` to `max-width: fit-content` and uses auto horizontal margins so any nested elements stay centered without extra wrappers.
</code></pre>
5. Reuse icons by pointing to the assets directory:<p><pre><code> ```html
<img src="icons/loading.gif" alt="Loading indicator">
```
</code></pre>
## Extending TelUI<p>- Add new color tokens or typography helpers by updating the corresponding CSS file; keep selectors declarative and organized by category.
- For additional Electron behaviors (menus, preload scripts, IPC), expand `index.js` while leaving the UI-focused files framework‑agnostic.
- When shipping as a distributable app, configure `electron-builder` or your favorite packager; the current setup is intentionally minimal.<p>## License<p>Unless stated otherwise in individual files, TelUI is distributed under the MIT License. Please include the license text when redistributing TelUI or derivative works,<p>URL:<p>https://github.com/eotter-beep/telui