Extending Bootstrap – Book Review

Extending Bootstrap is a new Bootstrap book by Christoffer Niska, published by Packt Publishing. The publisher contacted me to review the book after reading my blog post about my experiences with Bootstrap and LESS. I am glad I accepted to do this book review. I learned several ways to extend and use Bootstrap by reading this book.

The book is for intermediate to advanced level users of Bootstrap. It is a quick and to-the-point read. It may feel opinionated to some readers. It is a concise distillation of author’s real-world experience with the current state of the Bootstrap technology. It is perfect for individuals and teams who are looking to go beyond the basics with Bootstrap on their projects.

It is important to know that you will need to install XAMPP server and Node.js to follow along with some examples. Node is only needed for the steps needed to compile LESS style-sheets. For all other steps you can use Site44, or other ways to render your html and css. You might be able to use hosted node on C9.io to get the feel for the steps that require node, without having to mess around with a web server and node installation.

As you take your Bootstrap project to the next level, you will need a way to automate LESS compilation. Remember, you don’t want to use runtime LESS compilation in production due the performance hit it entails. Using RECESS and Grunt is probably the best way to compile/automate style-sheets, and this is what the author recommends. There are other ways to accomplish this automation, but it is good to know how to use these tools, regardless.

The book does a good job of describing how to customize javascript plugins that come bundled with Bootstrap with a clear and clean example, as well as enumerating the reasons to customize. The example used to extend a plugin in Chapter 6 is reusable. It is actually a template that you can use to create your own extensions to Bootstrap plugins. The step by step explanation of the extension is very instructive. Awesome!

The instructions to disable responsiveness in Chapter 7 should have some more explanation, in my opinion. Granted, that the book is intended for advanced users, but these instructions to remove some lines here and add some lines there, may feel a bit arbitrary to a user who may want to understand the reasoning behind these steps.

Chapter 8 is a listing of popular custom Bootstrap plugins that can be useful to you in your own projects. The listing describes the functionality exposed by the plugins. It does not go in-depth or into the internals of how the plugins work. If you need the functionality provided by these plugins, this information can save you valuable time you might otherwise waste looking for and trying less than optimal candidates.

Chapter 9 gives you a starting point for creating your own Bootstrap theme on top of Bootswatch.

All chapters follow the format of explaining the reasons why you might want to do things described in the chapter, and only then getting into the details and explanation of the steps. I would like to mention this again – this is a thin volume but packs a solid punch. It does not have very in-depth technical explanations. It does have the information you need to get started with taking your Bootstrap project to the next level. The book is an enjoyable read and flows very naturally. You can also use it to create a checklist of things to do when customizing your Bootstrap project.

The Site44 Workflow

A light weight development workflow with real-time website deployment.

I recently built a sample website to illustrate how clean, semantic html markup can be maintained when using Bootstrap’s grid system. The solution is to use a css pre-processor to incorporate Bootstrap’s LESS based mixins into your own .less files and push the Bootstrap instructions down into your stylesheets. There are two ways to “compile” .less stylesheets – use a stand-alone LESS compiler or use less.js. I found it very convenient to use less.js (note that it is not recommended in production deployment). As I started working on developing the sample code I found it a bit cumbersome to work with an entire web application project in Visual Studio, considering I was working with some really simple sample client-side html, css. As I craved for an alternative, I stumbled on to a development workflow that is incredibly simple and a lot of fun. I call it the Site44 workflow. Site44 turns your dropbox folders into websites. And it is awesome! Here is what you do –

1. Sign into Site44.com using your dropbox credentials.

2. Create a new site (all you have to do is come up with a name). I named it “ash”. A sub-folder with this name will show up in your dropbox folder.

3. Drag this folder to your Github for Windows screen and drop it there to create a github repo in that folder and push it to github.

4. Smile and write code.

As you save your code. The changes are deployed in real-time to your website. You commit to your github repo as you please. If you revert to a different version/branch of our code from your git repo, that version will be deployed (almost) instantly to your website. I wish there was a .site44ignore feature in Site44, just like .gitignore. That will allow me to keep my .git folder (and some other files) from getting published to the website. Other than that, this worked out really well for me.

I wrote about the experience of extending Bootstrap with LESS here : Bootstrap with LESS.

Hat tip to Justin Saraceno for introducing me to site44.