Skip to content
Joanna Swartwood, Director of Marketing and Revenue GrowthMon, Aug 20, 2012 7 min read

What is Twitter Bootstrap and How Will it Change Joomla?

What is Twitter Bootstrap and How Will it Change Joomla?

With the Joomla 3 alpha 2 hitting the internet last week, the Joomla world is buzzing about twitter bootstrap and how it will help elevate Joomla to a new level. No, bootstrap is not some stinky old work boot, but what exactly is bootstrap? Why is bootstrap so cool? How will bootstrap change the way we use Joomla? In this post we examine these questions and others to get you up to speed.

What is Twitter Bootstrap and How Will it Change Joomla?

What is Twitter Boostrap?
To break it down in simple and easy to understand language, Twitter bootstrap is a free, open-source collection of tools that aids in creating websites or web applications. This toolset includes pre-developed HTML and CSS templates for typography, forms, buttons, charts, navigation and other components.

Originally the project was developed and funded by Twitter as an internal resource for helping develop consistent design patterns. After its initial use, Twitter knew the project could develop into something much more and decided in August 2011 to release it as an open-source project. Now, almost a year later from bootstrap's public release, it's one of the most popular coding projects in the developer community and is now used by many of the top websites and applications in the world.

Why is Bootstrap so cool?
Ok, so we now know that bootstrap is this toolkit for web developers, but why is this toolset so cool and what are the benefits of using bootstrap? Well above the awesome name, boostrap has a laundry list of reasons that it's such a great toolset.

  • Responsive: bootstrap has been coded with responsive design in order to cater to users with all different screen sizes. Being responsive, bootstrap is set up for the future of internet use including phones, tablets, desktops and whatever else technology throws at us.

  • Consistency: One of the main reasons this toolset was developed was because Twitter was seeing big inconsistencies between developers working on their projects. This caused some issues both on a developer level and user level. So in an effort to save time, energy and headache one central set of development code was created.

  • Build on and With the Latest and Greatest: Built by some of the development word's "geekiest" developers, boostrap was built with and developed with the latest CSS3, HTML5 and jQuery libraries. Additionally, the CSS was developed on the LESS platform which saves time in both development and design.

  • Saves Time: Twitter bootstrap saves time for two reasons. One, developers can pull from the bootstrap libraries extremely fast to create many of the items on a website. The fact the code is already created and ready to go speeds up development time.

    Secondly, because it's one central code library that is both consistent and comes with some level of styling, much of the design work has already been completed right out of the box. When a web developer can hand over the project to the designer and 50-70% of the styling is done, this can dramatically speed up the project. Additionally, the fact the CSS is built with LESS will save designers loads of time because they can leverage the streamlined styling process of that LESS offers.

  • Looks Good: The design of twitter bootstraps just looks good. Yes, it's plain, clear and simply but that is the preferred design style for many websites. The cleaner and easier to view the website and components are, the better user experience and the higher the conversion rates.

Now one of the major negative arguments against using boostrap is that because everyone is pulling from one central code base that all the bootstrap based websites will look the same. Although I could see this as a valid argument, I would have to disagree. Just like any web project, there is an almost limitless ability to design it however you want. We are just on the tip of the "bootstrap" ice burg and as it is developed and designed it will become more and more diverse. It will be up to the designers to step up and get creative on how to take a standard boostrap website and make it creatively diverse.

How Bootstrap Will Change Joomla?
Above and beyond the above listed benefits, as the Joomla community starts to embrace and develop on twitter boostraps, as many Joomla developers already have, we will see much greater level of consistency between extensions. Currently, if you have a medium sized Joomla website with 10-15 components, there's a good chance that each one of those components have very different styling, icons, buttons etc. This causes one of two problems; either the designer must spend a great deal of time updating everything to keep it consistent or the website looks "pieced" together and not fluid. As more and more of the Joomla developers start using bootstrap in their extensions, the styling, icons, buttons, etc. of each component will match each other and thus make a much cleaner and well put together website.

With all the new coding and technology advances such as bootstrap helping improve the project and take it to the next level, it's an exciting time to be involved in the Joomla community as a developer, designer and end user.

I have listed a few good resources you can learn more about bootstrap and with the launch of Joomla 3.0 right around the corner, I would encourage you to check them out.

New Call to action