Skeletonic Stylus v2.0.0 incluye tres paletas de colores opcionales, cada una distribuida como su propia hoja de estilos minificada para que solo pagues por lo que usas.
| Paleta | Archivo | Tamano (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 |
| Web-safe | dist/css/palettes/websafe/skeletonic-websafe.min.css |
≈3.5 KB |
Esta pagina carga la paleta Tachyons para que las clases de utilidad de color a continuacion se rendericen correctamente.
Grises del nucleo Skeletonic
La hoja de estilos principal incluye una escala de grises accesible de
11 pasos expuesta como --cl-grey-100 … --cl-grey-1000.
Colores de marca (v2.0.0 — contraste AA)
En v2.0.0 los tokens primario y secundario se oscurecieron para cumplir con un contraste WCAG 4,5:1 contra texto blanco desde el primer momento.
hsl(210 100% 42%)
hsl(195 100% 33%)
#757c8a
Nota.
--cl-tertiary(#757c8a) alcanza una relacion de contraste de 4.71:1 sobre blanco — conforme con AA para texto grande (≥ 18 px negrita / ≥ 24 px normal) pero no para texto de cuerpo. Combinalo con fondos mas oscuros o usalo solo para elementos decorativos no esenciales.
Clases de utilidad de la paleta Tachyons
Al cargar skeletonic-tachyons.min.css obtienes un conjunto completo de
clases de color de proposito unico — mismo artefacto publicado, modulo
de activacion opcional.
<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>
La especificacion completa de la paleta Tachyons esta documentada en tachyons.io/docs/themes/skins; la version publicada aqui es la que Skeletonic compila.