Figuring Out Bootstrap, Basic Tools and Tutorials ~ csstips

Thursday, December 6, 2012

Figuring Out Bootstrap, Basic Tools and Tutorials

4:56 AM 1 comment

Bootstrap – is a perfectly packed “tool chest” that allows create websites really fast! Bootstrap’s alternatives are like snotty babies, for one simple reason – Bootstrap is densely tied-up with LESS. Those who do not understand what it is, in short: it’s a very nice and decent CSS Framework. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Generally Less is 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 will extremely simplify your work. Next thing you need to do is to run the created file through the preprocessor. As a result you’ll get a CSS file with variable values inserted into the right places and calculated with operators.

***

To use Bootstrap framework there is no need to 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!

Need a Bootstrap-based website? Why spare time creating your own? Using the tools and tuts from this blog post you can simply extend or optimize a ready-made Bootstrap theme.

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.

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

These videos will help you to master Bootstrap features and to get deeper understanding provided in the beginning of the article. Feel free to check them out!

General Tutes on Bootstrap