Twitter Bootstrap: Easy to Use

Are you building a Lean Startup, and want fast results? Twitter Bootstrap could be the solution you’re looking for. Are you a “backend” programmer who would love to have a beautiful site, but you “don’t know frontend”? Twitter Bootstrap could be the solution you’re looking for. Are you just looking for a simple frontend that works? Twitter Bootstrap could be the solution you’re looking for. Nice rounded corners, customizable colors, margins that look good, padding that’s right, JavaScript that just works: that’s what Twitter Bootstrap offers.

Setup

How easy is it to use Twitter Bootstrap? Really easy. The github project is very well documented with clear and easy steps that help you get up and running.

The instructions on the website are very helpful. You basically just need to download the css and javascript files, and include them on your page. Make sure to include the latest version of JQuery as well.

In the head

&lt;br&gt;<br>
&amp;lt;link href=”[bootstrapcssdir]/bootstrap.min.css” rel=”stylesheet” media=”screen”&amp;gt;&lt;br&gt;<br>

At the bottom of the body (if you haven’t read High Performance Websites by Steve Souders, you really should)

&lt;br&gt;<br>
&amp;lt;script src=”[latest jquery js]”&amp;gt;&amp;lt;/script&amp;gt;&lt;br&gt;<br>
&amp;lt;script src=”[bootstrapdir]/bootstrap.min.js”&amp;gt;&amp;lt;/script&amp;gt;&lt;br&gt;<br>

Markup

Now you’re ready to start adding markup. You just need to understand the grid model. Bootstrap uses a twelve column grid system. You define rows, and each row can contain more rows or elements that span the desired number of columns. Each element can also contain more rows and elements. It’s really similar to working with old-style table layouts, only you use css classes to define the rows and elements. You place the whole thing in a “container” element.

&lt;br&gt;<br>
&amp;lt;div class=”container”&amp;gt;&lt;br&gt;<br>
  &amp;lt;div class=”row”&amp;gt;&lt;br&gt;<br>
    &amp;lt;div class=”span4”&amp;gt;....&amp;lt;/div&amp;gt;&lt;br&gt;<br>
    &amp;lt;div class=”span8”&amp;gt;...&amp;lt;/div&amp;gt;&lt;br&gt;<br>
  &amp;lt;/div&amp;gt;&lt;br&gt;<br>
  &amp;lt;div class=”row”&amp;gt;&lt;br&gt;<br>
    &amp;lt;div class=”span12”&amp;gt;...&amp;lt;/div&amp;gt;&lt;br&gt;<br>
  &amp;lt;/div&amp;gt;&lt;br&gt;<br>
&amp;lt;/div&amp;gt;&lt;br&gt;<br>

That’s how simple it is. Even without customizing the Bootstrap css you get a professional and very modern looking site.

Responsive

You can also make your site responsive with Bootstrap. They offer a css file that you include following the original bootstrap.css file. So in the head add:

&lt;br&gt;<br>
&amp;lt;link href=”[bootstrapcssdir]/bootstrap-responsive.min.css” rel=”stylesheet”&amp;gt;&lt;br&gt;<br>

You’ll also need to add a viewport meta tag. This makes sure that the width of the screen is calculated correctly for mobile devices (without this your site will take up as much space in the mobile device as it does on a computer):

&lt;br&gt;<br>
&amp;lt;meta name=”viewport” content=”width=device-width, initial-scale=1.0”&amp;gt;&lt;br&gt;<br>

It’s a bit out of the scope of this entry, but some mobile devices are buggy when switching between portrait and landscape. You can get around these using JavaScript fixes.

Now your site is responsive.

Customization

You can even customize the css on Bootstrap’s site and download a customized bootstrap css. You can make changes to fonts and colors, column widths and padding values. Pretty straight-forward, and no knowledge of css needed.

JavaScript

We did include a JavaScript file as well on our page.. that’s because Bootstrap uses JavaScript to manipulate elements on the page. That’s also because Bootstrap helps you create Modals, Dropdowns, Carousels, that just work! The examples are pretty self explanatory, and in no time you can have nice advanced JavaScript features working with very little JavaScript code of your own.

What’s the Catch

Well, you didn’t think that something this good could be just perfect? As I mentioned previously, the grid structure is reminiscent of the way people worked with HTML in the 90’s. Well… welcome back to the 90’s. http://builtwithbootstrap.com/ showcases sites built with Bootstrap. You’ll notice that quite a few of them use inline css (notably builtwithbootstrap itself) to override and customize specific elements on the page. I would guess that these sites were not coded by a developer, the simplest solution is to simply pull out customization styles into a css file. Bootstrap itself is built with Less, and you can also use Less or Sass to further customize Bootstrap.

You’ll also notice code that looks like this:

This isn’t entirely Bootstrap’s fault. However, given that this is how the grid structure works, and given that their own examples look similar to this then this nested div structure is just to be expected. Markup that’s just used for layout purposes is typically frowned upon. This is HTML that works, but it’s ugly, and it’s not really “correct”.

My last big “gripe” with Bootstrap is that the responsive solution is not mobile first*. It’s a css that’s applied afterwards. With Bootstrap you really are designing a site for the desktop, that will then also work in mobile browsers. This is probably good enough. Nothing is stopping you from designing a mobile site first anyway. However, the css styles for mobile become the exception rather than the rule.

Conclusion

If you’re comfortable customizing css, if you can figure out the JavaScript that you need, maybe Bootstrap is too limiting. It is a framework after all, and it’s built to work in a predictable manner everywhere it’s used. If you don’t want all of your pages to look the same, or all of your elements to look the same, then you’ll need to add exceptions. Depending on how many exceptions you have, the default Bootstrap elements might themselves end up being the exception. This might not be a big deal to you. Maybe without Bootstrap you would have no site at all.

So, do you want fast results? Not a “frontend developer”? Want a modern site that works? I still think Bootstrap might be for you! You’ll definitely be up and running in no time, and with just a couple of small tweaks, you can have a nice site for the desktop that works on mobile devices. As your project grows, or as you learn more about frontend you might decide that you’ve outgrown Bootstrap, but there’s no point in engaging in speculative generality if Bootstrap works for you today.

*Want to learn more about Mobile First and Responsive Design? Are you in the Stockholm area? I’m holding a free Mobile First and Responsive Design Seminar on November 22, come on by!

 

Get in touch via my homepage if you have questions or comments!