Categories: Responsive

Twitter Bootstrap

A brief history
In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, we had reached a stable version that engineers could use across the company.
With the help and feedback of many engineers, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns. This release represents our first public 1.0 release and the open sourcing of many months of hard work.

Why use Bootstrap
At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions. Additionally, since Bootstrap is purely CSS when compiled via Less, we gain two important benefits:
First, Bootstrap remains very easy to implement; just drop it in your code and go. Compiling Less can be accomplished via Javascript, an unofficial Mac application, or via Node.
Second, once complied, Bootstrap contains nothing but CSS, meaning there are no superfluous images, Flash, or Javascript. All that remains is simple and powerful CSS for your web development needs.
What’s inside
When you take a closer look at Bootstrap, you will notice we have separated the development files into seven distinct files:
reset.less A CSS reset originally made by Eric Meyer and modified for our use to remove unnecessary elements
preboot.less Color variables and mixins for things like gradients, transparencies, and transitions to simplify vendox-prefixed CSS blocks to one line of code each
scaffolding.less Basic and global styles for generating a grid system, structural layout, and page templates
type.less Headings, body text, lists, code, and more for a versatile and durable typography system
patterns.less Repeatable interface elements like navigation, modals, popovers, and tooltips to take you beyond the default scaffolding styles
forms.less Durable styles for various input types, form layouts, and control states.
tables.less Styles for tabular data in a number of varied displays
Since we opted to break our CSS into more manageable chunks for easy organization and iterations, compiling these files with Less means you end up with just one CSS file to include.
Why it works
Bootstrap works by providing a clean and uniform solution to the most common, everyday interface tasks developers come across. At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites. This is because while it is very extensive, it’s flexible enough to work for many unique design needs.
Today, you can use Bootstrap to throw together quick prototypes or guide the execution of more sophisticated designs and larger engineering efforts. In other words, Bootstrap is a very simple way to promote quick, clean and highly usable applications.
We look forward to working with the open source community to evolve Bootstrap.
Since then, Bootstrap has grown to be one of the most popular projects on GitHub, the largest open source code host in the world, with over 16,000 watchers and 3,000 forks. Bootstrap’s contributors continue to humble and amaze us. People everywhere are using it in creative ways, including projects like NASA’s code.nasa.gov and MSNBC’s Breaking News.
After months of development, we’re ready to introduce the next major release, Bootstrap 2.
What’s new
Bootstrap 2 brings a plethora of changes and new features to the toolkit, many added as a result feedback from the community. In addition, much of our work was guided by our experiences of working on Twitter.com’s latest redesign where we created a flexible and durable design system. We took the same approach to Bootstrap 2 and came away with more features, better documentation, smarter default styling, and more.

Here’s a look at some of the most prominent changes:
Completely overhauled documentation for nearly every component
A brand new Customize page to tailor your Bootstrap experience
New 12-column, responsive grid system
New table styles with a common base class for improved compatibility with other tools
New form styles with smarter defaults, requiring less HTML
Icons, graciously provided by Glyphicons
New, smarter navigation components
New buttons, button groups, and button dropdowns
New, simpler alert messages
New javascript plug-ins like carousel, collapse, and typeahead