Propeople Blog

A regular dose of fresh news, events, products, Drupal development resources and more.

April 20, 2012

Twitter Bootstrap: The Ultimate Resources Roundup

Twitter Bootstrap is a front-end toolkit released by Twitter for rapid developing of web applications. It contains HTML and CSS-based design templates for typography and, according to Wikipedia, it is the most popular project in GitHub and is used by NASA and MSNBC.

We came up with a list of tutorials, tools and other brilliant resources that you may find useful in order to find out more about Twitter Bootstrap and how to use it for your own applications and websites. Enjoy!

Articles & Tutorials

Building Twitter Bootstrap

“The decision to create Bootstrap as a style guide came naturally out of our design and development process. Bootstrap helps us document components with live examples as we build them, while serving as a living document powered by itself, the very components and templates it prescribes. It gave us a single point of reference to share guidance from designers and created a set of documentation for each living component...” check it out

 

Twitter Bootstrap 101: Introduction

“Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website...” check it out

 

Bootstrap from Twitter

“At its core, Bootstrap is just CSS, but it's built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions. Additionally, since Bootstrap is purely CSS when compiled via Less, we gain two important benefits...” check it out

 

Sample App with Backbone.js and Twitter Bootstrap

“To give this combination a try, I put together a new sample application that uses Backbone.js to organize the code, and Twitter Bootstrap to organize the UI. The application is an Employee Directory that allows you to look for employees by name, view the details of an employee, and navigate up and down the Org Chart by clicking the employee’s manager or any of his/her direct reports...” check it out

 

Twitter Bootstrap tutorial

“In this and consequent pages, w3resource covers Twitter Bootstrap tool in detail, which will equip you to build web apps and sites using the tool. Twitter Bootstrap is created with modern browsers in mind. So, you will find it working perfectly with all the modern versions of Chrome, Firefox, Safari, Opera and Internet Explorer. In "Twitter Bootstrap Tutorial" you will learn the following...” check it out

 

Adding Twitter's Bootstrap CSS to your Rails app

“Twitter’s new CSS toolkit, Bootstrap, is all the rage these days. I explain how to get the CSS, and optionally the mixins and the JavaScript, into your Rails app...” check it out

 

Why We Love Twitter’s Bootstrap

“One of the reasons we landed with Bootstrap is that it was most simply a great place to start. With things like a intuitive grid system, responsive layout design, and CSS3/HTML5 readiness we knew that it would be the best foundation for us as a development team and for the end-user at large...” check it out

 

Bootstrap From Twitter Is A New Web Designer’s Dream

“Especially as a newbie without the necessary skills to write it first hand, it’s very tempting to use different snippets of code for different tasks, but Bootstrap merges these all together into one, easy-to-use library. As a bonus, it’s written by developers of one of the world’s most popular websites, offering some security into making sure your site works with these elements...” check it out

 

Using Twitter Bootstrap with Jekyll

“While you’re getting your feet wet, use the Twitter Bootstrap Customize and download page to build and customize a Bootstrap package. From there, you can generate a zip file containing the Bootstrap images, compiled CSS files, and bundled Javascript (including minified and unminified versions). To make it easy to update, unpack the resulting zip file in a bootstrap directory, underneath your Jekyll source directory. Then, drop it into your HTML layout(s). For instance...” check it out

 

Develop quickly with Twitter Bootstrap

“Bootstrap provides various elements for developers to use, ranging from scaffolding to jQuery components. The scaffolding gives developers an easy way to build complex layouts based on a 12-grid system. This is all based on a system of various div tags with classes that associate the width of said div. For example, if you want a 3-column layout in a 12-column grid system, you could use three div tags with the class span4...” check it out

 

Bootstrap Tools

 

jQuery UI Bootstrap

 

“With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.”

check it out

 

Twitter Bootstrap jQuery Mobile Theme

“This theme overrides the existing jQuery Mobile A - E swatches (and adds an F swatch as well) with colors and styles found in Twitter Bootstrap. It's meant to be used with A as the primary swatch for the page, and B - F as accents as needed.” check it out

 

Colorpicker and Datepicker for Twitter Bootstrap

“Add color picker to field or to any other element. Can be used as a component, alpha picker and multiple formats: hex, rgb, rgba, hsl, hsla. Also includes a datepicker picker to field or to any other element. Can be used as a component, formats: dd, d, mm, m, yyyy, yy; separators: -, /, . ” check it out

 

Bootswatch

“Bootswatch includes a comprehensive list of free themes for Twitter Bootstrap and they can be used by simply downloading and replacing the CSS file.” check it out

 

Django Toolkit for integration with Twitter's Bootstrap

“The title says it all. A great toolkit meant to integrate django with twitter Bootstrap.” check it out

 

Twitter bootstrap UI (drupal module)

“This is an enhancement module for the Twitter Bootstrap theme. Currently it provides the following functionality: Libraries API support for the Twitter Bootstrap library.” check it out

 

Twitter Bootstrap Generator Tool

“Bootstrap Generator is twitter bootstrap generator tool created by martinbean for use in kick-starting your app/projects that use Twitter Bootstrap CSS framework. Simply configure the options, click “Generate” and receive your own, compiled Bootstrap CSS file ready to work with!” check it out

 

Fbootstrapp

“Fbootstrapp is a facebook gui toolkit, designed to kickstart development of facebook iframe apps in both relevant sizes. It’s created by Clemens Krack, based on Twitter’s Bootstrap.” check it out

 

Videos

 

How to use Twitter Bootstrap

 

Twitter Bootstrap 101: Introducing 2.0

 

Setting up Twitter Bootstrap Tutorial

 

Twitter Bootstrap 101: Tabs and Pills

 

Twitter Bootstrap 101: Navbar Markup

0 Responses to this post

Communicate!