Skeletonic Stylus

Skeletonic Stylus v2.0.0 מגיעה עם שלוש פלטות צבעים אופציונליות, כל אחת מופצת כגיליון סגנונות ממוזער נפרד כך שאתם משלמים רק על מה שאתם משתמשים.

פלטה קובץ גודל (min)
Material dist/css/palettes/material/skeletonic-material.min.css כ-8 KB
Tachyons dist/css/palettes/tachyons/skeletonic-tachyons.min.css 7.3 KB
Web-safe dist/css/palettes/websafe/skeletonic-websafe.min.css כ-4 KB

דף זה טוען את פלטת Tachyons כך שמחלקות שירות הצבע למטה מוצגות כראוי.

אפורי ליבה של Skeletonic

גיליון הסגנונות הליבתי מגיע עם סולם אפור נגיש בן 11 שלבים, חשוף כ---cl-grey-100 עד --cl-grey-1000.

100
300
500
700
200
400
600
900

צבעי מותג (v2.0.0 — ניגודיות AA)

ב-v2.0.0 טוקני הראשי והמשני הוכהו כדי לעמוד ביחס ניגודיות WCAG 4.5:1 מול טקסט לבן ישירות מהקופסה.

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

הערה. --cl-tertiary (#757c8a) משיג יחס ניגודיות של 4.71:1 מול לבן — עומד בדרישות AA עבור טקסט גדול (≥ 18 px מודגש / ≥ 24 px רגיל) אך לא עבור טקסט גוף. שלבו אותו עם רקעים כהים יותר או השתמשו בו רק לאלמנטים דקורטיביים לא חיוניים.

מחלקות שירות של פלטת Tachyons

כשאתם טוענים את skeletonic-tachyons.min.css אתם מקבלים סט מלא של מחלקות צבע חד-תכליתיות — אותו ארטיפקט נשלח, מודול הצטרפות.

<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>

מפרט פלטת Tachyons המלא מתועד ב- tachyons.io/docs/themes/skins; הגרסה הנשלחת כאן היא זו ש-Skeletonic מהדרת.

חזרה לרכיבים ←