Skip to content

Instantly share code, notes, and snippets.

Embed
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 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/
@valeriu
Copy link

valeriu commented Mar 18, 2018

Foundation,v6.4.3,158 KB,118 KB,22 KB,http://foundation.zurb.com/

@gmani2urs
Copy link

gmani2urs commented Dec 4, 2018

Any words about bulma & tailwind..?
https://bulma.io/
https://tailwindcss.com/

@shuchkin
Copy link

shuchkin commented Jan 9, 2019

Spectre CSS,v0.5.8,60 KB,45 KB,10 KB,https://picturepan2.github.io/spectre/

@owenstrevor
Copy link

owenstrevor commented Feb 19, 2019

Bulma
Minimized CSS Size: 73kb. Gzip: 10kb
Source: https://codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3 (June 20, 2017)

https://gist.github.com/imothee/1dcb46fddcd25aa11d978ba1c19fcae4#file-css-framework-table-csv

UPDATE
In my test, just now, with Bulma 0.7.4, the Minified size is 177 KB and the gzipped size is 24 KB.

For Spectre v 0.5.8, Minified size is 46 KB and the gzipped size is 10 KB.

@DonaldTsang
Copy link

DonaldTsang commented May 10, 2019

Updates on the newest Bulma vs Bootstrap?

@romenigld
Copy link

romenigld commented Oct 30, 2019

W3 css?

@prakis
Copy link

prakis commented Mar 6, 2020

@KrishChordiya
Copy link

KrishChordiya commented Mar 7, 2021

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