dragontheory / d7460n Goto Github PK

• 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 ∷
  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 is now handled via modern CSS [ :has() ]
  • Air gap separation between middle-tier and related code from back-end-tier and related code

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