1 points | by telui 12 hours ago ago
1 comments
# TelUI
TelUI is a minimal Electron-based UI framework with reusable front-end primitives—colors, typography, layout, and micro-interactions—so you can prototype desktop UI ideas fast.
*GitHub:* [https://github.com/eotter-beep/telui](https://github.com/eotter-beep/telui)
## Features - Electron runner (`npm start`) for instant desktop previews - Tokenized CSS layers: `color.css`, `font.css`, `header.css`, `align.css` - Micro-interactions in `animation.css` (`.hover-fade`, `light`) - Google Fonts + optional `.arial` class - Drop-in icons (`icons/`) and warning component - Text color & background utilities (`color.css`)
## Quick Start
```bash git clone https://github.com/eotter-beep/telui.git cd telui npm install npm start ```
```html Example Usage
<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">
<gentleblue> <header><h1>TelUI</h1></header> <p class="arial">Prototype copy</p> </gentleblue>
<center><button class="hover-fade funneldisplay">Hover me</button></center>
<warning><p>Something went wrong!</p></warning> <p class="greentext">Text in green</p> ```
# TelUI
TelUI is a minimal Electron-based UI framework with reusable front-end primitives—colors, typography, layout, and micro-interactions—so you can prototype desktop UI ideas fast.
*GitHub:* [https://github.com/eotter-beep/telui](https://github.com/eotter-beep/telui)
## Features - Electron runner (`npm start`) for instant desktop previews - Tokenized CSS layers: `color.css`, `font.css`, `header.css`, `align.css` - Micro-interactions in `animation.css` (`.hover-fade`, `light`) - Google Fonts + optional `.arial` class - Drop-in icons (`icons/`) and warning component - Text color & background utilities (`color.css`)
## Quick Start
```bash git clone https://github.com/eotter-beep/telui.git cd telui npm install npm start ```
```html Example Usage
<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">
<gentleblue> <header><h1>TelUI</h1></header> <p class="arial">Prototype copy</p> </gentleblue>
<center><button class="hover-fade funneldisplay">Hover me</button></center>
<warning><p>Something went wrong!</p></warning> <p class="greentext">Text in green</p> ```