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.
In the head
<link href=”[bootstrapcssdir]/bootstrap.min.css” rel=”stylesheet” media=”screen”>
At the bottom of the body (if you haven’t read High Performance Websites by Steve Souders, you really should)
<script src=”[latest jquery js]”></script> <script src=”[bootstrapdir]/bootstrap.min.js”></script>
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.
<div class=”container”> <div class=”row”> <div class=”span4”>....</div> <div class=”span8”>...</div> </div> <div class=”row”> <div class=”span12”>...</div> </div> </div>
That’s how simple it is. Even without customizing the Bootstrap css you get a professional and very modern looking site.
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:
<link href=”[bootstrapcssdir]/bootstrap-responsive.min.css” rel=”stylesheet”>
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):
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Now your site is responsive.
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.
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.
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!