Framework

Back when we started Libboo we coded everything ourselves, we wrote the entire backend, all the interface, and every line of css.  We were learning as we built, so it seemed like the logical thing to do, it was only later that we realised that there were frameworks for everything, and that we needn’t have built it all ourselves.

The css for Libboo a year ago was all handed coded, all of it (over 10,000 lines), and had become a bit of a beast.  The trouble was that file was created back in 2007, and we’d added to it over the next 4 years, I knew where everything was, but to anyone else it was a disaster (i.e. when we hired RM).

We had decided to re-work the front end code, and so I started looking around for possible frameworks, some looked promising, some looked over complicated, but none really filled the gap we had.  That was until a fellow Techstar colleague mentioned bootstrap.  I had used it before on small projects, but hand’t considered it for a larger project like this.

Bootstrap

Bootstrap features

Bootstrap contains several massively helpful tools to start you off:

  • 12 Column Grid system
  • Responsive design (adjusts to desktop, large desktop, tablet, mobile)
  • Styling for forms, in all shapes and sizes
  • Icon set for use with buttons, errors, etc
  • Styling for alerts, error, progress bars, labels
  • Extensive support for dropdowns and menus
  • Javascript plugins for modals, tooltips, carousels
  • Plenty more to be playing around with

When we started using it we realised that bootstrap did more than we expected, so many tasks that would have involved a large chunk of code were already built in, so it made the process of building the new site a pleasure.  We didn’t need to build a framework ourselves, and that became obvious fairly early on as we started using bootstrap.

Simple modal popup

Simple modal popup

You can get bootstrap from github, you can also get it as part of a package from Initializr, which bundles in an html5 boilerplate, as well as some other useful tools.

Using it saved us a huge amount of time in creating a framework, it does all the hard stuff for us, and it reduced our css by 80%.  However you get it, and whatever size  project you end up working on, bootstrap is a simple way for you to get up and running (with pleasing results) very quickly.

 

Leave a Reply

Your email address will not be published. Required fields are marked *