Creative Digital Media

History is recorded moments in life. People’s thoughts, either great among others or just great in their own shadow. Every glimpse of life at that just moment, deserves to be treasured. So just “Keep That Thought”…

THE BIG BADASS LIST OF 210 USEFUL TWITTER BOOTSTRAP RESOURCES

Follow us on Twitter at: @bootstraphero

Components

Additional Bootstrap specific addons to supplement the base Bootstrap features

Display

An accordion-based wizard based on Bootstrap styles.
A simple, full-featured, pagination system for jQuery that outputs Twitter Bootstrap marked up pagination links.
A jQuery plugin to handle multiple tagged input.
A Bootstrap styled jQuery Table of Contents
Quick and easy way to build your product tours with Twitter Bootstrap Popovers
Bootstrap tags is a lightweight jQuery plugin meant to extend the Twitter Bootstrap UI to include tagging.
Add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs
Extends Bootstrap’s native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.
Pillbox container (often used for tags) control
Editable, searchable data display table.
Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 App Store” style
Easy to configure site tour wizard
Transforms any div into a scrollable area with a nice scrollbar (default Bootstrap styling).
Multi-Color progressbar component for Twitter Bootstrap
HTML5 video player plugin for jQuery based on bootstrap UI
A dynamic pagination jQuery plugin for Twitter Bootstrap
An extension to the Modal dialog of Twitter’s Bootstrap toolkit,
Style, sort and manipulate tables quickly
A port of the Pagedown Markdown editor for use with Twitter Bootstrap.
Slick dropdown on hover and a good discussion of the tradeoffs for mobile.
A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.
“Modern” the style formerly known as “Metro” appearance Bootstrap button styles.
Fading jQuery lightbox to show images/logins or other niceness.
Uses the markup and css from bootstrap to make pretty D3 popovers.
Growl style alerts for Bootstrap
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes.

Form

Drag and drop a Google Maps map marker to choose a location, or dynamically update an embedded map on the page when the address is entered.
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
A context menu extension of Twitter Bootstrap made for everyone’s convenience.
Replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.
Wait indicator for form submissions
Search input control for Twitter Bootstrap
Pillbox container (often used for tags) control
Create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap
Allows for select box filtering, default selection and better styling
Additional functionality beyond the stock Bootstrap typeahead – callback on select, local or remote data source
A user-friendly file-uploading experience over the web
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
A JQuery validation plugin for bootstrap forms.
Replaces the default checkboxes and radio inputs for better looking ones.
Chosen (the select box awesomefier) – now for Bootstrap and LESS
Plugin designed to work with Twitter Bootstrap to enable declarative AJAX support.
Bootstrap checkbox’s restyled as on/off style toggle buttons

Input

Select a time for a text input using your mouse or arrow keys.
Bootstrap style form element combining textfield and select controls.
A drop down of timezones from country code
A drop down of languages or a display of language name from language code.
Textfield input formatting of phone numbers
A drop-down of states within a country or display of state name from state and country code
A drop-down of countries or a display of country name from country code.
Creates a dropdown menu from which a user can select a range of dates
Add datepicker to any field or other element.
Add a color picker to any field or other element.

Framework Integrations

Means and Methods of Integrating Bootstrap into your Application Framework or CMS

ASP

CSS and component helpers for ASP.NET MVC
CSLA integration for Twitter Bootstrap
Quickly add Twitter Bootstrap to an MVC 4 application.

Java

Provides simple and flexible components representing Twitter’s bootstrap components, styles, and plugins.
Wicket-Bootstrap is based on Twitter’s toolkit (bootstrap) and the Apache Wicket Framework.
A Plugin for simple Twitter Bootstrap integration into Struts2.
Provides Twitter Bootstrap CSS framework resource files within Grails.

Javascript

Set of UI elements styled using the Bootstrap toolkit for use with Ember.js.
Optional package to add Bootstrap support within Meteor
Twitter Bootstrap Theme for ExtJS 4
NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
A Derby component library based on Twitter Bootstrap.
Twitter Bootstrap for Ender
Bootstrap directives for AngularJS
A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.

Joomla

With the adoption of the Bootstrap framework, Joomla! has become the first major CMS to be mobile ready in both the visitors and administrator areas.
Theme Development Toolset for Joomla using Bootstrap
Integrates the Bootstrap library and also makes it easy to install the various Bootstrap plugins within Joomla.
Premium Joomla Bootstrap templates, code snippets, discussions and more

PHP

Shoestrap is a WordPress theme that’s based on HTML5 Boilerplate and Bootstrap from Twitter.
Quickly link the latest Bootstrap CSS and Javascript to all pages, regardless of the WordPress Theme
Bootstrap based CodeIgniter project
A theme for cakePHP 2.1 with Twitter Bootstrap.
YiiBooster is YiiBootstrap on ‘roids.
EZPublish CMS Design and Template for Twitter Bootstrap
Bringing together the Yii PHP framework and Twitter’s Bootstrap
MopaBootstrapBundle is a collection of code to integrate twitter’s bootstrap as easy as possible into your symfony2 project.
Zend Framework Boilerplate – Bootstrap included in default
A basic port of Twitter’s Bootstrap development framework to Drupal 7
Kick starts the development process of the web development process by including Twitter Bootstrap into CodeIgniter
Use Bootstrap with CakePHP without the need for FormHelper hacks.

Perl

Renders form messages using Bootstrap formatting and classes within Catalyst
YAML config for Mojolicious, Configurable application menu based on user type Unified user notification through messages displayed
Bootstrap layouts for the Perl Dancer framework

Python

Packages Twitter’s Bootstrap into an extension that mostly consists of a blueprint named ‘bootstrap’. It can also create links to serve Bootstrap from a CDN.
ToscaWidgets 2 library that makes excessive use of the Twitter Bootstrap CSS Framework.
Pyramid – Twitter Bootstrap integration
Provide a base Django project which handles the build process of Twitter Bootstrap 2.1 via django-compress
Django Toolkit for integration with Twitter’s Bootstrap
Control the rendering behavior of Django forms in a DRY way with Bootstrap
Bootstrap your Django admin in 3 minutes, without changing your existing codebase.

Ruby

A collection of Rails helpers to output formatting for Twitter Bootstrap.
A Rails generator that makes working with Bootstrap forms even easier on Rails
Integrates the Twitter Bootstrap pagination component with the will_paginate pagination gem.
A website for open source Ruby on Rails example applications and Rails tutorials.
A Formtastic form builder that creates markup suitable for the Twitter Bootstrap framework.
Hooks into less-rails to provide both compiled and LESS CSS source files from the Twitter Bootstrap project within the Rails 3.1 asset pipeline.
Boilerplate application of a Sinatra and Twitter Bootstrap application
A Rails FormBuilder DSL that makes it easier to include Bootstrap stylings within your form.
Integrates Bootstrap CSS toolkit for Rails 3.1 Asset Pipeline (Rails 3.2 supported)
Bootstrap Themes for the Kaminari Pagination gem
Bootstrap alerts and Rails flash messages combined in one easy-to-use gem.
Bootstrap based theme for Hobo 2.0

WordPress

Plugin will add a button to your WordPress text editor so you can easily add Twitter Bootstrap shortcodes to your pages and posts
Shoestrap is a WordPress theme that’s based on HTML5 Boilerplate and Bootstrap from Twitter.
Quickly link the latest Bootstrap CSS and Javascript to all pages, regardless of the WordPress Theme
A responsive WordPress theme with all the Twitter Bootstrap components and interactions.
Bootstrap in a WordPress theme a 320press project.
A solid base for custom theme development on WordPress with Bootstrap
Rapidly create sites with HTML5 Boilerplate & Bootstrap from Twitter
WordPress Theme, with a great image and gallery handling, based on Bootstrap from Twitter.
Alien Ship is meant to be a foundation on which to build, it is fully integrated with Bootstrap.
WP Strap is an open-source WordPress theme using the Bootstrap framework from Twitter.

Interface Builders

Visual Tools for designing the structure or other aspects of a Bootstrap layout

Display

Bootstrap buttons, but with the FamFam Iconset replacing glyphicons
Extensive gradient builder for setting Bootstrap values
Make pretty buttons easily for Twitter Bootstrap
A powerful Photoshop-like CSS gradient editor from ColorZilla.
Make slick looking buttons easily.
Client side image placeholders
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Very helpful for debugging.

Structure

Drag and drop form builder for twitter bootstrap.
The Bootstrap Interface Builder
Design & build in your browser. (It’s the fastest way to ship.)
The Interface Builder for Web Apps
Gallery of free HTML snippets for Twitter Bootstrap.

Theme

Theme marketplace for Twitter Bootstrap
A toolkit designed to kickstart development of facebook iframe apps in both relevant sizes
Web Design Tool and Theme Generator for Twitter Bootstrap
The beauty of Twitter’s Bootstrap to jQuery UI widgets.
The Twitter Bootstrap Themer
BootSwatchr is a visual tool for creating a custom Bootstrap theme from the ground up.
Set of open source themes for Bootstrap
Element style picker for Bootstrap customization
Generate Bootstrap themes using the color scheme

Mockup Tools

Stencils and Templates for Drawing and Mockup Applications

Includes all base elements layered in Photoshop for typography, buttons, grids, navigation, and more used in the original CSS3 Bootstrap v2 framework from Twitter
Free Axure Widgets Library for Twitter Bootstra
A set of grids in photoshop and illustrator based on the bootstrap scaffolding, these are the default responsive grids available on the bootstrap site.
Make it easy to mockup web sites or web applications in OmniGraffle for Bootstrap
Fireworks elements of Twitter Bootstrap
A symbols library for the mockup/drawing app Balsamiq
A simple .psd for quickly and easily mocking up Twitter Bootstrap designs.
Photoshop Plugin For Dealing With Grids
A set of layouts that NiceUX uses to speed up their prototyping process for Twitter Bootstrap
Prototype Bootstrap-based apps using your favorite presentation tool.

Tools and Services

Additional items to make Bootstrap Development Easier and Faster

Devtools

Bootstrap with no gradients, rounded corners or other design flare. A starting point of customization projects.
Modify the local versions of variables.less, bootstrap.less and responsive.less while keeping the original bootstrap repository isolated and easily updateable
Desktop application for generating Bootstrap templates
Generate custom icon webfonts from the comfort of the command line.
A bunch of nicely described and categorized Twitter Bootstrap code snippets for Sublime Text editor.
A Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass powered applications.
Twitter Bootstrap converted for Rails + Compass
Bootstrap, but with Dojo instead of jQuery

Services

An unofficial site showcasing the very best sites using Bootstrap
Twitter Bootstrap Documentation Archive
Bootstrap, FontAwesome and Bootswatch hosted on NetDNA’s Content Delivery Network
Generate HTML5 + Bootstrap templates

How Tos

Tutorials and Instructions on using Bootstrap

Articles

Learn how to make our own responsive WordPress theme using Bootstrap.
This will equip you to build web apps and sites using Twitter Bootstrap.
Section of the larger Rails Tutorial going into specifics of integrating bootstrap-sass.
HowTo create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result.
How to use responsive form elements to create a Bootstrap based contact page
A very real world project, a single page site or splash page that works on mobile, built with Bootstrap
Bootstrap leaves the file input to the browser default, this article goes through the steps to integrate it better.
a detailed, step by step tutorial that will take you through the process of writing a new Rails 3.1 app that uses Twitter Bootstrap with Formtastic and Tabulous
Twitter Bootstrap provides a tremendous amount of useful CSS support that would take a long time to reimplement
How to create your own form templates with Symfony2 and Bootstrap
Create a cool looking Ajax registration modal using the power of Bootstrap, CodeIgniter, and jQuery
Quick and Easy Interactive Wireframes with Bootstrap
A lazy load carousel delays loading of images in order to make the page load faster. It loads the images only if needed.
Tutorial on how to fit all the necessary code – HTML, JavaScript and CSS on one single page, hence the name.
How to Create a Custom Icon Set for Bootstrap
How to integrate the jQuery validate plugin with Bootstrap Styles
Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap.
An introduction using Twitter Bootstrap and its key important features to style your apps quickly and easily.
How to create and customize Modal windows using Twitter Bootstrap with several examples and explanations.
Fluid vs Fixed (and responsive) decision making
Please! if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same!
How to build a responsive, interactive, and visually engaging web page with simple and flexible HTML, CSS and JavaScript
HowTo Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch

Presentations

Presentation by Bootstrap Creator Mark Otto on how the principles of design are reflected in Bootstrap
We dive in to the principles of using Bootstrap effectively in your design and development process – and how not use it.
Not strictly Bootstrap, but awesome: You’ll learn basic typeface anatomy & terminology, typesetting techniques
Understand the background and underpinnings of Bootstrap from the source themselves.

Videos

How to display flash messages, add form validations with SimpleForm, customize layout with variables, and switch to using Sass.
learn how to include Bootstrap into Rails with the twitter-bootstrap-rails gem.
YUI contributor Jay Shirley (@jshirley) talks about his project to provide an alternative JavaScript implementation for Twitter Bootstrap based on YUI.
A 17 Video series on how to get started and customize Twitter Bootstrap

Javascript Addons

Useful Bootstrap Compatible Javascript Addons

Set of UI elements styled using the Bootstrap toolkit for use with Ember.js.
Optional package to add Bootstrap support within Meteor
Twitter Bootstrap Theme for ExtJS 4
NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
A Derby component library based on Twitter Bootstrap.
Twitter Bootstrap for Ender
Gmail like client side form draft saves.
Filters elements by data attribute
Fades text using snappy CSS3 transitions
Fades between images using CSS3
Trims text down to fit into its container
An easy-to-use jQuery plugin that types
Bootstrap directives for AngularJS
Pure browser qrcode generation with jQuery
A JQuery validation plugin for bootstrap forms.
A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.
A jQuery Select Box Plugin for Mobile, Tablet, and Desktop
A Javascript library for capturing input
Image Manipulation in Javascript – manipulate images using HTML5 canvas and Javascript
Speeds up scrolling through long lists and keeps infinite feeds smooth and stable for users
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on December 5, 2012 by in Informative, Web Design, Webtools and tagged , , .