Bootstrap: Ride on the Wave (Tuning Tips)

AD

Web design world was flooded with a new and absolutely amazing trend in site development and its name is Bootstrap. Lots of developers have already saddled this wave, though there are people who may have certain doubts with the “Big B”. To bust all myths and break all doubts we’ve prepared an article that gives you all the reasons to use this tiny but mighty framework.

Bootstrap significantly simplifies creation of frameworks and future pages of standard elements. Framework continues to grow in popularity, and developers do not skimp on the release of new versions. Support in Twitter Bootstrap is also remarkable.

Bootstrap significantly simplifies creation of frameworks and future pages of standard elements. Framework continues to grow in popularity, and developers do not skimp on the release of new versions. Support in Twitter Bootstrap is also remarkable.

Bootstrap significantly simplifies creation of frameworks and future pages of standard elements. Framework continues to grow in popularity, and developers do not skimp on the release of new versions. Support in Twitter Bootstrap is also remarkable.

Bootstrap is not just a simple CSS framework it’s a set of predefined styles and plugins for jQuery, that allow to build quickly and less laboriously cross-browser interfaces of different orientation. To use this framework there is no need master HTML, CSS and JS. If you ever dealt with any framework you’ll be a success. Generally you’ll figure things out even without reading documentation, cause all features are extremely intuitive to use!

If you haven’t yet tried Bootstrap, here is your chance to start, in this blog article we’ll try to undiscover “this strange creature”…so let’s rove.

We’ve already told that Bootstrap is a set of CSS styles and plugins for jQuery. Also there are sprites for creating icons. To get started you need to create new html page and connect Bootstrap styles to this page – file bootstrap.css (or bootstrap.min.css, compressed one), file bootstrap-responsive.css (or bootstrap-responsive.min.css, compressed) and Bootstrap javascript file – bootstrap.js (or compressed bootstrap.min.js). Also to the file for the markup (combo boxes, modal windows) you need to connect jQuery plugins and actually the latest version of jQuery.

Each of these files as well as Less files, sprites and plugins for jQuery, examples and documentation can be downloaded here. At GitHub you can download all files or select only the most essential ones.

Anyways, the page is ready, all necessary files are connected, now it’s time to add necessary (content) and page element blocks and apply predefined styles, outlining certain attributes such as data-*.

By placing stylistic elements we’ll get a cross-browser web interface with lists, forms, menus, dropdown menus, “carousel” and much more. Everything you can see on the Bootstrap website. (Actually its interface is also created using this very framework.)

In addition to being cross-browser compatible this layout will adapt to different sizes of screens devices. To make this work, there is an optional file bootstrap-responsive.css. It contains styles for different screen resolutions. For example, the smartphone layout page elements will be lesser, main menu instead of a set of links will shrink into a single button, which you can click to access the menu.

Of course somebody will say that it’s really monotonous and all sites with different specifics can’t have the same interface. Sure! Don’t forget you can edit/customize CSS styles. You can use only part of predefined styles, for building page layout. Even without major alterations the layout will suit lots of purposes:

  • can be used for admin panels;
  • can be used for web application without claims for registration, for which various thingies are not important;
  • you can quickly create page prototype during the development, and apply needed interface later.

So What’s Bootstrap Capable Of ?

  • mark page layout, header, bottom, number of columns, their width;
  • create styles for the main page elements (ul, p, blockquote, small, abbr, etc.);
  • use styles for table design;
  • use styles to position form elements, add styles to these elements, add default buttons ;
  • create buttons with a drop-down lists;
  • create separate styles for each icon;
  • grouping buttons;
  • create navigation with tabs;
  • create modal windows;
  • create tooltips;
  • blocks with various messages;
  • create “Accordion” or “Carousel” sliders;
  • add prompts to the forms.

 

What’s More?

With bootstrap you’ll get an awesome thing called Less. It’s a style preprocessor. You can create style files with the extension .less. As usual, write CSS rules, however, you can add variables used by operator, groups, and repeatedly insert grouped parts of CSS rules in the relevant parts of other rules. Most importantly in Less, there are lots of other goodies that extremely simplify life. Next thing we need to do, we need to run created file through the preprocessor and as a result we’ll get a CSS file with inserted into the right places variable values, calculated using operators and others.

You can connect to your page less and less.js files (downloaded previously from the site mentioned above), it will create CSS rule out of less file. You can pre-compile less CSS files from file and then connect to the page CSS files.

Tools

Date Range Picker for Twitter Bootstrap

The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

Date Range Picker for Twitter Bootstrap

***

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

File uploader for based in JavaScript

***

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

Bootstrap Image Gallery Download

***

Simply Beautiful WYSIWYG Editor

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful WYSIWYG editors with the help of wysihtml5 and Twitter Bootstrap.

Bootstrap Tool for What You See is What You Get

***

Bootbox.js

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Another Tool for Bootstrap

***

Lavish, Bootstrap like a King

Generate your own Bootstrap color scheme from an image and customize to your taste.

Lavish Bootstrap

***

Bootstrap with Apps, Themes, and Enhancements

Any platform, any language, no-install.

Using Bootstrap with Themes and Enhancements

***

Extending Fireworks

Fireworks is a great tool for prototyping and designing web sites and applications. Over the last many years I have been using Fireworks and have seen handfuls of very useful extensions and commands.

Bootstrap app

***

Fbootstrapp

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Bootstrap extension

***

Golden Bootstrap

Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap.

Extensions of Bootstrap

Video Tutorials

Twitter Bootstrap Tutorial 1 – Introduction / Setup

Twitter Bootstrap Tutorial 2 – Forms

Twitter Bootstrap Tutorial 3 – In-line & Search Form

Twitter Bootstrap Tutorial 4 – Tables

Twitter Bootstrap Tutorial 5 – Tabs & Pills Navigation Bar

Twitter Bootstrap Tutorial 6 – Vertical Navigation Bar

Twitter Bootstrap Tutorial 7 – Buttons With Icons

Twitter Bootstrap Tutorial 8 – Popover

Twitter Bootstrap Tutorial 9 – Carousel

Twitter Bootstrap Tutorial 10 – Modal

Advertisement

Related Stuff!

Published on: December 13, 2012,

This post is in: Articles, Tutorials

Author

AlexBulat

I’m one of those guys willing to play with words getting the message across to the end user. What’s more I’m really passionate about all things WordPress. Well, also if you need a cool bootstrap theme ask me where you can get one;)
All Articles by

Leave a Response