How we Used Twitter Bootstrap to Streamline our Development Process As web developers, we try to find means of making the development process quicker, simpler and better. Recently, we discovered that the Twitter development team have created Twitter Bootstrap, a suite of tools that provide common functionality needed on all our projects.

twitter-bootstrap

How we Used Twitter Bootstrap to Streamline our Development Process

As web developers, or developers in general, we continue to try to find means of making the development process quicker, simpler and better.  We’re always looking at either building our own tools that can be re-used on subsequent projects or finding open source tools that can be used for the same purpose.

Recently at 76design, we discovered that the Twitter development team have created a suite of tools that provide common functionality needed on all our projects.  Hosted on GithubTwitter Bootstrap has played a role, in some way, on each of the websites we’ve developed since… and we’ve seen some nice gains.

Out of the box, Twitter Bootstrap provides a simple, easy to use, fully responsive 12-column grid system allowing for all content to be viewed in a similar way no matter what the browser width may be.  What this provides us is a means to get a site up and running quickly, with all the flexibility offered in a 12-column responsive grid system. This baseline framework gives us an implementation that works on a range of devices, and browser widths, with minimal effort, greatly reducing development time and ensuring all content is displayed appropriately no matter the means by which it is trying to be viewed.

Of course, it doesn’t end there.  The Twitter Bootstrap framework additionally comes with a set of base CSS functionality for Form, Button, and Table styling and more.  The base CSS also contains styling for a large set of Glyphicons that can also be very useful when in need of generic symbols/icons that denote tasks, actions or events that are often seen, such as closing or editing.  It may be good to note however that the trend seems to be moving towards using icon fonts, which are more flexible when it comes to sizing and color changes.

Another useful feature is its set of Javascript plugins, including:

  • modal: full screen windows for displaying more or larger detail
  • dropdown: handy interface for visually uncluttered lists
  • popover: highlight details / instruction on mouseover events
  • carousel: media (image and video) scrollers to highlight featured collections  

Again, these plugins are simple to set up, are relatively generic and they provide a functionality that is modular in nature.  By being modular in nature, it provides us the means of including only which functionality we need.

As a final point, Twitter Bootstrap offers easy, modular customization. We are free to use any subset of the functionality that Twitter Bootstrap provides. Opting to use only the components we want – and thereby keep the project nice and lean.  Conveniently, the Twitter development team has provided a very nice customization tool that gives us the ability to create our own personalized package of bootstrap, restricting it to only the functionality we need.

We have found a highly customizable tool, in Twitter Bootstrap, and have seen some great gains using it.  Considering the fact that it is maintained and improved upon by the Github community, we will continue using it now and look forward to seeing what other functionality will be available in the future.

Nick Edgar

Nick Edgar Bio:

Senior Web Developer with 76design. Before working coming to 76design, I worked in the Game Development industry with Artech Studios.