/D7460N

Modern, vanilla (no dependencies), standards compliant, pure CSS UI template.

Primary LanguageCSS

D7460N UI

Your data your way.    ⎰⎰    Fast • Easy • Secure

 

 

 

 

 

/ Features

 

// End-users

  • 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

// 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 Principles

  • 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

 

 

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

† † †