$ show vinibiavatti1/TuiCss
TuiCss is a CSS framework and JavaScript library that enables developers to build retro-style text-based user interfaces (TUI) for the web, mimicking the aesthetic of MS-DOS applications and Turbo Vision. It provides a comprehensive set of SCSS components including windows, panels, buttons, forms, tables, charts, modals, progress bars, and a responsive grid system, all styled with high-contrast colors and monospace fonts. The accompanying vanilla JavaScript adds interactivity for tabs, collapsible side navigation, modal dialogs, and live clock displays. The codebase is well-organized with modular SCSS files, a build pipeline using Gulp, and a clean separation of concerns. While the library has no automated tests, its examples demonstrate functional correctness, and the component structure supports straightforward reuse or theming via SCSS variables. The project is published on npm and has a small but active community with a healthy issue tracker.
The LLM identified 3 files worth highlighting for reuse:
Implements vertical and horizontal bar charts using pure CSS with flexbox layout. The chart component is self-contained, using black background, white axes, and colored value bars. It supports configurable axes (with 'no-x-axis' and 'no-y-axis' classes) and animated bar growth via a CSS class. This is a reusable pattern for creating simple, visually distinct bar charts without any JavaScript dependency.
A compact vanilla JavaScript file that initializes four main UI controllers: tabs, datetime displays, side navigation, and modals. It uses a 'domReady' helper to ensure execution after DOM load. Each controller follows a pattern of querying for elements by class, attaching event listeners, and managing state via CSS class toggling. The datetime controller uses setInterval with time synchronization (setTimeout for next second) to keep clocks accurate. The code is modular, well-commented, and demonstrates a clean approach to adding interactive behavior to a CSS-only framework.
Defines a comprehensive color system with two intensity levels (168 and 255) and a set of utility classes for background, text, border, and hover states. Each color is generated with consistent naming: .{color}-{intensity}, .{color}-{intensity}-text, .{color}-{intensity}-border, and hover variants. This pattern is fully parameterized via SCSS variables and can be easily extended with new colors or intensities. It demonstrates a robust approach to creating a scalable color utility system in SCSS.