Skip to content

Instantly share code, notes, and snippets.

@primaryobjects
Last active August 7, 2023 13:16
Show Gist options
  • Save primaryobjects/64a4e7e3351c646f51eee07949215ad4 to your computer and use it in GitHub Desktop.
Save primaryobjects/64a4e7e3351c646f51eee07949215ad4 to your computer and use it in GitHub Desktop.
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 http://getbootstrap.com/css/
Bootstrap v4.0.0 187 KB 147 KB 20 KB https://v4-alpha.getbootstrap.com/
Materialize v3.0 114 KB 90 KB 18 KB http://materializecss.com/
Material Design Lite v1.3.0 350 KB 137 KB 21 KB https://getmdl.io/
mini.css v2.1 47 KB 36 KB 7 KB https://chalarangelo.github.io/mini.css/
Semantic UI v2.2.6 730 KB 550 KB 95 KB https://semantic-ui.com/
Foundation v3.0 90 KB 64 KB 12 KB http://foundation.zurb.com/
Pure CSS v0.6.2 80 KB 17 KB 3.8 KB https://purecss.io/
Picnic CSS v6.3.2 55 KB 38 KB 7 KB https://picnicss.com
Milligram v1.3.0 10 KB 8 KB 2 KB https://milligram.github.io/
@romenigld
Copy link

W3 css?

@prakis
Copy link

prakis commented Mar 6, 2020

@KrishChordiya
Copy link

Uikit??

@shqld
Copy link

shqld commented Oct 8, 2021

@524c
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
96K bulma-rtl.css.map
96K bulma.css.map

@ggedde
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