Last active
June 26, 2024 17:18
-
-
Save primaryobjects/64a4e7e3351c646f51eee07949215ad4 to your computer and use it in GitHub Desktop.
A comparison of CSS library sizes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/ |
Updates on the newest Bulma vs Bootstrap?
W3 css?
Uikit??
I personally updated the forked table: https://gist.github.com/shqld/53149f99f164a507aff8e37403d705f7
"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
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
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.