25Jan

Get Better with Bootstrap. Tools & Tuts

Bootstrap as the easy and smart framework was specially created for cross-browser, consistent and attractive interfaces. Basically, it is a perfectly packed “tool chest” that provides really simple and fast creation of professional websites. It has well-thought HTML/CSS/Javascript structure, that allows you to build an advanced web project without any problems. Benefits of using Bootstrap are in Less. Less is the decent CSS Framework which runs on both client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Bootstrap is a very simple and flexible framework that is extremely intuitive to use, so you’ll figure things out even without reading documentation. Try and be on the wave!

If you plan to run a Bootstrap-based website, you can simply browse the great collection of Bootstrap Themes from TemplateMonster and find the most suitable one.

Let’s specify the main Bootstrap functions:

  • create styles for the main page elements (ul, p, blockquote, small, abbr, etc.);
  • use styles for table design;
  • mark page layout, header, bottom, number of columns, their width;
  • 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.

Tools

When you start developing websites with Bootstrap you need a certain “toolbox” to make sure the end result will justify the efforts spent on this framework. So, let’s talk about these 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.

* * *

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.

* * *

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.

* * *

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.

* * *

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.

* * *

Lavish, Bootstrap like a King

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

* * *

Bootstrap with Apps, Themes, and Enhancements

Any platform, any language, no-install.

* * *

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.

* * *

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.

* * *

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.

* * *

Video Tutorials

The presented here videos help you better understand Bootstarp and advance your skills working with this framework.

General Tutes on Bootstrap

***

Twitter Bootstrap Quickstart

***

Photo Carousel with Bootstrap

***

Flexible HTML & CSS

***

Typeahead Plugin with a remote MySQL Data Source

***

Responsive Contact Page Tutorial

***

How to Create Responsive Fluid Grid

***

How to Create Responsive Blog

***

Comments are closed.