Bootstrap: LESS is So Much Better

Since its rise in popularity over the past couple years, Responsive Web Design (RWD) has helped many web sites deliver content tailored to fit its visitors' browsers whether they be desktop, tablet or smart phone. Frameworks such as Foundation and Bootstrap have gained fame as great starting points delivering both responsive grid systems and numerous widgets. Both frameworks are offered not only as raw source but also as assets linkable from content delivery networks (CDNs).

There are inherent risks in utilizing the versions available on CDNs. Both frameworks are rather ungainly in size even when using the minified version. This is especially the case when you take into consideration the fact that responsive web sites across the board tend to load slower (40% slower based on this source) than their adaptive siblings. After all, Adaptive Design's central focus is on delivering ONLY what is necessary to render a site on a mobile device. Reduced content payload in this case plays a large part in the performance of a site built using an Adaptive Design approach.

We Can Do Better with LESS

While both Foundation and Bootstrap are awesome frameworks I share a heavily biased love for Bootstrap. If you haven't selected a framework yet, I encourage you to review both though. Bootstrap's source is built on LESS whereas Foundation is built on SASS. Regardless of the acronym, both LESS and SASS are considered "Source Code" for CSS. Through the use of a compiler, both are compiled into CSS. The remainder of this post will focus solely on Bootstrap and LESS. The main point I want to make is that BOTH Foundation and Bootstrap fully compiled are fairly large when you take performance of mobile devices into consideration. Bootstrap's minified CSS file is a whopping 113K if you download the distribution directly from getbootstrap.com. We can do so much better than this however, we need to take a little time to fully understand what goes into that minified mega file.

Bootstrap Anatomy

The makers of Bootstrap chose what I consider to be THE design approach for CSS. Bootstrap source is broken down into a fairly large number of individual LESS source files. During compilation, only the bootstrap.less file is actually compiled into CSS (and into a minified CSS). I strongly encourage you to download the source code for Bootstrap instead of the compiled distribution. Once you get your hands on the source, you'll then need to take a few minutes to familiarize yourself with the lay of the land. Bootstrap source contains a large number of LESS source files., Each LESS file provides the necessary styles for forms, buttons and link buttons, badges, tables, panels and others in addition to the foundation; the grid system. You probably won't, however, need the entire kitchen sink. In fact, if you have performance in mind for your mobile device users, you'll want to break that source down and include only the LESS files you truly need. If you follow this approach, you can always add other LESS files as you need them.

Bootstrap.less

Using a series of @import directives, bootstrap.less imports the remainder of the LESS files to create the actual CSS. Herein lies the opportunity. Most sites aren't going to take advantage of every single component found in Bootstrap. Some sites may even only take advantage of its most awesome grid system and perhaps form support.

The Bare Minimum

To create CSS that only contains the grid system, you can comment out all imports with the exception of the following:

// Core variables and mixins

@import "variables.less";

@import "mixins.less";

// Reset and dependencies

@import "normalize.less";

// Core CSS

@import "scaffolding.less";

@import "grid.less";

Variables and Mixins contain the global variables used throughout the LESS source files. Variables make it very easy to make changes to the resulting CSS. For example, if you wanted to create a 16 column grid (12 is the default) just change the correct variable (@grid-columns) and recompile.

Mixins provide the functions necessary to perform most of the "magic". If you're not familiar with LESS functions (aka "mixins") I strongly encourage you to do the research to understand them.

Normalize provides the typical RESET styling that most front end folks like to use. The general idea is to reset the baked in default styles that differ across browsers.

Scaffolding is just what it sounds like. It provides some of the defaults such as ensuring that responsive images don't exceed the width of their parent container.

Grid contains the grid styles that support the foundational goodness necessary to support rows and columns.

This configuration produces a 17K CSS file and a 12K minified CSS file.

Summary

Whether you choose Bootstrap or Foundation, you will want to work with the source code to ensure that you deliver as small a CSS file as possible for your mobile clients. While performance of server-side code is important in terms of speed, bloated content assets are just as if not more important when thinking of your customers' experience.