Skeletonic Stylus v2.0.0 liefert drei optionale Farbpaletten, jeweils als eigenständiges, minifiziertes Stylesheet verteilt — so zahlen Sie nur für das, was Sie tatsächlich verwenden.
| Palette | Datei | Größe (min) |
|---|---|---|
| Material | dist/css/palettes/material/skeletonic-material.min.css |
≈17.4 KB |
| Tachyons | dist/css/palettes/tachyons/skeletonic-tachyons.min.css |
7,3 KB |
| Websicher | dist/css/palettes/websafe/skeletonic-websafe.min.css |
≈3.5 KB |
Diese Seite lädt die Tachyons-Palette, damit die unten gezeigten Farb-Utility-Klassen korrekt dargestellt werden.
Skeletonic-Kerngrautöne
Das Kern-Stylesheet enthält eine barrierefreie 11-stufige Grauskala,
bereitgestellt als --cl-grey-100 … --cl-grey-1000.
Markenfarben (v2.0.0 — AA-Kontrast)
In v2.0.0 wurden die primären und sekundären Farbtokens abgedunkelt, um den WCAG-Kontrast von 4,5:1 gegenüber weißem Text standardmäßig zu erfüllen.
hsl(210 100% 42%)
hsl(195 100% 33%)
#757c8a
Hinweis.
--cl-tertiary(#757c8a) erreicht ein Kontrastverhältnis von 4.71:1 gegen Weiss — AA-konform für grossen Text (≥ 18 px fett / ≥ 24 px normal), aber nicht für Fliesstext. Kombinieren Sie ihn mit dunkleren Hintergründen oder verwenden Sie ihn nur für nicht wesentliche dekorative Elemente.
Tachyons-Palette — Utility-Klassen
Wenn Sie skeletonic-tachyons.min.css laden, erhalten Sie einen
vollständigen Satz zweckgebundener Farbklassen — dasselbe ausgelieferte
Artefakt, als optionales Modul.
<span class="bg-blue white pa2">.bg-blue .white</span>
<span class="bg-light-green dark-green pa2">.bg-light-green .dark-green</span>
<span class="bg-washed-yellow dark-gray pa2">.bg-washed-yellow .dark-gray</span>
Die vollständige Tachyons-Palettenspezifikation finden Sie unter tachyons.io/docs/themes/skins; die hier ausgelieferte Version ist diejenige, die Skeletonic kompiliert.