Skeletonic Stylus

Skeletonic Stylus v2.0.0 มาพร้อม ชุดสีเสริมสามชุด แต่ละชุด จัดจำหน่ายเป็นสไตล์ชีตที่ minify แยกต่างหาก จึงจ่ายเฉพาะที่ใช้

ชุดสี ไฟล์ ขนาด (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

หน้านี้โหลดชุดสี Tachyons เพื่อให้คลาสอรรถประโยชน์สีด้านล่าง เรนเดอร์ได้ถูกต้อง

สีเทาหลักของ Skeletonic

สไตล์ชีตหลักมาพร้อมสเกลสีเทา 11 ระดับที่เข้าถึงได้ เปิดเผยเป็น --cl-grey-100 … --cl-grey-1000

100
300
500
700
200
400
600
900

สีแบรนด์ (v2.0.0 — คอนทราสต์ AA)

ใน v2.0.0 โทเค็น primary และ secondary ถูกทำให้เข้มขึ้นเพื่อให้ได้ คอนทราสต์ 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 คุณจะได้ชุดคลาสสี วัตถุประสงค์เดียวครบชุด — artefact เดียวกัน โมดูลเลือกเปิด

<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 คอมไพล์

กลับไปที่ส่วนประกอบ →