- Integrates Bootstrap 3.1+ into the Rails Asset Pipeline
- Not every app needs a carousel
- easily optimize to just what your template needs
- Simple default less files for custom application themes
- Apply different custom themes or bootswatches from a site like bootswatch.com
- Create several themed swatches for your project with theme_names
- e.g. an admin (backend) theme and a storefront (frontend) theme
- Quickly build custom Bootstrap templates using live refresh to see your changes
Bootstrap is a toolkit designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Font Awesome is a toolkit with iconic fonts designed for use with Twitter Bootstrap.
To add Font Awesome to your bootswatch:
Include the gem twitter-bootswatch-rails-fontawesome
The demo will show you how this gem can be used with the rails asset pipeline.
The gem twitter-bootswatch-rails-helpers provides rails view helpers for twitter bootstrap's breadcrumbs and alerts components.
or you can install from latest build;
gem 'twitter-bootswatch-rails', :github => 'scottvrosenthal/twitter-bootswatch-rails'
Run bundle from command line
You can run the following generators to get started with Bootstrap.
If you don't provide a [theme_name] the value defaults to bootswatch and adds directives to your application.css and application.js files.
rails g bootswatch:install [theme_name]
rails g bootswatch:install admin rails g bootswatch:install storefront
Layout (generates a basic Bootstrap compatible layout)
rails g bootswatch:layout [theme_name]
rails g bootswatch:layout admin rails g bootswatch:layout storefront
Themed (generates Bootstrap compatible scaffold views.)
Usage (model and table must already exist):
rails g bootswatch:themed [RESOURCE_NAME]
rails g scaffold Post title:string description:text rake db:migrate rails g bootswatch:themed Posts
Import a free bootswatch.com theme
rails g bootswatch:install cyborg rails g bootswatch:import cyborg rails g bootswatch:layout cyborg
In your rails controllers just tell it to use the cyborg layout.
class ApplicationController < ActionController::Base # ... layout 'cyborg' end
You can also create an admin namespaced theme and import the cyborg
rails g bootswatch:install admin rails g bootswatch:import admin/cyborg rails g bootswatch:layout admin
bootswatch.less is renamed to
bootswatch.css.less by the import generator
Need more examples? Check out the demo
Using stylesheets with the less-rails gem
You have to require
[theme_name]/loader.css.less in your application.css
/* *= require_self *= require [theme_name]/loader *= require [theme_name]/bootswatch */
[theme_name]/loader.css.less allows you to easily comment out less modules you don't need in your application.
[theme_name]/variables.less customize Bootstrap
variables.less defaults in this file.
[theme_name]/bootswatch.css.less customize the style of Bootstrap base css and component style here.
Check out some of the swatches at bootswatch.com
Read up on the less-rails gem.
When importing a custom
[theme_name]/bootswatch.css.less file manually you'll need to include the following import directive at the top of the file:
The above less directive allows the current less file to access and override inherited less variables.
@import "cyborg/base"; // Cyborg // bootswatch.css.less
[theme_name]/bootswatch.js in your application.js:
//= require jquery //= require jquery_ujs //= require [theme_name]/loader //= require [theme_name]/bootswatch
[theme_name]/loader.js allows you to easily comment out modules you don't need in your application:
// [theme_name]/loader.js //= require twitter/bootstrap/transition //= require twitter/bootstrap/alert //= require twitter/bootstrap/button //= require twitter/bootstrap/carousel //= require twitter/bootstrap/collapse //= require twitter/bootstrap/dropdown //= require twitter/bootstrap/modal //= require twitter/bootstrap/tooltip //= require twitter/bootstrap/popover //= require twitter/bootstrap/scrollspy //= require twitter/bootstrap/tab //= require twitter/bootstrap/affix
RAILS_ENV=development rake assets:clean
(Remove the default require_tree directive line from both the application.js & application.css files)
// remove the following line from application.js //= require_tree .
* remove the following line from application.css *= require_tree .
In config/application.rb add the [theme_name] files, e.g.,
admin.css to config.assets.precompile:
# Precompile additional assets config.assets.precompile += %w(admin.js admin.css cyborg.js cyborg.css)
In config/application.rb add the following line:
# less-rails gem (default all generators) config.app_generators.stylesheet_engine :less
Bootstrap claims to use SemVer, although this is for values of public API that don't seem to include selectively requiring all components (see breaking change 3.0.0 -> 3.1.0). Since many people using twitter-bootswatch-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 twitter-bootswatch-rails will therefore have version numbers of the form
3.x.x is the release of Bootstrap we should be compatible with, and
y is the patch version.
- Updated to bootstrap 3.1.1
- Updated to bootstrap 3.1.1