One aspect of web performance is paying close attention to the number and size of 3rd party libraries you utilize. I like to do this research from time to time. So here are the results of my latest search for the lightest and most capable framework for building web applications.
CSS-Only Minimal Frameworks
basscss (2.13kb gzip)
- rapid prototyping
- incredibly simple visual style
- somewhat constrained
- no buttons, colors or visual appeal
Furtive (2.47kb gzip)
- looks nice
- includes basscss-like utilities
- buttons, colors, forms etc
Lotus (2–8k depending)
- small project
- visually unusual
- super easy to customize a small build
Milligram (2.3k gzip CSS)
- looks nice — unoffensive but low contrast
- lacks useful utility classes for padding and margins
- flexbox percentage based grid
- built with SASS
- latest browser versions only
PicnicCSS (7.2k gzip)
- opinionated, applies to default html elements (just use
<button>) which seems useful - interesting components
- not a fan of some of the UI choices
Pure (3.8k gzip CSS)
- older project built by Yahoo
- I still like the visual style
- no utility classes for padding margin etc
- can customize the modules you need
- unique grids! (24ths and 5ths)
Full Featured Frameworks
Foundation (13.4kb gzip CSS & 27.6k gzip JS)
- SASS modules allow minimizing size by only loading style components you need.
- complete framework for web development aims to solve a huge variety of problems when building apps
- requires jquery
Bootstrap (19.7k gzip CSS & 9.8k gzip JS)
- most well known framework
- tons of themes and examples
- requires jquery
- v3 offers LESS v4 (still in alpha) offers SCSS
Spectre (10k gzip CSS)
- CSS only but contains many useful elements and widgets
- good value
- uses LESS instead of SCSS
Vuetify( 42k gzip CSS & 19k gzip JS)
- addon for building apps in vuejs 27.6k gzip JS
- material design visuals
- complete component framework including functionality
- powerful interactivity
Make a Combo Pack
If you find things that you like about several of these framework consider putting them together. Especially with the help of SCSS compilation tools you can build the exact system you need.
For instance, if I just want a quick combo of pre-baked frameworks I can try using basscss for layout and utilities and then adding a customized Lotus css that includes [responsive extras, buttons, forms, tables, colors].
That makes roughly 2KB for basscss and then 727 bytes gzipped for Lotus library. Concatenating them together gets you a compressed payload of 2.82kb. You could load the less important one (Lotus) asynchronously so only basscss would be blocking. I mean heck both could be inlined and only increase the html response by 4K leaving lots of room in your HTML payload for more JS and markup.
Icons
Almost every app ends up needing icons. Icon compression varies widely based on browser support. Glyphicons included with bootstrap is between 20 and 40kb.
But, most projects I see end up choosing FontAwesome — The entire fontawesome pack is between 80 and 300kb of fonts and 7k gzip of CSS. That’s a lot of extra weight.
Fontello will let you customize an icon set. A subset of just 18 FontAwesome Icons is less than 10KB of font files and .5k gzip CSS.
Back in my day we used a PNG sprite sheet for each page. And we were happy with our bitmaps! It was a pretty good way of keeping page load times down and displaying your icons, but maintenance was a pain.
Building a JS App
The number of frameworks you can choose for writing a single page application seems to grow at a pretty steady pace. And the popularity of these grows and wanes very quickly. Their file size over the wire is still important, especially when you consider the possibility of building a big application with thousands of lines of custom code on top of this.
Comparing the capabilities of all of these frameworks is beyond the scope of this article. Honestly, the vary significantly. Some of these are scalpels and some are lawn-mowers.
I’ve tried using Mitrhil in a fun project lately and really liked it. You get a lot of power in 8 kilobytes.
So pick one of these up for your next prototype project and see if you find something you like that’s smaller than your trusty all-in-one-super-framework. Read a couple pages of their docs to get a feel for what the developers care about and how much help their documentation will really be when you get stuck. Then pop into CodePen paste a CDN link and start playing around.
