Twitter Bootstrap – Out There To Accelerate Your Projects
Bootstrap started as an internal Twitter project that was intended for developing internal analysis and management tools. Because various libraries were used for the interface development, this led to inconsistency and high maintenance costs. Many people started using the framework after one of the leader developers showed how useful it is to accelerate projects with it.
SEE ALSO: Using Nesting Styles in Preprocessors
Although the support for HTML5 and CSS is relatively incomplete, the Bootstrap framework is compatible with all major browsers on the market. However, although support for gradients, rounded corners and shadows are not featured by older browsers, Bootstrap uses them – this way it extends its use, although the usage of the above-mentioned techniques is not required.
Bootstrap 2.0 also features support for responsive designs, which means that a page created with the framework can adjust dynamically to screen size. If you’ve been in the branch for more than 3 minutes, you already know how important responsiveness is to a website or an application. Bootstrap gets another praise from me for this.
Functions and structure
The framework is modular and consists of several LESS stylesheets that implement various components of it. Obviously the stylesheets can be adapted by developers with a limited amount of effort, so that the framework fits the project and its needs.
If you’ve seen LESS stylesheets before, you probably know it allows the usage of variables, functions, operators and nested selectors.
Another advantage of Bootstrap is that since the 2.0 version, the framework allows developers to configure it for his own needs. For example, if needed, the values of different options can be modified. The developer can also choose the desired components and adjusts them, so that the generated package already comes with the pre-built CSS stylesheet for the wished configuration.
As mentioned earlier, the framework is responsive. It comes with a 940-pixel wide, grid layout, but there are some more to choose form if the default one doesn’t fit. In all cases the toolkit comes with four variations in order for the design to adapt to the screen – so you have support for mobile phones (portrait and landscape), tablets and PCs both with low and high-resolution (widescreen).
With so many stylesheets provided by default, developers need to have a clear understanding of them. All stylesheets provide style definitions for key HTML components. Thanks to those the toolkit features a system-wide uniform, modern interface for formatting text, form elements and tables.
There are lots of regular HTML elements included in the toolkit, but there are also some other commonly user interface elements such as buttons with different features (grouping with drop-down, creating navigation lists, vertical and horizontal tabs, breadcrumbs for navigation, pagination and many other popular ones), labels, thumbnails, creation of warning messages and progress bars and even advanced typography capabilities.
Some more plugins were added with the 2.0 version, including Modal, Dropdown, Scrollspy, Tab, Popover, Collapse, Tooltip, Typeahead, Carousel, Alert and Button.
How to use it
The concept behind
The project started in August 2011 at the hands of Mark Otto and Jacob Thornton. Some of their internal tools at Twitter lacked, according to Otto, a refined and approachable design. The answer they came up with was quite ingenious: bringing designers and developers together is the solution.
The constant interaction with developers is assured by their continuous efforts to develop the toolkit even one year after its release. The project was so successful because it allowed individuals to collaborate across different disciplines – each brought their most important values and technical skills to the project. The fact that the project was for internal use at Twitter tells a lot about its success rate. It’s Twitter we’re talking about here…
Bootstrap was created as a style guide. It gave developers a single point of reference and this way they shared guidance from designers and created a set of documentation for each of the living components. Their approach helped form the beginning, assuring Bootstrap will not only be a tool for internal use at Twitter, but also a toolkit for any designer or developer.
Another asset of Bootstrap is the documentation behind it. Some time ago I’ve been to an exam where I had to defend a project I worked on. It was a WordPress theme development project. During question time, the censor made it clear that he doesn’t like WordPress because it lacks documentation – and where it doesn’t, the documentation is a bit vague and difficult to follow for beginners. I agreed. You won’t meet with this issue when handling Bootstrap.
The toolkit provides interactive documentation to anyone who wants to use it – regardless of their skill level. It allows anyone to clone or download the source code or debug the code with Firebug. This is their main philosophy it seems. The fact that the project was open-source helped its development even more, with more and more people wishing to be directly involved.
“No matter the skill level or workflow, we needed folks to be able to open this living document and be able to use Bootstrap to quickly and easily build something they love.” Mark Otto, founder.
In my opinion the clear success behind Bootstrap is due to the mentality and way of thinking of the co-founders and leader developers behind it. I always thought an open-source project has more chances of being successful than if a company develops it for money. Should I give again WordPress as example to this?
Regardless of your skill level, I think you should at least go and check the toolkit. Your time will be worth it. If you want a comparison, using Bootstrap is only a bit more difficult than using a grid system downloaded from the internet. And when I say difficult, I do not mean it is difficult to code – as it’s the same HTML/CSS you would always use. When I say more difficult I think of the compiling which needs to be done in order to be able to use Bootstrap.
However, with such a large documentation behind it, it is impossible not to be able to find your way to the point where you already are confortable – coding and designing. And when you will reach that confortable stage, you will most likely realize how useful the tool is.
Creating a website or an application should be much easier if powered by Bootstrap, as it helps you skip some steps – usually the annoying ones. I always believed starting a project is the most difficult part of a development process. Once you’re rolling down the hill, you will unlikely stop again. Bootstrap is the perfect tool to push you from the top of a hill and allow you to start on the fun part of a development process right away.
We would love to hear your opinion
Have you ever used Bootstrap? What is your opinion of it? In case you used it, which were the up and down sides of it? Can you recommend something to the ones who didn’t get a grip of it yet?