Twitter Bootswatch Rails gem

• Integrates Twitter Bootstrap CSS toolkit for the Rails 3.1+ Asset Pipeline.
• Easy control over which javascript and less modules are loaded by default. Not every app needs a carousel.
• Simple default less files for custom application themes ("bootswatch/variables.less" and "bootswatch/bootswatch.less").
• Easily apply custom themes or bootswatches from a site like Bootswatch.
• Gem version semantics extend Twitter Bootstrap version semantics, making it simple to know what version of bootstrap the gem is using.

Twitter Bootstrap for Rails 3.1+ Asset Pipeline

Twitter Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Demo

The demo will show you how this gem can be used.

View Helpers

The gem twitter-bootswatch-rails-helpers provides rails view helpers for twitter bootstrap's breadcrumbs and alerts components.

Installing Gem

Include the Twitter Bootswatch Rails gem in Gemfile to install it from RubyGems.org:

group :assets do
  gem 'less-rails', '~> 2.2.3'
  gem 'coffee-rails', '~> 3.2.2'

  gem 'therubyracer', :require => 'v8'
  gem 'uglifier', '>= 1.3.0'

  # just put after rails asset defaults
  gem 'twitter-bootswatch-rails', '~> 2.1.1.1'
end

# View Helpers Gem can go outside the assets group
gem 'twitter-bootswatch-rails-helpers', '~> 2.1.1.1'

or you can install from latest build;

gem 'twitter-bootswatch-rails', :git => 'git://github.com/scottvrosenthal/twitter-bootswatch-rails.git'

Run bundle from command line

bundle

Installing to App (using Generators)

You can run the following generators to get started with Twitter Bootswatch quickly.

Install (requires directives to Asset pipeline.)

Usage:

rails g bootswatch:install

Layout (generates a basic Twitter Bootstrap compatible layout) - (haml-rails gem supported)

Usage:

rails g bootswatch:layout

Example:

rails g bootswatch:layout application

Themed (generates Twitter Bootstrap compatible scaffold views.) - (simple_form and haml-rails gems supported)

Usage (model and table must already exist):

rails g bootswatch:themed [RESOURCE_NAME]

Example:

rails g scaffold Post title:string description:text
rake db:migrate
rails g bootswatch:themed Posts

Using less-rails gem

Read up on the less-rails gem.

Using stylesheets with Less

You have to require "bootswatch/loader.css.less" in your application.css

/*
 *= require_self
 *= require bootswatch/loader
*/

"bootswatch/loader.css.less" allows you to easily comment out less modules you don't need in your application.

For instance, as per the Bootstrap project we don't include the responsive styles by default. Uncomment @import "twitter/bootstrap/responsive"; in "bootswatch/loader.css.less" to enable it.

"bootswatch/variables.less" customize Twitter Bootstrap "variables.less" defaults in this file.

"bootswatch/bootswatch.less" customize the style of Twitter Bootstrap base css and component style here.

Check out some of the swatches at Bootswatch

Using Javascripts

You have to require the coffeescript file "bootswatch/loader.coffee" in your application.js:

//= require jquery
//= require jquery_ujs
//= require bootswatch/loader

"bootswatch/loader.coffee" allows you to easily comment out modules you don't need in your application:

# bootswatch/loader.coffee

#= require twitter/bootstrap/bootstrap-transition
#= require twitter/bootstrap/bootstrap-alert
#= require twitter/bootstrap/bootstrap-button
#= require twitter/bootstrap/bootstrap-carousel
#= require twitter/bootstrap/bootstrap-collapse
#= require twitter/bootstrap/bootstrap-dropdown
#= require twitter/bootstrap/bootstrap-modal
#= require twitter/bootstrap/bootstrap-tooltip
#= require twitter/bootstrap/bootstrap-popover
#= require twitter/bootstrap/bootstrap-scrollspy
#= require twitter/bootstrap/bootstrap-tab
#= require twitter/bootstrap/bootstrap-typeahead
#= require twitter/bootstrap/bootstrap-affix


#= require bootswatch/bootswatch

"bootswatch/bootswatch.coffee" allows you to easily add swatch customization to javascript modules loaded:

Check out some of the swatches at Bootswatch

Responsive styling?

As per the Bootstrap project we don't include the responsive styles by default. Uncomment @import "twitter/bootstrap/responsive"; in "bootswatch/loader.less" to enable it.

Versioning

Bootstrap claims to use SemVer, although this is for values of public API that don't seem to include selectively requiring CSS components (see breaking change 2.0.4 -> 2.1.0). Since many people using bootstrap-swatch-rails do selectively require CSS components and I consider it part of the public API we can't really follow SemVer without becoming wildly out of sync with the Bootstrap version number, which is confusing for everyone involved. Further releases to bootstrap-swatch-rails will therefore have version numbers of the form 2.x.x.y, where 2.x.x is the release of Bootstrap we should be compatible with, and y is the patch version.

Changelog

• Updated gem and bumped version to 2.1.1.1