________    ________   __     ______     ______  ___     ___      ___    ___ ___
/\   ___ `\ /\____   \ /  `\  /  ____\  /' ____ `\\   -  /\  \    /\  \  /\  \\  \
\ \  \  /\ `\/___/   //  _  \/\  \___/_/\  \  /\  \\    " .\  \   \ \  \ \ \  \\  \
 \ \  \ \ \  \  /   //  /_\  \_\   ___ `\\  \ \ \  \\  \ .     \   \ \  \ \ \  \\  \
  \ \  \___\  \/   //\______   __  \_/\  \\  \___\  \\  \  " .  \   \ \  \___\  \\  \
   \ \________/\__/ \/_____/\__\/\_______/ \________/ \__\  \ \__\   \ \________/ \__\
    \/_______/\/_/         \/__/\/______/ \/_______/ \/__/   \/__/    \/_______/ \/__/

Features :

End-users :

• Professional/minimal look/feel
• Optional configurable themes (light, dark, system)
• Optional configurable layouts (horizontal, vertical)
• Optional configurable UI density
• Compatable with all screen sizes
• Desktop keyboard accessible
• Mobile touch/swipe controls
• Fullscreen/Zen mode

Developers :

• 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

Governing Developement Priciples/Approaches:

• Minimal clean markup
• Minimal clean look/feel
• 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 :
  1. Can it be done in HTML?
  2. Then can it be done in CSS?
  3. Then can it be done in JS?
  4. 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 can now handled via modern CSS [ :has() ]
  • Air gap separaton between middle-tier and related code from back-end-tier and related code