Articles Bootstrap Templates

“Pull Up” Your Designs with Twitter Bootstrap

4.67/5 (3)

Twitter Bootstrap is a beautiful web design kit for creating cross-browser, consistent and good looking interfaces. With a flexible and well-thought HTML/CSS/Javascript structure, Bootstrap offers lots of popular UI components, a grid system and JavaScript plugins for common scenarios. And, it seems to be rocking the web design community as there are lots of websites already built with it.

Twitter Bootstrap is already powerful enough to empower any web interface. In order to make more use of it and ease the development process, there are various tools/resources that complement it.

Bootstrap uses the latest developments in the CSS and HTML, so be careful elder versions of browsers may have difficulties rendering pages. Additionally with the release of Bootstrap 2 all layouts you will create will this framework will be responsive! To find more information about responsive web design you may browse through the following guide.

Benefits of using Bootstrap are in Less, which is a way more powerful pre-processor, than usual CSS. Using Less, developers can gain access to such features as nested columns, variables, mixins, color features, etc. It also makes Bootstrap easy to use, just drop it in your code,  and go! But if you're looking for the best solution,  choose your favorite one from these bootstrap themes, and build websites with hands down!

Interesting fact: recently there was launched a portal for Bootstrap developers, and there have already been registered more than one million third-party applications developed by more than 750.000 developers from around the world. The new application is created every 1.5 seconds!

Basic tools Bootstrap:

  • Grids - sizes of columns that can be used immediately, such as column width 90px belongs to the class. Span2, which can be used in CSS document description;
  • Templates - fixed or elastic document;
  • Typography - descriptions of the font, the definition of certain classes of fonts such as Code, Quote, etc;
  • Media - provides some control for images and videos;
  • Tables - tools for designing table, up to added functionality and sorting;
  • Forms - classes for processing not only shapes, but also some of the events occurring to them;
  • Navigation - classes for creating tabs, pages, menu and toolbar;
  • Alerts – allow to create dialog boxes, pop-ups and tool tips.

Here are five reasons why you may choose Bootstrap.

 

#1 940px grid

 

twitter bootstrap


The first thing to be noted is the 940px grid. This is not a surprise, each framework has one still grid allows to build pages quickly with almost no effort. The default size of the grid is 940px and it has 12 columns, each column is 40px with 20px wide gutter. As its analogue 960gs this grid is a bit heavy though requiring some markup but it’s what makes Bootstrap a snap.

The grid is aimed at row and span classes. When you want to start a new row simply create a div and apply the “row” class. Everything for that row goes in that div, when it’s time for another row, close the old one and start a new one. For each div within a row, you apply the “span#” class with “#” being the number of columns you want the div to span.

The mark up for the grid

 

 

 

 

 

 

 

 

 

#2 LESS

 

What’s LESS? It’s an increasingly famous CSS preprocessor, which gets big endorsement from Twitter with a ton of built in support. They’ve really gone all out and created a lot of LESS mixings and variables for you to work with right out of the box.

How to use LESS?

Write some code...

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
} 

...then include less.js file with your styles...

...and you're ready!

 

#3 Navigation

 

One Bootstrap’s great things is an awesome navigation toolkit, it can be used to implement several different types of complex navigation elements in seconds.

Main Navigation
For instance, there’s an awesome main navigation bar that looks sharp, allows for easy custom branding and even stays with you as your scroll (shown above on top). The markup seems unnecessarily heavy but it sure does make it easy to create a really slick menu (dropdown support is included as well).

Tabs
You can also easily implement a tabbed navigation scheme. This markup looks much nicer and really couldn’t be any easier. Simply add the “tabs” class to an unordered list and you’re done!

 

 

 

 

 

#4 Galleries

 

twitter bootstrap

With Bootstrap, image galleries are a snap. The same thing as with tabs, they require an unordered list with a special class, in this case “media-grid”. With applied gallery automatically performs the layout work taking into account the size of your images. Twitter recommends to use following sizes: 90, 210, and 330; they will work well with the layout.

 

 

 

 

 

 

 

 

Gallery images come pre-styled, what you may find are: borders, rounded corners, padding, hover styles; everything you need to get a grid of images in place and functioning. You can even mix image sizes and the grid will automatically handle the differences without breaking your page layout.

 

#5 Excessive JS Compatibility

 

twitter bootstrap

We’ve already touched upon HTML and CSS goodies you may find within Bootstrap, but there is one thing that it can’t live without in the modern web society, it’s the compatibility with JavaScript. You’ll find JavaScript libraries for implementing tooltips, modal windows alerts and more!

You’ll also need some JavaScript to bring some of the elements we’ve already seen to life. For instance, there are built in functions for making each tab load separate content and for handling the dropdown menu items.

Well, if these five reasons did not make you believe in Bootstrap, here are several live websites created using this framework:

8020select.com

twitter bootstrap

***

tagmycode.com

twitter bootstrap

***

living.is

twitter bootstrap

***

insurancezebra.com

twitter bootstrap

***

percentagecalculator.info

twitter bootstrap

***

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *