- Professional/minimal look/feel
- Desktop keyboard accessible
- Desktop right click shortcuts
- In context searchable help system
- Mobile touch/swipe controls
- Compatible with all screen sizes
- Optional configurable themes (light, dark, system)
- Optional configurable layouts (horizontal, vertical)
- Optional configurable UI density
- Optional full screen/Zen mode
- Pure CSS UI Template
- Single Page Application (SPA)
- Progressive Web Application (PWA)
- JAMstack architecture
- W3C/WHATWG standards compliant
- Vanilla (no dependencies)
- Minimal nesting (flat)
- Minimal/no classes
- Data agnostic
- JS Framework agnostic
- Media platform agnostic (responsive)
- Browser agnostic
- No build process
- No compile process
- No server required
- Web Storage API
- Modern CSS ∷
:has()
pseudo-class@layer
(optional third party integration)- container queries
- custom elements
- custom properties
- Minimal clean professional look/feel
- Minimal clean markup
- Self-aware UI ∷
- Buttons only fetch, push, and clear data
- UI detects and reacts [
:has()
] to when data is present - Loading animation between button click and data fully loaded
- Least Power ∷
- Can it be done in HTML?
- Then can it be done in CSS?
- Then can it be done in JS?
- Then use more a powerful language?
- Separation of Concerns ∷
- Air gap separation between UI and related code (HTML/CSS) and data and related code (JS and or optional frameworks AKA Middle-tier) Meaning: no data/business logic in HTML
- Business logic is now handled via modern CSS [
:has()
] - Air gap separation between middle-tier and related code from back-end-tier and related code
________ ________ __ ______ ______ ___ ___ ___ ___ ___ /\ ___ `\ /\____ \ / `\ / ____\ /' ____ `\\ - /\ \ /\ \ /\ \\ \ \ \ \ /\ `\/___/ // _ \/\ \___/_/\ \ /\ \\ " .\ \ \ \ \ \ \ \\ \ \ \ \ \ \ \ / // /_\ \_\ ___ `\\ \ \ \ \\ \ . \ \ \ \ \ \ \\ \ \ \ \___\ \/ //\______ __ \_/\ \\ \___\ \\ \ " . \ \ \ \___\ \\ \ \ \________/\__/ \/_____/\__\/\_______/ \________/ \__\ \ \__\ \ \________/ \__\ \/_______/\/_/ \/__/\/______/ \/_______/ \/__/ \/__/ \/_______/ \/__/