TWBS Bootstrap 3.3+ Rails gem
- Integrates Bootstrap 3.3+ 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
Includes Bootstrap for Rails Asset Pipeline
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.
Including Font Awesome for Rails Asset Pipeline
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
Installing to App (using Generators)
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
bootswatch.com themeImport a free
Just follow these three steps in the following order :)
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
less-rails gemUsing stylesheets with the
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
Local rails development assets not updating?
RAILS_ENV=development rake assets:clean
Less files are not found or loading errors for new rails application
(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 .
Adding custom assets to the asset pipeline when deploying
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)
Default generators to use less-rails gem
In config/application.rb add the following line:
# less-rails gem (default all generators) config.app_generators.stylesheet_engine :less
List of Bootstrap plugins
Upgrading Bootstrap from 2.1 to 3+
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.
- Upgrade to bootstrap 3.3.2