Twitter bootstrap on rails
-
Upload
masakuni-kato -
Category
Technology
-
view
11.612 -
download
3
description
Transcript of Twitter bootstrap on rails
Twitter Bootstrap on Rails2011.12.07 Hamamatsu.rb #10 @mackato
I’m a programmer,not a web designer.
@mackato
Programmer’s web design
Programmer’s web design
Bootstrap, from TwitterBootstrap 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/
Layouts
Fixed Fluid
Typography
Tables
Forms
Navigation
Alerts
Popovers
Twitter Bootstrap for Railshttps://github.com/seyhunak/twitter-bootstrap-rails
Gemfilegem 'twitter-bootstrap-rails'
% bundle install % rails generate bootstrap:install
Twitter Bootstrap for Railsapp/assets/javascripts/application.js
app/assets/stylesheets/application.css *= require_self *= require twitter/bootstrap *= require_tree .
//= require jquery//= require jquery_ujs//= require twitter/bootstrap//= require_tree .
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>
Markup by Hand
bored!!!
<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>
Fork it
https://github.com/mackato/twitter-bootstrap-rails
InstallGemfile
% bundle install
gem 'twitter-bootstrap-rails', :git => 'git://github.com/mackato/twitter-bootstrap-rails.git
Layout generator% rails g bootstrap:layout --helpUsage: 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.
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.
Demo
Thanks!ToDo: haml and mongoid support.