TelUI 1.2: TelUI with fun alignments!

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 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.

Quick start

npm install
npm run 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
align.css      # `` helper to horizontally center any block
icons/         # Shared bitmap / gif assets (e.g., loading.gif)
package.json   # Dependencies and npm scripts

Using the utilities

1. Reference the styles you need in your HTML entry point:

    rel="stylesheet" href="font.css">
    rel="stylesheet" href="color.css">
    rel="stylesheet" href="header.css">
    rel="stylesheet" href="animation.css">
    rel="stylesheet" href="align.css">
   

2. Apply the provided classes or custom element tags:

   
   
     TelUI
   
    class="arial">Prototype copy goes here.
   
   

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.

1. Add animation helpers where needed:

    class="hover-fade funneldisplay">Hover me
   Accent block
   

.hover-fade applies the shared opacity/scale transition; the light tag gives you a filtered highlight wrapper without touching inline styles.

1. Center blocks with the dedicated tag:

   
     CTA
   
   

The align.css stylesheet constrains