Page d'accueil>Ressources de création de sites Web>Données du site Web
Télécharger

? matcha.css

Matcha.css est une bibliothèque CSS pure conçue pour styliser des éléments HTML de la même manière qu'une feuille de style de navigateur par défaut, éliminant la nécessité pour les utilisateurs de corriger manuellement leurs documents.

Idéal pour le prototypage rapide, les pages HTML statiques, les documents générés par Markdown et les développeurs cherchant à rationaliser leur flux de travail sans plonger dans des subtilités CSS et souhaiter utiliser la gamme complète des éléments HTML disponibles.

  • ✅ Pas d'étapes de construction
  • ✅ Pas de dépendances
  • ✅ Pas de javascript
  • ✅ Aucune configuration nécessaire
  • ✅ Aucun refactorisation requis
  • ✅ ~7kB gziped (peut être encore réduit)

? Exemples de captures d'écran

? Pourquoi choisir Matcha.css ?

? Agnostique

Fonctionne de manière transparente avec n'importe quel document et couvre une gamme plus large d'éléments HTML par rapport aux bibliothèques similaires. Il reste discret en tirant parti des pseudo-éléments CSS et offre un support approfondi de navigateur.

? Réversible

Incluez simplement son <link rel="stylesheet"> pour commencer et supprimez-le chaque fois que cela est nécessaire sans avoir besoin de refactorisation de documents ou de nettoyage.

? Sémantique

Adapte le style basé sur la hiérarchie des éléments, fournissant des comportements intuitifs tels que "sous-ménus implicite" lors des éléments de nidification <menu> , indicateur de champ obligatoire ( * ) Lorsqu'un <label> est associé à <input required> , etc.

? Personnalisable

Brew votre propre version à l'aide de notre constructeur personnalisé pour sélectionner des fonctionnalités spécifiques et réduire la taille finale de construction en fonction des besoins de votre projet.

? Open source

Sorti sous la licence MIT, disponible gratuitement sur github.com/lowlighter/matcha.

Usage

Pour utiliser Matcha.Css , incluez simplement la ligne suivante dans la section <head> de votre document. C'est aussi simple! 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >

Les actifs sont hébergés sur Vercel, mais Matcha.CSS est également disponible sur les services et CDN qui distribuent des packages NPM tels que JSDelivr.

Toutes les versions publiées sont disponibles dans le répertoire /v/ . Par défaut, la branche main est servie.

? À la carte

Chaque sous-répertoire répertorié dans /styles Directory est également directement servi à partir de matcha.mizu.sh. Par exemple, si vous souhaitez uniquement inclure les styles de @syntax-highlighting plutôt que d'utiliser la version par défaut ou une version personnalisée, vous pouvez utiliser: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " >

Cependant, à noter qu'à moins que vous ne fournissiez vos propres variables CSS, vous devrez probablement inclure le package @root car il contient toute la définition des variables matcha.css.

Tous les fichiers mod.css sont également aliasés à leurs répertoires parentaux respectifs pour plus de commodité, ce qui signifie que vous pouvez également utiliser: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >

? Contributif

? Portée du projet

  • Respecter les meilleures pratiques de l'accessibilité et de l'utilisabilité
  • Respecter les préférences des utilisateurs finaux (par exemple, schéma de couleurs)
  • Soyez adapté à un bureau et à des mobiles
  • Ne change pas radicalement son style actuel (sauf si pour remplir l'un des principes mentionnés précédents)
  • Rester léger, modulaire et personnalisable
    • Les fonctionnalités supplémentaires considérées comme "ballonneurs" seront exclues par défaut et seront opt-in
    • Les règles !important ne seront jamais utilisées pour s'assurer que les utilisateurs peuvent facilement remplacer les styles

Structure du projet

Ce projet est séparé en trois répertoires principaux:

  • /api pour les fonctions sans serveur s'exécute sur Vercel
  • /app pour les points d'entrée, les actifs statiques et la construction de scripts
  • /styles pour les fichiers source CSS

? Répertoire à propos /styles

Chaque sous-répertoire de ce dossier est destiné à être principalement autonome et à portée. Il aide à maintenir la base de code organisée tout en permet également aux utilisateurs de cordonner des fonctionnalités spécifiques et de créer des versions personnalisées.

Les fonctionnalités supplémentaires doivent être préfixées à l'aide du personnage @ et doivent très probablement être exclues par défaut dans le constructeur pour éviter de faire gonfler la version par défaut.

? ‍ Le cycle de vie du développement

Lors de la soumission d'une demande de traction, l'aperçu sera disponible sur Vercel. Les responsables et autres contributeurs peuvent examiner les modifications et fournir des commentaires avant la fusion.

Le développement local est destiné à être effectué en utilisant le runtime DENO. Si vous ne souhaitez pas l'installer, vous pouvez également utiliser la configuration DevContainer fournie pour exécuter le projet dans un environnement conteneurisé ou directement sur des codes GitHub.

Pour démarrer le serveur de développement, exécutez la commande suivante: 

deno task serve

Avant de soumettre vos modifications, assurez-vous que tout est correctement formaté en exécutant la commande suivante: 

deno task fmt

Licence 

 MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout