Napakabilis
Magdisenyo at mag-customize ng responsive na interface sa ilang minuto. Mga native CSS variable, predefined na klase, 12-column grid na sumasaklaw sa bawat semantic HTML element.
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
Ang maikling bersyon
Ang Skeletonic Stylus ay isang open-source na Stylus CSS library para sa accessible, mabilis, at modular na pag-istilo ng UI.
Isinilang noong 2018 bilang isang personal na eksperimento sa pagpapadala ng mas kaunting CSS nang hindi binabaybay ang ergonomics ng isang tunay na component library. Walong taon na ang nakakaraan, hindi pa rin nagbabago ang layunin.
Ano ang ibinibigay nito sa iyo
Magaan
7.7 KB gzipped. Mas mabilis mag-load ang mga pahina. Bawat pangunahing building block ay nandoon pa rin.
Responsive na disenyo
Ginawa para sa desktop at mobile. Ang mga layout ay umaakma sa anumang device. Touch-optimised, semantic HTML sa lahat ng dako.
Aksesibilidad
Kasama na ang WCAG 2.2: focus-visible ring, AA contrast, skip-link helper, keyboard-friendly na component, reduced-motion support — walang dagdag na stylesheet, walang aria-* boilerplate.
Component library
Modular na CSS component at Stylus mixin. Button, form, card, alert, badge, palette at animasyon — malinis, modular, handang i-drop in.
Libre & open source
Idinisenyo, ginawa, at pinapanatili ni Sebastien Rousseau. Dual-licensed sa ilalim ng MIT o Apache 2.0. Walang bayad, walang gastos sa lisensya, kahit para sa komersyal na paggamit.
Paano ito nagkukumpara
Isang self-hosted na stylesheet ang sumasaklaw sa typography, button, form, card, table, palette, animasyon at utility class. Walang JavaScript. Hindi kailangan ng build step. Walang peer dependency sa Bootstrap, Tailwind o Bulma.
| Tampok | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| Laki (gzipped) | 7.7 KB | ~30 KB | ~10 KB (varies) | ~30 KB |
| WCAG 2.2 conformance | Kasama na | Bahagya | Manual | Bahagya |
| Cascade layer | Oo (@layer) |
Hindi | Hindi | Hindi |
| Dark mode | prefers-color-scheme |
Opt-in | Class-based | Opt-in |
| Kailangan ang JavaScript | Hindi | Oo (Popper) | Hindi | Hindi |
| CycloneDX SBOM | Oo | Hindi | Hindi | Hindi |
| Reduced-motion | Sinusunod | Bahagya | Manual | Bahagya |
| Lisensya | MIT o Apache 2.0 | MIT | MIT | MIT |
Mga prinsipyo
- Ang aksesibilidad ay ang sahig, hindi ang kisame. Ang pagsunod sa WCAG 2.2 ay kasama na sa bawat component, hindi ibinubolt-on bilang isang "theme".
- Mahalaga ang bawat byte. Ang isang shipped na stylesheet ay hindi dapat sumira sa iyong page-weight budget. Ang 8 KB gzipped na limitasyon ay ipinatutupad sa CI.
- Ang cascade layer ay mas mabuti kaysa sa specificity war. Mag-override ng kahit ano nang may kumpiyansa — walang
!important, walang DOM-order na trick. - Maganda pa rin ang Stylus. Maikli, expressive, at pinapanatili ang library sa ~3,000 nababasang linya.
- Ang boring ay isang tampok. Walang JS dependency. Walang build-time magic. Walang breaking rename. CSS class na ginagawa nang eksakto ang sinasabi nila.
- Ma-theme sa ilang segundo. Mga native CSS custom property para sa kulay, spacing, type at radii.
- Supply-chain hardened. Signed npm provenance. Naka-pin na Dependabot update. CVE-2023-44270 patched sa pamamagitan ng override.
Versioning & semver
Ang Skeletonic Stylus ay sumusunod sa Semantic Versioning 2.0.
| Bump | Kailan | Halimbawa |
|---|---|---|
| Major | Pag-alis o pag-rename ng isang public class, mixin, o token | 1.x → 2.0 |
| Minor | Pagdagdag ng bagong component, mixin, o token | 1.1 → 1.2 |
| Patch | Pag-aayos ng bug, a11y polish, performance, seguridad | 1.1.6 → 2.0.0 |
Lahat ng public class name, lahat ng CSS custom property, at lahat ng exported Stylus mixin ay bahagi ng public API. Ang isang breaking change ay nakakakuha ng major bump at migration guide.
Pamamahala
Ang Skeletonic Stylus ay idinisenyo, ginawa, at pinapanatili ni Sebastien Rousseau. Dual-licensed sa ilalim ng MIT at Apache 2.0.
Mga isyu, ideya, at kontribusyon ay malugod na tinatanggap — tingnan ang gabay sa pag-aambag.