Oat - bibliothèque d’interface ultra-légère, zéro dépendance, en HTML·CSS·JS sémantiques

• Bibliothèque de composants UI ultra-légère basée sur HTML et CSS, conçue sans aucun processus de build ni dépendance à un framework
• Composée de seulement 6 KB de CSS et 2,2 KB de JS (compressés et gzip), elle permet d’utiliser immédiatement les principaux éléments d’interface nécessaires à une application web
• Stylise directement des éléments HTML sémantiques comme <button>, <input>, <dialog>, tout en minimisant l’usage de classes pour réduire la pollution du code
• Prend en charge nativement l’accessibilité (Accessibility) avec les rôles ARIA et la navigation au clavier
• Vise une composition d’interface simple, fondée sur les standards et durable dans le temps, en s’affranchissant des dépendances de l’écosystème JS complexe et du sur-ingénierie

---

Présentation d’Oat

• Oat est une bibliothèque de composants UI sémantiques ultra-légère basée sur HTML + CSS, entièrement dépourvue de dépendances externes
  • Aucun framework, outil de build ou configuration d’environnement de développement n’est nécessaire
  • Il suffit d’inclure de petits fichiers CSS et JS pour l’utiliser immédiatement
• Avec une taille d’environ 8 KB (6 KB de CSS + 2,2 KB de JS), elle permet de mettre en place rapidement l’UI de base d’une application web
• Parmi les principaux composants figurent Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar, etc.

HTML sémantique et accessibilité

• Les styles s’appliquent automatiquement sur la base de balises et attributs sémantiques, ce qui permet de conserver un design cohérent sans définir de classes
  • Exemple : styles appliqués directement à des éléments HTML natifs comme <button>, <input>, <dialog>
  • Les attributs sémantiques comme role="button" sont également reconnus automatiquement
• Les rôles ARIA et la navigation au clavier sont pris en charge sur l’ensemble des composants
  • L’application stricte des standards d’accessibilité améliore l’expérience utilisateur

Zéro dépendance et simplicité

• Aucune dépendance à un framework ou à une bibliothèque JS ou CSS
  • Exclut totalement la complexité de l’écosystème Node.js et les problèmes de dépendances inutiles
  • Utilisable immédiatement, sans build ni gestion de paquets
• Certains composants dynamiques sont implémentés en WebComponents avec un minimum de JS

Personnalisation et thèmes

• Les variables CSS permettent d’ajuster facilement les couleurs de thème et les styles
  • En ajoutant l’attribut data-theme="dark" à body, le thème sombre s’applique automatiquement
• Le design global est influencé par l’esthétique shadcn

Contexte de création

• Le projet est né d’une insatisfaction face à la complexité excessive et aux problèmes de dépendances des frameworks UI JavaScript existants
  • Objectif : éviter les problèmes de « dependency hell » et de « lock-in » de l’écosystème Node.js
• Il a été créé pour disposer directement d’une bibliothèque UI simple, fondée sur les standards et maintenable sur le long terme
• Oat permet aux développeurs de mettre en place une interface prête à l’emploi sans processus de build inutile