Skeletonic Stylus

Skeletonic Stylus v2.0.0 levererar tre valfria fargpaletter, var och en distribuerad som sitt eget minifierade stylesheet sa att du bara betalar for det du anvander.

Data table table
Palett Fil Storlek (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
Webbsaker dist/css/palettes/websafe/skeletonic-websafe.min.css ≈3.5 KB

Denna sida laddar Tachyons-paletten sa att farg-utility-klasserna nedan renderas korrekt.


Skeletonics grundgraskalor

Karn-stylesheetet levererar en tillganglig 11-stegs graskala exponerad som --cl-grey-100 ... --cl-grey-1000.

100
300
500
700
200
400
600
900

Markesfarger (v2.0.0 — AA-kontrast)

I v2.0.0 morkades de primara och sekundara token for att uppna WCAG 4.5:1-kontrast mot vit text direkt.

--cl-primary
hsl(210 100% 42%)
--cl-secondary
hsl(195 100% 33%)
--cl-tertiary
#757c8a

Observera. --cl-tertiary (#757c8a) uppnar ett kontrastforhallande pa 4.71:1 mot vitt — AA-godkant for stor text (minst 18 px fet / minst 24 px normal) men inte for brodtext. Kombinera den med morkare bakgrunder eller anvand den enbart for dekorativa, icke-vasentliga element.


Tachyons palett-utilityklasser

Nar du laddar skeletonic-tachyons.min.css far du en komplett uppsattning av fargklasser med ett enda syfte — samma levererade artefakt, opt-in-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>

Den fullstandiga Tachyons-palettspecifikationen ar dokumenterad pa tachyons.io/docs/themes/skins; versionen som levereras har ar den som Skeletonic kompilerar.

Tillbaka till komponenter →