My First Year Using Bootstrap

I often wonder how representative my experience with the Responsive Web has been. While I have been a developer for a while, it took me a while to finally work on projects whose scope included being designed responsively. (Thankfully, 100% of my projects include this now.) When a project finally came along in that I could develop to respond to various screen sizes, I knew that I needed some help. While I had enough time in the schedule to consider both desktop and mobile interfaces, I also had to be relatively efficient with my time. To speed things up, I chose to use Bootstrap as a front-end framework. Bootstrap speeds up many aspects of building a responsive site and helps you deliver projects on schedule/budget. After using a Bootstrap on several projects over the past year, I still like it. Here are a few things, some practical, some not, I have learned:

Removing all or most of Bootstrap's classes from your HTML is easy.

In my first attempts with Bootstrap, I used a lot of classes in my divs that specified if an element was a row or a column. But, I eventually came across people's opinions online that should consider not fill your elements with classes that aren't semantic (like .row and .container.) If you are using LESS, Bootstrap provides mixins that allow you to keep all this information in your .less files. For the most part, this keeps things cleaner.

That said, if I am creating Interactive Wireframes using Bootstrap, where I am often removing entire elements at a time if they don't work out, I tend to like to keep some of Bootstrap's classes (.row and .container, in particular)  in the markup so I am not having to add/remove classes/ids in multiple places all the time.

If You Have  A Row, You Need  A Column

I made this mistake repeatedly. One of the things that is nice about Bootstrap is that is assigns reasonable padding and margins to elements. This is very helpful for creating prototypes. But, if you put an element inside a row, but not inside a column, you can have some glitches in how your padding and margins perform. For me, I did this a lot with headings--putting an h2 inside a row, but not a column, and then wondering why it was not aligned to the left properly.

Upgrading Bootstrap Was Easy Because It Is Well-Documented

In the middle of project, Bootstrap went from v2.3.2 to 3.0. Thanks to its great documentation, this migration went smoothly and only took a few hours. Because the documentation is good, it is also very fast to see if what you are trying to do with Bootstrap is easily done, or if you need to create your own solution.

Using Bootstrap's Variables.less File Helped Build Internal Consensus

Even if they offered no other benefit besides adding variables to your CSS, I would still like using a CSS pre-processor. Bootstrap's variables.less file demonstrates the power of these variables. By setting all your variables set in one place, you can change styles site-wide with one change to your code (assuming you are using your variables). Keeping everything in the variables.less file became particularly helpful when working closely with designers and other stakeholders. In a recent project, we were trying to decide on a few different color/typography combinations and being able to change these values quickly with people hovering over my computer reduced my stress a lot. It had the added benefit of showing people the results of the decisions we were making and got internal sign off WAY faster than if I made a change and asked people to check it out a little later.

Bootstrap Refocuses What I Like About Development

Bootstrap does a huge number of things for you, and if you commit to using the framework as much as possible, you don't get to do as much stuff as you would if you weren't using it. For example, Bootstrap's responsive behavior for collapsing navigation menus is solid, which means you don't have to solve this problem yourself. But, thinking through how to present information like to this users is something I enjoy. I was still able to do some of this thinking, but I was often confronted with a choice: do I go for speed and use what comes off-the-shelf in Bootstrap, or build my own solution? The answer often was somewhere in between.

Even so, what Bootstrap's thoroughness might stifle in terms the development process, it enhances in its ability to a responsive layout come to life quickly. It blows me away how fast you can create a layout based on a grid and Bootstrap's plugins bring a lot of extra functionality to your sites. Additionally, you can re-invest the time you save by using some of Bootstrap's features into using these features in creative ways.

Will I Keep Using Bootstrap?

For the time being, I think so. I would like to get to know it a little better and improve the way in which I work with it. I think the constant challenge will be to find creative ways to use Bootstrap while making my code more solid.