Using Bootstrap the Right (Semantic) Way

Back in the year 2000, when I first started learning web development, tables were my best friend.

The web was filled with <tr> and <td> and semantics were non-existent. Images were broken down and placed in bits & pieces inside different table cells.

Things changed in mid-2003 when I came across a site csszengarden.com. This site showcased the new and the right way of doing things, which was to separate content & presentation. After all, that is the reason CSS was created in the first place.

Here’s how HTML was written in 2000. Nothing in this code is semantic or meaningful:

Changes since 2000

Since that time, a lot has changed. Web standards have evolved by focusing on accessibility and semantics. With importance given to page speed by search engines and increase in mobile usage, everyone’s focus is now on a website’s responsiveness and speed. Due to the number of different devices and browsers in use, the time required to develop and test even a basic site has gone up.

Our response to those changes is often a CSS framework

If you develop websites in 2014, there’s a good chance that you have a favourite CSS framework and you have probably tried several. My personal favorite is Bootstrap.

For front-end developers, creating a prototype or an end product has never been easier thanks to these frameworks. By simply including a CSS and a JavaScript file in your project, you now have access to a number of different components such as responsive navigation menu, tabs and carousels. But, are frameworks sending us back in time?

Framework divs are often still not semantic

If you view the source of many sites created using these frameworks, you are more likely to feel that we simply have replaced <tr> and <td> with something like <div class=”row”> & <div class=”col-sm”>.

This is still not good semantic markup.

And now, if the folks at Bootstrap decided to change the class names, and you wish to update your site, then you are very likely to spend a lot of time modifying your HTML again.

Fortunately, the solution is right within Bootstrap itself.

The semantic solution is Mixins

Thanks to CSS pre-processors like LESS and SASS you don’t have to look anywhere else. Using “Mixins” you can create a semantic HTML structure with meaningful class names. With Mixins you can also arrange your content in different columns without stuffing your site with unnecessary divs to structure rows and columns.

Assuming everyone reading is aware of the 12-column Bootstrap grid, let’s discuss a scenario where our website structure looks like this image below:

If we were to use default Bootstrap classes, the HTML structure to arrange our content would be something like this:

So similar to the old days, we seem to have simply removed tables and replaced them with div tags.

To avoid writing code that feels like it’s still the year 2000, we can modify the above code to make it more semantic and leaner. Here’s a better version of the code above:

Due to the size of this code, the reduction of div tags might feel insignificant, but assuming the content on today’s website, it starts piling up.

Structuring the code with Mixins

To now structure the above content using “Mixins” you need create a .less file

In that file, include the bootstrap’s variables.less & mixins.less files followed by the code below:

// Core variables and mixins

@import “variables.less”;

@import “mixins.less”;

.wrapper {

  .make-row();

}

.content-main {

  .make-lg-column(8);

}

.content-secondary {

  .make-lg-column(3);

  .make-lg-column-offset(1);

}

Finally, use a compiler to convert your new .less file into a CSS file.

You could also add mixins to offset columns or push and pull them, similar to using classes such as .col-md-push-2.

Check the Bootstrap LESS grid guide or open the mixins.less to see the available mixins.

Now in the future, if you decide to change the CSS framework used in your website or if bootstrap changes its class names, you only need to edit your LESS files and nothing else.