Hack hack hack...

An open journal-- some of it written for you, but most of it is for me.

Twitter Bootstrap

Rails Cast for twitter bootstrap:

Note During install your can specify whether you want a fixed or fluid layout

LESS is a CSS precessor : to get LESS working with rails you need the help of some gems

I can download the source here. This is the preferred code not, this one.

Change Gemfile

1
2
3
gem 'therubyracer', :platform => :ruby
gem 'twitter-bootstrap-rails'
gem 'chosen-rails'

Install Twitter Bootstrap

1
2
3
bundle
rails g bootstrap:install
rails g bootstrap:layout application fixed

A file that was generated is: app/assets/stylesheets/bootstrap_and_override.css.less This is where I would do the bulk of the customization - including if padding is needed between the body and the nav bar…

For some padding at the top
1
2
3
@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }
@import "twitter/bootstrap/responsive";

Layout fixed makes it 940px and fluid makes it full screen. Both are responsive though.

When I generate new resources

For some padding at the top
1
2
3
rails g scaffold Post title:string description:text
rake db:migrate
rails g bootstrap:themed Posts

Without the 3rd line it looks terrible so remember to run it!

Further reading is here.

When I’m ready for it, Bates does a follow up rails cast on more advanced twitter bootstrap.

NOTE: We went over twitter bootstrap in lecture 6 of ROR spring

Comments