webui98

v1.0.0

Published

a month ago

A lightweight, hackable GUI kit with a Windows 95/98 aesthetic. Zero dependencies.

0High
0Medium
0Low

waferflop-ai

css ui gui windows95 win98 retro lightweight hackable tahoma webui98

WebUI98 — Modern Classic

A lightweight, hackable GUI kit with a Windows 95/98 soul. Zero dependencies. Pure HTML, CSS, and vanilla JavaScript.

Features

Hard, chiseled edges – no rounded corners, just sharp 3D bevels.
3‑tier color system – clear visual hierarchy for tabs and surfaces.
Mechanical feedback – buttons and controls translate on press, mimicking physical switches.
Dark / Light mode – toggle with a single click, persists via localStorage.
Scroll‑Spy Sidebar – auto‑highlights the section you're viewing.
Rich component library:
- Buttons (Default, Primary, Success, Danger)
- Cards, Tags, Badges
- Spinners & Progress bars
- Dropdowns, Modals, Toasts
- Forms (Inputs, Select, Checkboxes, Radios)
- Toggle Switch (physical slider)
- Breadcrumbs, Pagination
- Code Blocks (Courier New)
- Tabs (3‑tier active state)
- Tables
- Context Menu (right‑click)

Installation

npm

npm install webui98

Then import into your project:

<link rel="stylesheet" href="node_modules/webui98/webui98.css" />
<script src="node_modules/webui98/webui98.js"></script>

CDN (or direct download)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/webui98/webui98.css" />
<script src="https://cdn.jsdelivr.net/npm/webui98/webui98.js"></script>

Or just copy the HTML structure from the demo page.

Quick Start


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My WebUI98 App</title>
    <link rel="stylesheet" href="webui98.css" />
</head>
<body>

    <!-- Header -->
    <header class="app-header">
        <div class="title">
            <span class="icon">🖥️</span>
            <span>My App</span>
        </div>
        <div class="header-controls">
            <button class="win-btn" id="themeToggle">🌓</button>
            <button class="win-btn close">✕</button>
        </div>
    </header>
    <hr class="flatline" />

    <!-- Sidebar -->
    <nav class="sidebar">
        <div class="nav-title">📂 Menu</div>
        <a href="#section1" class="active">Section 1</a>
        <a href="#section2">Section 2</a>
    </nav>

    <!-- Content -->
    <main class="content">
        <section id="section1">
            <h2>Hello, WebUI98!</h2>
            <button class="btn btn-primary" onclick="showToast('Hello!', 'success')">
                Click Me
            </button>
        </section>
    </main>

    <!-- Toast Container -->
    <div class="toast-container" id="toastContainer"></div>

    <script src="webui98.js"></script>
</body>
</html>

Customization

Override the CSS variables in your own stylesheet:


:root {
    --accent: #ff6600;              /* your brand color */
    --header-bg-start: #1a1a2e;
    --header-bg-end: #16213e;
    --surface: #f4f4f4;
    /* ... etc */
}

Contributing

Pull requests are welcome! Please keep the zero‑dependency rule and maintain the hard‑edged, 95/98 aesthetic.

License

Acknowledgements

Built for the classic Windows interface.
Fonts: Tahoma (UI) and Courier New (code).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme