Web developing, if done properly, can be a time consuming business – especially when we are starting with a new site from scratch. One of the most frustrating things I find is that when sitting down to start coding a brand new site, it will sometimes take an hour or so of set up before I’m ready to actually start coding on the meat and bones of the site – There is setting up the framework, getting your database ready, the server directives, etc. And once I am ready to start putting my pages together, without any styling things are ugly. Very ugly. So what do we do about that?
Initial CSS Styling.
At the beginning of a project I am only concerned with getting the site to work – I’m all about getting the registration and login functions working. I want to see the database getting all the right info to display. In essence I want the engine to work – I’m not bothered about the chassis at the moment. The full styling will come at the end – indeed, it is good practice to leave this until the end as you don’t really have a good idea of what sort of styling you will need until the site is working.
So at this stage we are happy to work with a pretty ugly site; our input boxes are nasty and blocky, our fonts are all a bit naff, our spacing between elements is crazy. It is not a pretty sight ( site, ahem ). We very happy… aren’t we?
To be honest, this drives me crazy. I find it interferes with the flow of my development – I’m afraid I have to be a bit abstract and say that it messes with my Zen I don’t need to the site to look beautiful at this stage, but I can’t deal with it looking like a throwback to a 1994 Netscape page either.
So, along the history of my web developer learning curve I decided I needed to put at least some base styling in to make things reasonable to look at. Luckily, before I set about doing this myself, I found the Eric Meyer reset. I have done a previous post about this here, have a read.
For the next few projects I would set up my reset, then begin the tedious exercise of styling my headers, forms, input boxes, buttons, and the rest, before I could deal with any serious development work. This was a time-consuming exercise that took the wind out my developing sails and not a task I looked forward to. Even saving this stylesheet to use again and again in following projects didn’t really solve the problem; as my skills improved I would still be spending time going back and tidying up my horrible CSS from the previous project.
I thought that was the way of things until… Twitter Bootstrap!
So what is this Twitter Bootstrap? Quite simply, a fantastic and simple way to make your sites look great right from the off. In layman’s terms, the bootstrap is a stylesheet put together by the guys at Twitter, free for everyone to use however and where-ever they want. With one simple line of code in your header, linking the bootstrap stylesheet, you will have great looking forms, buttons, inputs, labels, and the list goes on. Not only that – the bootstrap also has many other powerful goodies lying latent in its lines of code, such as menus, modal boxes, scaffolding – indeed, any common task done with CSS ( and some not some common ) seems to have its equivalent in the Twitter Bootstrap.
How do I get it?
Very easily. Go to this link and click on the big button that says ‘Download Bootstrap’. You will get a zip file that, once extracted, contains three folders:
Each of these folders contains the various components used to make your sites look fancy with least amount of effort from yourself as possible.
If you want to keep things simple, and are not concerned about the inner workings – ie, you just want the nice things – then copy the extracted ‘bootstrap’ folder to where you are keeping the css in your project. To include bootstrap in your project, link the bootstrap css file, just as you would with any other stylesheet, by putting the following in the head section of your site:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script>
Just one note – be sure to include the bootstrap css stylesheet before your own custom stylesheet. This is so you can override the bootstrap styles if you need to.
One last thing, the bootstrap of course makes use of the latest HTML5 properties, so you need to make suer you specify the HTML5 doctype – although I’m sure you’ve been doing this already ;) If you need a reminder how to declare, the very first line of your HTML page should look like this:
And there you have it…
Your site now has a baseline of prettiness that only took seconds to achieve ( for you; lets not forget the many hours put in by those generous chaps at Twitter ). But beyond the aesthetic wonders of bootstrap you are now also loaded with a huge number of useful utilities to use in your site that makes development a lot faster, now that a lot of repetitive common tasks have already been done for you, and done with style.
I will cover some of the more involved aspects of Twitter Bootstrap in my next post, but until then, you would be advised to have a look at the bootstrap site itself, and especially this page – it’s very informative and the documentation is brilliantly verbose. Before you know it, you will be checking the bootstrap site before taking on any CSS task – and to your delight, you will often find what you are trying to do has already been done to a wonderfully high standard by the bootstrap. Vive le Twitter!
If you would like to be kept up to date with new posts here at the web developing cat, then be sure to add your name to our mailing list below.