เกี่ยวกับ Skeletonic Stylus

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

Version: 2.0.0
Gzip: 7.7 KB
Brotli: 6.7 KB
License: MIT or Apache-2.0
Standard: WCAG 2.2 AA

สรุปสั้น ๆ

Skeletonic Stylus เป็นไลบรารี CSS แบบ Stylus โอเพนซอร์ส สำหรับการจัดสไตล์ UI ที่เข้าถึงได้ รวดเร็ว และเป็นโมดูล

เริ่มต้นในปี 2018 ในฐานะการทดลองส่วนตัวเกี่ยวกับ การส่ง CSS น้อยลง โดยไม่สูญเสียความสะดวกในการใช้งานของไลบรารีส่วนประกอบจริง ผ่านมาแปดปี เป้าหมายยังคงเหมือนเดิม

สิ่งที่คุณจะได้รับ

รวดเร็วปานสายฟ้า

ออกแบบและปรับแต่งอินเทอร์เฟซที่ตอบสนองได้ในไม่กี่นาที CSS variables แบบ native คลาสที่กำหนดไว้ล่วงหน้า กริด 12 คอลัมน์ที่ครอบคลุมทุกอิลิเมนต์ HTML เชิงความหมาย

เบา

ขนาด 7.7 KB gzipped หน้าเว็บโหลดเร็วขึ้น ทุกส่วนประกอบสำคัญยังคงอยู่

ออกแบบแบบ Responsive

สร้างมาสำหรับเดสก์ท็อปและมือถือ เลย์เอาต์ปรับตัวตามทุกอุปกรณ์ ปรับให้เหมาะกับการสัมผัส ใช้ HTML เชิงความหมายตลอด

การเข้าถึง

รองรับ WCAG 2.2 ตั้งแต่แรก: วงแหวน focus-visible คอนทราสต์ระดับ AA ตัวช่วยลิงก์ข้าม ส่วนประกอบที่ใช้คีย์บอร์ดได้ รองรับลดการเคลื่อนไหว — ไม่ต้องเพิ่มสไตล์ชีตหรือเขียน aria-* เพิ่ม

ไลบรารีส่วนประกอบ

ส่วนประกอบ CSS แบบโมดูลและ Stylus mixins ปุ่ม ฟอร์ม การ์ด แจ้งเตือน ป้ายกำกับ ชุดสี และแอนิเมชัน — สะอาด เป็นโมดูล พร้อมใช้งาน

ฟรีและโอเพนซอร์ส

ออกแบบ สร้าง และดูแลโดย Sebastien Rousseau สัญญาอนุญาตคู่ภายใต้ MIT หรือ Apache 2.0 ไม่มีค่าธรรมเนียม ไม่มีค่าลิขสิทธิ์ แม้แต่สำหรับการใช้งานเชิงพาณิชย์

เปรียบเทียบกับไลบรารีอื่น

สไตล์ชีตที่โฮสต์เองเพียงไฟล์เดียวครอบคลุมไทโปกราฟี ปุ่ม ฟอร์ม การ์ด ตาราง ชุดสี แอนิเมชัน และคลาสอรรถประโยชน์ ไม่มี JavaScript ไม่ต้อง build step ไม่มี peer dependencies กับ Bootstrap, Tailwind หรือ Bulma

Data table table
ฟีเจอร์	Skeletonic Stylus	Bootstrap 5	Tailwind CSS	Bulma
ขนาด gzipped	7.7 KB	~30 KB	~10 KB (varies)	~30 KB
รองรับ WCAG 2.2	มีในตัว	บางส่วน	ต้องทำเอง	บางส่วน
Cascade layers	ใช่ (`@layer`)	ไม่	ไม่	ไม่
โหมดมืด	`prefers-color-scheme`	เลือกเปิด	ใช้คลาส	เลือกเปิด
ต้องใช้ JavaScript	ไม่	ใช่ (Popper)	ไม่	ไม่
CycloneDX SBOM	ใช่	ไม่	ไม่	ไม่
ลดการเคลื่อนไหว	รองรับ	บางส่วน	ต้องทำเอง	บางส่วน
สัญญาอนุญาต	MIT หรือ Apache 2.0	MIT	MIT	MIT

หลักการ

การเข้าถึงคือพื้นฐาน ไม่ใช่เพดาน การรองรับ WCAG 2.2 ถูกฝังไว้ ในทุกส่วนประกอบ ไม่ใช่เป็น "ธีม" ที่ต่อเพิ่ม
ทุกไบต์มีความสำคัญ สไตล์ชีตที่ส่งออกเพียงไฟล์เดียวไม่ควรเกิน งบประมาณขนาดหน้าเว็บ เพดาน 8 KB gzipped ถูกบังคับใน CI
Cascade layers ชนะสงคราม specificity แก้ไขอะไรก็ได้อย่างมั่นใจ — ไม่ต้อง !important ไม่ต้องเทคนิคลำดับ DOM
Stylus ยังคงดี กระชับ แสดงออกได้ดี และทำให้ไลบรารี อยู่ในขนาด ~3,000 บรรทัดที่อ่านง่าย
ความน่าเบื่อคือฟีเจอร์ ไม่มี JS dependencies ไม่มี build-time magic ไม่มีการเปลี่ยนชื่อที่ทำให้เสียหาย คลาส CSS ทำสิ่งที่ชื่อบอก
ปรับธีมได้ในไม่กี่วินาที CSS custom properties แบบ native สำหรับ สี ระยะห่าง ไทโปกราฟี และมุมโค้ง
ป้องกัน supply chain npm provenance ที่ลงนาม อัปเดต Dependabot แบบล็อกเวอร์ชัน แก้ไข CVE-2023-44270 ผ่าน overrides

การกำหนดเวอร์ชันและ semver

Skeletonic Stylus ใช้ Semantic Versioning 2.0

Data table table
ระดับการเปลี่ยน	เมื่อใด	ตัวอย่าง
Major	ลบหรือเปลี่ยนชื่อคลาส mixin หรือ token สาธารณะ	1.x → 2.0
Minor	เพิ่มส่วนประกอบ mixin หรือ token ใหม่	1.1 → 1.2
Patch	แก้บั๊ก ปรับปรุง a11y ประสิทธิภาพ ความปลอดภัย	1.1.6 → 2.0.0

ชื่อคลาสสาธารณะทั้งหมด CSS custom properties ทั้งหมด และ Stylus mixins ที่ส่งออกทั้งหมดเป็นส่วนหนึ่งของ public API การเปลี่ยนแปลงที่ทำให้เสียหาย จะได้รับการเพิ่มเวอร์ชัน major พร้อมคู่มือการย้าย

การดูแลรักษา

Skeletonic Stylus ออกแบบ สร้าง และดูแลโดย Sebastien Rousseau สัญญาอนุญาตคู่ ภายใต้ MIT และ Apache 2.0

ยินดีรับปัญหา แนวคิด และการมีส่วนร่วม — ดูคู่มือการมีส่วนร่วม