matcha
3.0.0
Matcha.css ist eine reine CSS -Bibliothek, mit der HTML -Elemente ähnlich wie bei einem Standard -Browser -Stylesheet gestaltet werden können, wodurch die Notwendigkeit von Benutzern erforderlich ist, ihre Dokumente manuell zu patchen.
Ideal für schnelle Prototypen, statische HTML-Seiten, Markdown-erzeugte Dokumente und Entwickler, die ihren Workflow optimieren möchten, ohne sich mit CSS-Feinheiten zu befassen, und die gesamte Palette der verfügbaren HTML-Elemente verwenden möchten.
~7kB GZIPED (kann weiter reduziert werden)
Arbeitet nahtlos mit jedem Dokument zusammen und deckt einen breiteren Bereich von HTML -Elementen im Vergleich zu ähnlichen Bibliotheken ab. Es bleibt unauffällig, indem es CSS-Pseudoelemente nutzt und umfangreiche Browserunterstützung bietet.
Fügen Sie einfach seine <link rel="stylesheet"> hinzu, um zu beginnen, und entfernen Sie ihn, wenn dies erforderlich ist, ohne dass Dokumente Refactoring oder Reinigung erforderlich ist.
Passt das Styling basierend auf Elementenhierarchie an und liefert intuitive Verhaltensweisen wie "implizites Untermenüs" beim Verschachteln von <menu> Elementen, der erforderliche Feldanzeige ( * ) Wenn ein <label> mit <input required> kombiniert wird, usw.
Brauen Sie Ihren eigenen Build mit unserem benutzerdefinierten Builder, um bestimmte Funktionen auszuwählen und die endgültige Build -Größe entsprechend den Anforderungen Ihres Projekts zu reduzieren.
Veröffentlicht unter der MIT -Lizenz, frei unter github.com/lowlighter/matcha.
Um Matcha.css zu verwenden, fügen Sie einfach die folgende Zeile in den Abschnitt <head> in Ihrem Dokument auf. Es ist so einfach!
< link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >Vermögenswerte werden auf Vercel gehostet, aber Matcha.css ist ebenfalls verfügbar und CDN -Dienste, die NPM -Pakete wie JSDelivr verteilt.
Alle veröffentlichten Versionen sind im /v/ -Verzeichnis erhältlich. Standardmäßig wird der main serviert.
Jedes Unterverzeichnis, das in /styles -Verzeichnis aufgeführt ist, wird ebenfalls direkt aus matcha.mizu.sh serviert. Wenn Sie beispielsweise nur die @syntax-highlighting -Stile einfügen möchten, anstatt den Standard-Build oder einen benutzerdefinierten Gebäude zu verwenden, können Sie verwenden:
< link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " > Beachten Sie jedoch, dass Sie das @root -Paket einfügen müssen, da es alle Matcha.css -Variablen Definition enthält, wenn Sie Ihre eigenen CSS -Variablen bereitstellen.
Alle
mod.css-Dateien sind auch ausgünstig auf ihre jeweiligen Elternverzeichnisse zugute kommen, was bedeutet, dass Sie auch verwenden können:< link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >
!important Regeln werden niemals verwendet, um sicherzustellen, dass Benutzer die Stile problemlos überschreiben könnenDieses Projekt ist in drei Hauptverzeichnisse unterteilt:
/api für serverlose Funktionen auf Vercel ausgeführt/app für Einstiegspunkte, statische Vermögenswerte und Erstellen von Skripten/styles für CSS -Quelldateien/styles -VerzeichnisJedes Unterverzeichnis in diesem Ordner soll größtenteils in sich geschlossen und abgeschult werden. Es hilft, die Codebasis organisiert zu halten, und ermöglicht es Benutzern auch, bestimmte Funktionen zu picken und benutzerdefinierte Builds zu erstellen.
Zusätzliche Funktionen sollten mit dem Charakter @ vorangestellt werden und im Bauherr standardmäßig ausgeschlossen werden, um das Aufblähen des Standardbaus zu vermeiden.
Bei der Übermittlung einer Pull -Anfrage ist die Vorschau auf Vercel verfügbar. Betreuer und andere Mitwirkende können die Änderungen überprüfen und vor dem Zusammenführen Feedback geben.
Die lokale Entwicklung soll mit der Deno -Laufzeit durchgeführt werden. Wenn Sie es nicht installieren möchten, können Sie auch die bereitgestellte DevContainer -Konfiguration verwenden, um das Projekt in einer Containerumgebung oder direkt in GitHub -Codenspaces auszuführen.
Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:
deno task serveStellen Sie vor dem Einreichen Ihrer Änderungen sicher, dass alles korrekt formatiert ist, indem der folgende Befehl ausgeführt wird:
deno task fmt MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)
