Skip to content

Instantly share code, notes, and snippets.

Last active August 7, 2023 13:16
  • Star 79 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A comparison of CSS library sizes.
Name Version Size (uncompressed) Size (minified) Size (gzipped) URL
Bootstrap v3.3.7 143 KB 117 KB 20 KB
Bootstrap v4.0.0 187 KB 147 KB 20 KB
Materialize v3.0 114 KB 90 KB 18 KB
Material Design Lite v1.3.0 350 KB 137 KB 21 KB
mini.css v2.1 47 KB 36 KB 7 KB
Semantic UI v2.2.6 730 KB 550 KB 95 KB
Foundation v3.0 90 KB 64 KB 12 KB
Pure CSS v0.6.2 80 KB 17 KB 3.8 KB
Picnic CSS v6.3.2 55 KB 38 KB 7 KB
Milligram v1.3.0 10 KB 8 KB 2 KB
Copy link

shqld commented Oct 8, 2021

Copy link

524c commented Sep 15, 2022

"bulma": "0.9.4"

240K bulma-rtl.css
203K bulma-rtl.min.css
240K bulma.css
202K bulma.min.css

Copy link

ggedde commented Dec 1, 2022

You might want to check out SpryCss
One main feature is that most of the package size is from the Sass Variables Maps. So if you remove breakpoints, colors, or spacing variables that are not needed in your project then the size reduces. Or increases if you add more. By default it comes with 3 breakpoints, but for most of my projects I only use 2 and I don't use all the colors which brings it down to about 9kb gzipped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment