Twitter Bootstrap

Bootstrap is a modular framework developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto, in face of those challenges:

“…[A] super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.”

The first deployment under real conditions happened during Twitter’s first Hackweek.” Mark Otto showed some colleagues how to accelerate their projects development with the help of the toolkit. As a result, dozens of teams have moved to the framework.

In August 2011 Twitter released Bootstrap as open-source. As of February 2012, it is the most popular GitHub development project.  Version 3.0 is due out soon and developmental comments are being taken now.  Many CMS developers are creating Joomla, WordPress, and Drupal, to name a few, themes and add-ins.  The popularity lies in the simplicity of the system once you have absorbed the CSS and Javascript functionality.  While modular, clever use of the grid system can create a non-grid design.  Combined with HTML5 Boilerplate and Initilizr (custom html5 configurations) gives a fully funtional HTML5 framework.

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations.

The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 2.0, the configuration of Bootstrap also has a special “Customize” option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

Grid system and responsive design

Bootstrap comes standard with a 940 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape format, Tablets and PCs with a low and high resolution (widescreen). This adjusts the width of the columns automatically.

Understanding the CSS stylesheet

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a browser and system-wide uniform, modern appearance for formatting text, tables and form elements.

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities thumbnails, formatting for warning messages and progress bar.

JavaScript plug-ins

The JavaScript components of Bootstrap are based on the jQuery JavaScript framework. Plugins are accordingly found in the jQuery toolkit plugins. They provide additional user-interface elements such as dialog, tooltips and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0 following JavaScript Plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

What does this mean to you?  Better, stable, cross-browser support for your website.  It’s a good thing!


Posted

in

, ,

by

Tags: