CSS framework "size" claims are usually marketing. This page reports
the actual bytes returned by wc -c, gzip -9, and brotli -q 11 for
the canonical CDN bundle each project documents on its homepage.
Numbers were gathered on 2026-04-30 with curl 8.7.1 against
jsDelivr. No purging, no tree-shaking, no per-page optimisation. The
reproduction commands at the bottom of this page run in about 30
seconds — please verify them yourself before quoting any number here.
Bundle sizes — bytes returned by wc -c
| Framework | Version | Raw | gzip −9 | brotli −q 11 |
|---|---|---|---|---|
| Skeletonic Stylus | 2.0.0 | 40,567 | 7,981 | 6,916 |
| Pico CSS | 2.1.1 | 83,319 | 11,651 | 10,098 |
| Bootstrap | 5.3.8 | 232,111 | 30,887 | 22,970 |
| Bulma | 1.0.4 | 677,931 | 64,854 | 36,338 |
| Beer CSS | 4.0.21 | 90,191 | 16,985 | 14,748 |
| Tailwind Play CDN (JS) | latest | 407,279 | 123,126 | 104,668 |
| Open Props (tokens only) | 1.7.23 | 29,566 | 7,682 | 6,250 |
Shoelace themes/light.css (tokens only) |
2.20.1 | 19,536 | 4,179 | 3,180 |
All numbers are bytes. Brotli is what production CDNs serve over HTTPS in 2026 — that's the line that matters for real-world transfer.
What was measured
| Key | URL |
|---|---|
| Skeletonic | https://cdn.jsdelivr.net/npm/@sebastienrousseau/skeletonic-stylus@2.0.0/css/core/skeletonic.min.css |
| Pico CSS | https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css |
| Bootstrap | https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css |
| Bulma | https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css |
| Beer CSS | https://cdn.jsdelivr.net/npm/beercss@latest/dist/cdn/beer.min.css |
| Tailwind Play CDN | https://cdn.tailwindcss.com |
| Open Props | https://cdn.jsdelivr.net/npm/open-props@latest/open-props.min.css |
| Shoelace | https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/dist/themes/light.css |
Reading the numbers honestly
-
Open Props and Shoelace
themes/light.cssare token libraries, not component frameworks. They give you--cl-*-style design tokens; you still write every component yourself. Listing them as "smaller" is misleading without that context — they aren't solving the same problem as Skeletonic, Bootstrap, Bulma, or Pico. -
Tailwind Play CDN (
cdn.tailwindcss.com) is a JavaScript shim that compiles utility classes at runtime. The 407 KB raw / 123 KB gzip / 105 KB brotli is the JS bundle, not CSS. A production Tailwind v4 build is purged and typically ships well under 10 KB gzip — but only if you've added the Oxide build pipeline that Skeletonic was designed to avoid. If you want JS-free, no-toolchain CSS, the Tailwind Play CDN is the only Tailwind option, and it is the largest payload in this table by an order of magnitude. -
Bootstrap numbers above are CSS only. The full
bootstrap.bundle.min.js(Popper + Bootstrap JS, required for modals / dropdowns / tooltips) adds ≈ 81 KB gzip on top. Skeletonic ships zero JS. -
Bulma ships everything by default. A modular Bulma build is much smaller, but again costs you a Sass pipeline.
-
Pico CSS is the closest no-build-step competitor at the same weight class. Pico is classless — semantic HTML only, no grid system, no utility classes, limited customisation surface. Skeletonic is class-based; different ergonomic trade-off, similar weight.
-
Skeletonic 2.0.0 absorbs the v2.0.0 RTL refactor (95 logical-property declarations, 19
[dir="rtl"]overrides). The pre-RTL bundle was ≈ 7.5 KB gzip — that's the historical number you may see in older docs.
Reproduce in 30 seconds
mkdir -p /tmp/skel-bench && cd /tmp/skel-bench
curl -sL "https://cdn.jsdelivr.net/npm/@sebastienrousseau/skeletonic-stylus@2.0.0/css/core/skeletonic.min.css" -o skeletonic.css
curl -sL "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" -o bootstrap.css
curl -sL "https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css" -o bulma.css
curl -sL "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" -o pico.css
curl -sL "https://cdn.jsdelivr.net/npm/open-props@latest/open-props.min.css" -o open-props.css
curl -sL "https://cdn.jsdelivr.net/npm/beercss@latest/dist/cdn/beer.min.css" -o beer.css
curl -sL "https://cdn.tailwindcss.com" -o tailwind.css
curl -sL "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@latest/dist/themes/light.css" -o shoelace.css
printf '%-14s %10s %10s %10s\n' FILE RAW GZIP BROTLI
for f in *.css; do
printf '%-14s %10d %10d %10d\n' "$f" \
"$(wc -c < "$f")" \
"$(gzip -9c "$f" | wc -c)" \
"$(brotli -q 11 -c "$f" | wc -c)"
done
If you don't have brotli on your system, install it: brew install brotli on macOS, apt-get install brotli on Debian/Ubuntu. The
numbers in the table above are exactly what those commands return.
Read more about positioning in 2026 → · How to install Skeletonic →