Twitter Bootstrap

Actions
 Twitter Bootstrap
Srdjan Kali

Article by

Srdjan Kali

Jan 4, 2018

This is a framework for faster and easier web development.

Twitter Bootstrap is a tool for rapid web application development. More precisely, it is a collection of CSS and HTML rules and JavaScript extensions that use some of the latest search engine techniques, provide modern typography, forms, buttons, tables, frames and navigation, and everything you need in a small resource.


SHORT HISTORY

At the very beginning of Twitter, engineers used almost every library to get to know front-end requirements. Inconsistencies between individual applications lead to difficulties in their scaling and maintenance. Bootstrap began as the response to these challenges, developed during the first Twitter Hackweek when the first stable version released how engineers could use it in the company.

With the help of feedback from many engineers, Bootstrap has grown significantly, encompassing not only basic styles but also elegant and durable front-end patterns. The first version of Bootstrap was released in August 2011 as an open source release, and in February 2012 it became the most popular project on a GitHub.


WHY USE BOOTSTRAP?

At its core, Bootstrap is CSS, but it is built with Less, a flexible pre-processor that provides much more capabilities and flexibility for users than plain CSS. With Less, we get a number of functions such as nesting declarations, variables, operators, and many more options. In addition, since Bootstrap is clean CSS when compiled using Less, we get two important advantages:

First, Bootstrap is very easy to implement, just need to insert it into the code and that's it. Compiling of Less can be achieved through JavaScript, using the Mac application, or via Node.js (read more at http://lesscss.org).

Secondly, once compiled, Bootstrap does not contain anything other than CSS, which means there are no superfluous images, Flash or JavaScript. All that remains is a simple and powerful CSS for your Web development needs.

BOOTSTRAP STRUCTURE

When you take a closer look at Bootstrap, you will notice that the development files are divided into seven specific parts:

    • reset.less - serves to reset CSS, made by Erik Meyer and modified for Bootstrap needs by removing unnecessary items.
    • preeboot.less - Color variables and mixins for creating gradients, transparencies and other effects in order to simplify CSS prefixes and reduce the amount of code.
    • scaffolding.less - basic and global styles, that serves to generate grid systems, structural layouts, and page templates.
    • type.less – serves for headings, text, lists, code, and many other typographic elements.
    • patterns.less - contains repeatable interface elements such as navigation, modules and tool types.
    • forms.less - are styles for different input types like form and control.
    • tables.less - are spreadsheet styles for different display resolutions.

Since CSS is divided into more manageable parts for easy organization and iteration, compiling these files with Less means that in the end, we get only one CSS file that we need to call in our HTML code.

Bootstrap is very popular among web developers, so you can see if you look at the official project page at GitHub, and according to the current interest and the number of active participants, a bright future is expected.
More information about this project you can find at https://github.com/twbs/bootstrap.

Follow me on Twitter – @SrdjanKali.

Comments (0)

You must Register or Login to post a comment

1000 Characters left

Copyright © GLBrain 2025. All rights reserved.