Evaluating CSS Frameworks — Bootstrap vs Bulma vs Foundation vs Milligram vs Pure vs Semantic vs UIKit
In week 2 we kicked off the first web app for Project6. Once again we hit the paradox of choice, this time with CSS frameworks. One of the hardest things to find these days is a good comparison between libraries, subjective or objective. On top of that, most articles only look at the top couple frameworks (Bootstrap, UIKit, Foundation) and don’t take much more than popularity or or look and feel into account.
I decided to create a framework evaluation process to compare a number of modern css frameworks. For each framework, I’m going to create a dummy blog layout with as many major components as possible. Additionally for all the libraries offering Sass support, I’m only going to import the necessary files to render the page. Then we can look at the compiled file size of the css bundle file and the number of elements required to render the entire layout. It’s not perfect but we can at least evaluate some objective values and looking to minimize file size of libraries is always a good practice.
In this story I will evaluate the following CSS libraries/frameworks
Edit History
Jun 20–2017: Initial Post
Dec 7–2017: Adds Bootstrap4 Beta 2. Performed well, no extra css required, mid-range for total number of elements and gzipped file size. Added css classes written stat.
All example code can be found at https://github.com/imothee/css-framework-eval
Caveats: I am not importing the Javascript libraries as I am not using any JS necessary components in the evaluation and additionally, I use React to do most modern JS development so I’d rather use a native React component (such as dropdowns, datepickers, menus) over a framework built in one. I am also a fairly experienced front-end developer but I am also not a CSS guru so I may end up adding extra elements/silly code as I work from the framework examples. Pull requests on better ways to build each part welcome.
Bootstrap
With the release of the beta for Bootstrap4, I have added it to the comparison list. Bootstrap documentation has always been incredibly polished and the framework is always top of class. My biggest issues with it have been the early announcement of alpha’s prompting an early adopters dilemma and the fact that the design is so distinct you can see way too many sites using the base defaults.
It was simple to get started, yarn add and importing the very descriptive scss files meant that custom setup was simple. Every possible feature, class and utility was added by default. The new grid system was slightly confusing at first. I was unsure of the difference between col-sm and col-6 and why some classes were col-6 and some were a mix of multiple class markups such as “col col-lg-2". I love the adoption of flexbox for grids and reboot provides a really clean baseline for development.
Overall Bootstrap4 was a dream to develop against, the site looked sleek with the defaults and the code was clean and small.
Minimized CSS Size: 68kb. Gzip: 12kb
Total Number of Elements: 49
Custom CSS: 0 classes, 0 properties
CSS classes written: 48 total, 34 unique
Subjective developer experience: 4.5/5
Out of the box elements: 5/5
Bulma
Bulma appears to be a fairly new addition to the suite of modern CSS frameworks. From first glance the base library looks clean and fresh. It provides a modular sass framework to optimize your bundle to only the necessary classes which we will use as much as possible.
Development wise, the documentation could use some minor improvement. The high level grouping of items in the documentation (elements, components, layout) wasn’t immediately obvious and I definitely spent more time than I guessed trying to find the background-color helpers for example. Knowing which files to import for each class was also vague, for example container was hidden inside sass/others. Additionally some modules have an explicit dependency on other files contained in utilities and the documentation never mentioned importing base/ to normalize the css. Overall working with the underlying framework was pleasant, the classnames were expressive and the actual css generated looked minimal and simple. I’m a huge fan of flexbox so seeing a library default to it for layout was a huge plus in my opinion.
Overall I only had to add two custom classes to my css and overall the site came out looking great with the base classes.
Minimized CSS Size: 73kb. Gzip: 10kb
Total Number of Elements: 53
Custom CSS: 2 classes, 2 properties
CSS classes written: 56 total, 37 unique
Subjective developer experience: 4.5/5
Out of the box elements: 4.5/5
Foundation
Foundation is one of the core mainstream CSS frameworks. It’s been around for years and has been a well supported alternative to Bootstrap. That said, it’s not an old framework, it’s constantly updated to support the newest features such as grids with flexbox support.
Getting started was slightly overwhelming, I’m not one for installing cli tools or getting started templates especially for a CSS framework. All the default setup documentation defaulted to importing everything and finding the right way to do modular builds took a bit of digging. additionally Foundation doesn’t have as many pre-made css components as Bulma, Semantic UI or UIKit instead offering more JS marked up widgets.
Overall I felt like the default theme looked subjectively the worst of all the frameworks (to the point where I chose a custom hero color).
Minimized CSS Size: 30kb. Gzip: 7kb
Total number of elements: 56
Custom CSS: 4 classes, 4 properties
CSS classes written: 46 total, 21 unique
Subjective developer experience: 4/5
Out of the box elements: 3.5/5 (most are Javascript add-ons which we aren’t using here)
Milligram
The whole Milligram library comes in at 2kb gzipped but in the effort of fairness I will also import only the files necessary to render the standard layout. This doesn’t seem to be a default as the documentation doesn’t mention modular imports but the npm module has the base sass files exposed. While being incredibly small, Milligram is also the least feature rich framework offering barely any higher level styled components. This meant that I had to write a lot more custom css rules to get our website up and running. Also, after a while I realized that Milligram doesn’t bundle NormalizeCSS into the sass files and had to include it separately.
Additionally, h1 and h2 elements inside a container that isn’t wrapped by a row and a column overflow the bounds and push all the other content out so that means adding additional elements to hold text content.
Overall the layout came out very clean and looks quite reasonable using default colors. Surprisingly it didn’t take that long to add all the custom markup and although my nav bar looks less feature rich than the other frameworks it’s still usable. I’m also amazed at the total size of the css and the number of html elements!
Minimized CSS Size: 10kb. Gzip: 3kb
Total number of elements: 49
Custom CSS: 7 classes, 17 properties
CSS classes written: 34 total, 19 unique
Subjective developer experience: 4.5/5
Out of the box elements: 3.5/5
Pure
Immediately Pure seemed less “developer friendly” as the entire getting started guide focuses on CDN content and makes no mention of an npm repository. There’s documentation on Github and hidden in a Tools menu that shows an npm module so at least that’s published but it’s also only css files so assuming you wanted to customize your colors and classes, you’d have to use overrides instead of sass variables (my preference).
Weirdly, I spent some time debugging an issue where the header was 100% of the height. Turns out I had forgotten to add <!DOCTYPE html> to the index.html but surprisingly none of the other CSS frameworks had any issues without HTML5 mode.
Overall the default styling and theming wasn’t as great as expected for the file size. There was no typography markup which definitely makes a visible difference in comparison to the other frameworks chosen. The grid system is interesting but compared to some of the flexbox grids it seemed confusing and more difficult to achieve the same results. I’m also not a huge fan of namespaced css-libraries as I rarely have naming collisions in my custom projects but I can see why some frameworks do so.
Minimized CSS Size: 17kb. Gzip: 4kb
Total number of elements: 48
Custom CSS: 7 classes, 7 properties
CSS classes written: 39 total, 27 unique
Subjective developer experience: 4/5
Out of the box elements: 3.5/5
SemanticUI
Semantic-ui failed to install via yarn. That meant I was unable to install the less packages so I had to fall back to the semantic-ui-css package and compiled css packages. First impressions, there are a ton of compiled css files which might make this complicated but likely result in a smaller build file. The documentation looked great but hard to parse out, especially the grid section.
Form styling at first was more difficult than expected, there’s an input style available and I spent some time building it myself until later I found forms under collections.
Overall the site looks very clean and the amount of custom work required was minimal. That said, the minimized css size is slightly shocking considering that I was importing only the elements needed to render the page below. It’s well over the average size and twice Bulma which had a similar amount of prebuilt features included. Amazingly the gzipped size is only 20kb but still twice the nearest comparison.
Minimized CSS Size: 146kb. Gzip: 20kb
Total number of elements: 47
Custom CSS: 2 classes, 2 properties
CSS classes written: 90 total, 39 unique
Subjective developer experience: 4/5
Out of the box elements: 5/5
UIKit
UIKit appears to be a fairly new entry to the suite of CSS frameworks. I ended up using v3 beta and the setup was seamless. I had a few small nits about naming of the components and finding various classes but the entire developer experience was very pleasant.
Overall the site came out looking pretty nice with 0 (zero!) custom classes required to match the majority of the layout. The file size was impressive as well beating out Bulma which I felt had the closest feature set match.
Minimized CSS Size: 33kb. Gzip: 6kb
Total number of elements: 51
Custom CSS: 0 classes, 0 properties
CSS classes written: 52 total, 31 unique
Subjective developer experience: 4.5/5
Out of the box elements: 5/5
Overall Impressions
*Update Bootstrap4*, Bulma and UIKit really impressed me for the sites where you want more pre-made features. Both offered rich customization of the themes through Sass and both had a smooth developer experience, a small file size and a great looking final result.
For sites where you want to customize the majority of the components and rely less on pre-made elements, Milligram was also an incredibly pleasant and light weight library. I wouldn’t hesitate to reach for it when I want total control.
From a utility perspective for throwing together a quick application, Bootstrap4, Bulma and UIKit are tied in first place in my opinion and right now I’m having a tough time choosing one over the other. Go for whichever has the required components and the look and feel matches the application you’re building!
The Winner? The web community for the large amount of free and open source libraries with incredible features and polish.
Comparison Table
Methodology
Element count:
document.all.lengthNumber of classes used:
var totalClasses = 0; var classes = {}; for(i=0; i< document.all.length; i++) { var el = document.all[i]; totalClasses = totalClasses + el.classList.length; el.classList.forEach(function(c) { classes[c] = true; }); }; console.log("Classes", {total: totalClasses, unique: Object.keys(classes).length});All the above is based on my opinion and the code available on Github. Please provide constructive feedback or pull requests for anywhere I could have done better performing a 1:1 clone of the layout or using the frameworks. This took surprisingly longer than I expected and this article is definitely a living work in progress.
