Outperforming Bootstrap CSS with a modern layout

I have just created an example that is using the Micro CSS framework to create a couple of responsive columns. The total bandwidth usage of that link is ~10Kb. The Bootstrap CSS examples are using jQuery, hundreds of Kb of font files, and a JavaScript file also in the hundreds of Kbs. In total, Bootstrap’s CSS examples are more than one order of magnitude larger, without accomplishing much more than that which Micro is accomplishing. And this is before I have even minified Micro!

Bootstrap CSS is created and maintained by Twitter, which is famous for consuming megabytes of bandwidth, to display a couple of 160 characters long messages in your browser. Check out the difference below, first Micro.

The Bootstrap CSS (notice Google seems to be down at the moment, at least from my home, so there are several crucial files served over their CDN which aren’t loaded).

However, unless my memory plays tricks with me, Bootstrap CSS is at least 30 times as large in total as Micro.

The problem with Bootstrap CSS (and why you should never use it on new projects), is that it is built upon an archaic and ancient technology. And upgrading it to use the new “flexbox model”, is impossible, due to “legacy problems”. Making Bootstrap become a modern CSS framework, would basically make every single webpage out there consuming it break. So Bootstrap is cornered, and cannot upgrade their code to become modern, without creating breaking changes, making it impossible to update from older versions of Bootstrap to their new version.

There are hundreds of interesting CSS frameworks out there, besides Bootstrap. Milligram being one for example. The one I am using is called Micro, and is Open Source and integrated into the main download of Phosphorus Five. And yes, I created it. If you want to use it in commercial projects though, you’ll need a valid proprietary license for Phosphorus Five.

Here is my example code. And here is the example output. Hint, try to resize your browser such that it becomes less than 800px in width, to see the responsive features of Micro.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s