water.css
1.0.0
? Eine Drop-In-Sammlung von CSS-Stilen, um einfache Websites nur ein wenig schöner zu machen
Ich mache üblicherweise schnelle Demo -Seiten oder Websites mit einfachen Inhalten. Für diese möchte ich keine Zeit damit verbringen, sie zu stylen, aber die Hässlichkeit der Standardstile nicht mag.
Water.css ist ein CSS -Framework, für das keine Klassen erforderlich sind. Sie fügen es einfach in Ihren <head> ein und vergessen es, während es schweigend schöner macht.
Möglicherweise möchten Sie Water.css verwenden, wenn Sie eine einfache statische Seite oder eine Demo -Website erstellen, die Sie nicht Zeit mit dem Styling verbringen möchten.
Obwohl es ursprünglich nicht für komplexere Websites entwickelt wurde, haben viele Entwickler Water.css als Basisstylesheet verwendet und kreativ benutzerdefinierte Stile angewendet, um eine ganze App zu erstellen. Nichts hindert dich daran, dasselbe zu tun!
Stecken Sie dies einfach in Ihren <head> :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
Eine Vorschau der verschiedenen Themen finden Sie auf der Demo -Seite ! ⚡
Die water.css -Datei wechselt automatisch zwischen hellem und dunklem Modus, abhängig von den Systemeinstellungen des Geräts eines Benutzers. Diese Erkennung wird durch eine CSS-Medienabfrage ermöglicht, die als prefers-color-scheme bezeichnet wird. In Browsern, in denen die Präferenz nicht erkannt werden kann, haften water.css am leichten Thema.
Wenn Sie dieses Verhalten vermeiden möchten, verwenden Sie entweder dark.css oder light.css .
prefers-color-scheme drei Verteilungen water.css Water .
Seien Sie sich bewusst, dass der IE auch keine Laufzeit -Themen unterstützt und feste Fallback -Werte verwendet werden. Wenn Sie das Thema von Water.css auf eine Weise überschreiben möchten, die mit dem IE kompatibel ist, empfehlen wir Ihnen, Ihr eigenes Thema zu kompilieren.
Alle Versionen sind auch als unminifizierte Stylesheets erhältlich, die während der Entwicklung praktisch sein können.
Entfernen Sie einfach die .min aus dem Dateinamen.
Möchten Sie einige Anpassungen vornehmen oder Ihr eigenes Thema völlig anders als die offiziellen dunklen oder hellen Themen erstellen? Da Water.css mit CSS -Variablen gebaut wird, ist dies super einfach! Hier ist eine Liste aller Variablen, die Sie nach Ihren Wünschen ändern können:
--background-body--background--background-alt--selection--text-main--text-bright--text-muted--links--focus--border--code--animation-duration--button-hover--scrollbar-thumb--scrollbar-thumb-hover--form-placeholder--form-text--variable--highlight--select-arrowWenn Sie eine Version mit Unterstützung für Legacy -Browser wie Internet Explorer verwenden, gehen Sie zum Kompilieren Ihres eigenen Themas!
Water.css verwendet benutzerdefinierte Eigenschaften ( "CSS -Variablen" ), um seine Grundstile wie Farben zu definieren. Diese können im Browser geändert und überschrieben werden.
Aus diesem Grund können Sie der Seite einfach Ihr eigenes Stylesheet hinzufügen und dort Ihre eigenen CSS -Variablen festlegen. Solange Ihr Stylesheet nach Water.css in der HTML kommt, werden Ihre Werte die Standards überschreiben und Ihr Thema wird angewendet!
In diesem kurzen Beispiel wird Water.css verwendet, aber alle Links rot färben:
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
:root {
--links: red;
}
</ style >Wenn Sie nur einen Wert für den Dunkel- oder Lichtmodus ändern möchten, verwenden Sie eine solche Medienabfrage wie folgt:
< style >
:root {
--links: blue; /* Always applied */
}
@media (prefers-color-scheme: dark) {
:root {
--links: yellow; /* Only applied in dark mode (overrides blue) */
}
}
</ style >Wenn Sie sich an Browser ansprechen, ohne die benutzerdefinierten CSS -Eigenschaften wie den Internet Explorer zu unterstützen, ist die Themen von Laufzeit keine Option. Um Ihre eigene Themen anzuwenden, müssen Sie Ihre Änderungen in den Quelldateien selbst vornehmen und dann die CSS-Dateien neu kompilieren. Dies funktioniert wie folgt:
yarn aus, um Abhängigkeiten zu installierensrc/variables-*.cssyarn build aus, um die CSS -Dateien zu kompilierenout/ Verzeichnis auf Ihrer WebsiteMöglicherweise möchten Sie auch den beitragenden Leitfaden überprüfen, da weitere Informationen zum Build -Setup enthalten sind.
Water.css wird für alle besser, wenn Leute wie Sie helfen, es besser zu machen!
Schauen Sie sich unseren Beitrag zur Mitarbeiterin an, um zu erfahren, wie Sie loslegen.
Und danke, dass Sie sich die Zeit genommen haben, um einen Beitrag zu leisten! :)
