Bootstrap (front-end framework)
CC BY 3.0 ( documentation, icons)
Bootstrap originally arose from the project to develop the internal analysis and management tools from Twitter. At this time, different libraries were used for the surface development in the company, resulting in inconsistency and high maintenance costs. To meet these challenges, the focus of the project has been extended:
" [ ... ] A super small group of developers and I got together to design and build a new internal tool and saw on opportunity to do something more. Through process did, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with on early version of the bootstrap as a way to document and share common design patterns and assets within the company. "
" [ ... ] A very small group of developers and I sat down together to make a new internal tool and saw there the possibility to make more of it. During the process, we realized that we were going to build something that was much broader than just another internal tool. Months later we held an early version of the bootstrap in the hands, which general design patterns and findings documented within the company. "
According to statements by Otto plays the idea of designers and developers to bring together a vital role in the development: "From white boarding ideas to coding rough prototypes, collaborating across disciplines is what made bootstrap successful for internal use at Twitter. " ( "From Sketch of ideas to programming rough prototypes it was the interdisciplinary collaboration, has made the bootstrap for internal use at Twitter so successful ").
The first application under real conditions experienced on Twitters Bootstrap first Hack Week [Note 1]. Otto showed some colleagues how they can accelerate the development of their projects with the help of the toolkit. When presenting the results showed that dozens teams had recourse to the framework. In this way, the bootstrap was due not only to shorten the development time, but to produce a uniform look and feel for applications resulting in HackWeek even without assistance of a dedicated designer.
In August 2011, Twitter decided to present the results to the public as open source project. Since then bootstrap has in a very short time with almost 22,000 Forks and nearly 110,000 observers for popular GitHub project develops (as of December 2013).
Since version 2.0 also supports bootstrap the design within the meaning of Responsive web design. This means that the graphical structure of web pages is dynamic and in consideration of the properties that brings the device you are using ( PC, tablet, mobile phone) with them. Thus, the grid layout and the interface elements automatically adjust to the respective screen resolution or window size.
Bootstrap is offered as open source and available via GitHub. Developers are encouraged to participate in the project, and can make your own contributions to the platform.
Operation and design
Bootstrap is modular and consists of a core of LESS stylesheets that implement the individual components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. With this structure, one can decide which components to use in his project by adapting the bootstrap file.
Adjustments are possible to a limited extent via a central configuration stylesheet. In it are set, among other information about the font and size, color, or the structure of the grid layout. More profound changes are possible by the LESS - declarations are overwritten by bootstrap.
Since version 2.0, the configuration of bootstrap as well as a special "Customize" option in the documentation is possible. Moreover, the developer selects a form the desired components, and may adjust the values of various options to his needs. The subsequently generated package already contains the pre-built CSS stylesheet.
Backbone: Grid system and Responsive Web Design
Bootstrap comes standard with a 940 -pixel-wide, zwölfspaltigen grid layout. Alternatively, using a layout of variable width of the developer. For both cases, the toolkit offers four variations within the meaning of Responsive web design, what different resolutions and device types use: mobile phones, portrait and landscape format tablets, and PCs with low and high ( widescreen ) resolution. Here, the width of the columns automatically adjusts to the available window width.
Using the configuration of the stylesheet developer has the possibility of the number and width of the column, the spacing between the columns, and the total width of the layout to adapt his ideas.
Understanding CSS stylesheet
Bootstrap includes a number of style sheets, which contain 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. The developer is benefiting from the experiences that have been made in the development and design of Twitter and can fall back on tried and tested design decisions and proven design patterns the front end design.
In addition to the regular HTML elements contains bootstrap Another commonly used interface elements. These include buttons with extended functionality (eg grouping with dropdown option buttons or buttons ), navigation elements (navigation lists and framing, horizontal and vertical tab, breadcrumb navigation, pagination, etc. ), labels, advanced typographic possibilities, thumbnails, formatting for warning messages and progress bar.
The following example illustrates the function. The HTML source code defines a simple search form and a results in the form of a table. The page consists of regular, semantically used HTML5 elements as well as some additional CSS class information corresponding to the bootstrap documentation. [Note 2] The figure shows the representation of the document in Mozilla Firefox 10