Twitter announces Bootstrap, a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource. Check out Bootstrap on Github
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:
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
Bootstrap doesn’t run on Twitter’s platform; the company just fostered its development and is now releasing it into the world.You can check out the particulars and some examples, and you can also grab all the code on Github. The Twitter developers are also asking for the help of other interested hackers to commit to Bootstrap and help make its footprint even smaller.
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.
Otto notes that Bootstrap was originally an internal tool developed during Twitter’s first Hackweek. Now, Bootstrap is used across the board for all Twitter’s internal apps, of which there are many.
“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,” wrote Otto. “This release represents our first public 1.0 release and the open sourcing of many months of hard work.”