Les framework CSS thématiques ne manquent pas d'originalité, et certains s'inspirent directement de l'univers du jeu vidéo. Celui-ci en est un bon exemple : il permet de reproduire l'apparence des menus et des interfaces de la Nintendo DS directement dans une page web.
ds.css est un framework CSS qui recrée les codes visuels des menus de la Nintendo DS : boutons arrondis, champs de formulaire, cases à cocher et boutons radio reprennent l'apparence caractéristique de la console. Parmi ses points notables :
- Styles complets pour les boutons, formulaires et autres éléments d'interface
- Une version globale, qui applique le style à l'ensemble de la page
- Une version "scoped" (
ds-scoped.css), qui limite l'application du thème aux éléments enfants d'un conteneur portant la classeds-css, pratique pour mélanger contenu classique et contenu stylisé DS sur une même page - Des web components prêts à l'emploi : un calendrier interactif (
ds-calendar) et une horloge (ds-clock)
L'installation peut se faire via CDN :
<link rel="stylesheet" href="https://unpkg.com/@spiritov/ds.css" />Ou via npm :
npm i @spiritov/ds.cssIl est également possible de récupérer directement les fichiers du dossier /dist du dépôt pour un usage local.
Pour le calendrier interactif, il suffit d'importer le web component correspondant puis d'utiliser la balise <ds-calendar></ds-calendar> :
<script type="module"
src="https://unpkg.com/@spiritov/ds.css/dist/widgets/ds-calendar.js">
</script>
<ds-calendar></ds-calendar>L'auteur du projet indique vouloir enrichir ds.css avec de nouveaux composants, notamment des éléments inspirés de Pictochat, l'application de messagerie de la Nintendo DS.
Une démo est disponible en ligne à l'adresse css.ds.dreamyard.xyz pour se faire une idée du rendu avant de l'intégrer à un projet.
N'hésitez pas à aller jeter un œil à ds.css si vous cherchez à donner une touche rétro-gaming à votre prochain petit projet web.
