Twitter bootstrap on rails
15 likes8,997 views
This document discusses using Twitter Bootstrap, an open source toolkit for building responsive web applications, within a Ruby on Rails application. It describes how to install the twitter-bootstrap-rails gem to include Bootstrap's CSS and JavaScript. It also demonstrates how to generate Bootstrap layouts and forms using generators. The document encourages forking the twitter-bootstrap-rails project on GitHub to add support for features like Haml and Mongoid.
![Layout generator
% rails g bootstrap:layout --help
Usage:
rails generate bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
[options]
Runtime options:
-p, [--pretend] # Run but do not make any changes
-s, [--skip] # Skip files that already exist
-q, [--quiet] # Supress status output
-f, [--force] # Overwrite files that already exist
This generator creates layout file with navigation.](https://image.slidesharecdn.com/twitterbootstraponrails-111207070438-phpapp01/85/Twitter-bootstrap-on-rails-19-320.jpg)
![form generator
% rails g bootstrap:form --help
Usage:
rails generate bootstrap:form MODEL_NAME [DIR_NAME] [options]
Runtime options:
-p, [--pretend] # Run but do not make any changes
-s, [--skip] # Skip files that already exist
-q, [--quiet] # Supress status output
-f, [--force] # Overwrite files that already exist
This generator creates form partial file for a model.](https://image.slidesharecdn.com/twitterbootstraponrails-111207070438-phpapp01/85/Twitter-bootstrap-on-rails-20-320.jpg)
Twitter bootstrap on rails
- 1. Twitter Bootstrap on Rails 2011.12.07 Hamamatsu.rb #10 @mackato
- 2. @mackato I’m a programmer, not a web designer.
- 5. Bootstrap, from 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. http://twitter.github.com/bootstrap/
- 6. Layouts Fixed Fluid
- 7. Typography
- 8. Tables
- 9. Forms
- 10. Navigation
- 11. Alerts
- 12. Popovers
- 13. Twitter Bootstrap for Rails https://github.com/seyhunak/twitter-bootstrap-rails Gemfile gem 'twitter-bootstrap-rails' % bundle install % rails generate bootstrap:install
- 14. Twitter Bootstrap for Rails app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require twitter/bootstrap //= require_tree . app/assets/stylesheets/application.css *= require_self *= require twitter/bootstrap *= require_tree .
- 15. Markup by Hand <div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><%= link_to "MyApp", "/" %></h3> <ul class="nav"> <li><%= link_to "Link1", "/path1" %></li> <li><%= link_to "Link2", "/path2" %></li> <li><%= link_to "Link3", "/path3" %></li> </ul> </div> </div> </div>
- 16. Markup by Hand <div class="topbar"> <div class="topbar-inner"> <div class="container"> <h3><%= link_to "MyApp", "/" %></h3> <ul class="nav"> <li><%= link_to "Link1", "/path1" %></li> <li><%= link_to "Link2", "/path2" %></li> <li><%= link_to "Link3", "/path3" %></li> </ul> </div> </div> </div> bored!!!
- 18. Install Gemfile gem 'twitter-bootstrap-rails', :git => 'git://github.com/mackato/twitter-bootstrap-rails.git % bundle install
- 19. Layout generator % rails g bootstrap:layout --help Usage: rails generate bootstrap:layout [LAYOUT_NAME] [*fixed or fluid] [options] Runtime options: -p, [--pretend] # Run but do not make any changes -s, [--skip] # Skip files that already exist -q, [--quiet] # Supress status output -f, [--force] # Overwrite files that already exist This generator creates layout file with navigation.
- 20. form generator % rails g bootstrap:form --help Usage: rails generate bootstrap:form MODEL_NAME [DIR_NAME] [options] Runtime options: -p, [--pretend] # Run but do not make any changes -s, [--skip] # Skip files that already exist -q, [--quiet] # Supress status output -f, [--force] # Overwrite files that already exist This generator creates form partial file for a model.
- 21. Demo
- 22. Thanks! ToDo: haml and mongoid support.