This content originally appeared on DEV Community and was authored by eotter-beep
TelUI
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.
Features
- Bundled Electron runner (
npm start) that servesindex.htmlfor instant desktop previews. - Tokenized styling layers:
color.css,font.css, andheader.csskeep 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.
Quick start
npm install
npm start
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.
Project layout
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
icons/ # Shared bitmap / gif assets (e.g., loading.gif)
package.json # Dependencies and npm scripts
Using the utilities
-
Reference the styles you need in your HTML entry point:
<link rel="stylesheet" href="font.css"> <link rel="stylesheet" href="color.css"> <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="animation.css"> -
Apply the provided classes or custom element tags:
<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.
-
Add animation helpers where needed:
<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.
-
Reuse icons by pointing to the assets directory:
<img src="icons/loading.gif" alt="Loading indicator">
Extending TelUI
- 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.jswhile leaving the UI-focused files framework‑agnostic. - When shipping as a distributable app, configure
electron-builderor your favorite packager; the current setup is intentionally minimal.
License
Unless stated otherwise in individual files, TelUI is distributed under the MIT License. Please include the license text when redistributing TelUI or derivative works,
URL:
https://github.com/eotter-beep/telui
This content originally appeared on DEV Community and was authored by eotter-beep
eotter-beep | Sciencx (2025-11-08T23:57:22+00:00) TelUI 1.1: New TelUI version! Complete with tools you need to develop good software.. Retrieved from https://www.scien.cx/2025/11/08/telui-1-1-new-telui-version-complete-with-tools-you-need-to-develop-good-software/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.