From Zero toTwitter Bootstrap & Zurb

Foundation on a Rails Backend

Stephen Cussenfor

RubyABQDec 11th, 2013

the plan

• ‘from scratch’, without any previous experience, build working rails app with bootstrap and foundation front ends

what are the components?

• Rails - well you all know what this is but the power of rails was a real eye-opener for me!

• Twitter Bootstrap …

• Zurb Foundation …

where did I start?• the instruction from Michael (on the wiki):

• 1: install homebrew

• 2: install rvm

• 3: install rails

• 4: go for it!

so…• I installed Rails 4.0

• new project named ‘artcards’

• built my ‘artist’model - first name, last name, description and small image name, large image name

• migrated the database

• ran the server - it worked! :-) (nothing much to show yet)

branch• created a bootstrap branch from master in git

• installed the bootstrap rails gem (show the Gemfile on the branch - talk about less and libv8)

• ran ‘rails g bootstrap:install’

adding images to the database

• moving back to the master - needed an image strategy. Chose paperclip

• added the paperclip gem

• ran ‘rails g paperclip artist <image_field_name>’ for a couple of image fields

• migrated the db

• edited artist.rb (insert ‘has_attached_file’)

• edited the _form.html.erb and the show.html.erb

• And… I could select an image when I was using the form but no images in the show artist :-(

easy to lose a few hours…

- added the paperclip gem (and installed imagemagick)- rails generate paperclip artist small_image- rails generate paperclip artist large_image- rake db:migrate- edit artis.rb- edit _form.html.erb- edit show.html.erb- when adding the image - looks good - however, no image path is stored- Took a few hours and lots of reading to find out I needed to edit ‘artists_controllers.rb’ and add this

params.require(:artist).permit(:firstname, :lastname, :artiststatement, :smallimagename, :largeimagename, :small_image, :large_image) (I have a pull request in for the thouhtbot rdoc that I was working from - paperclip README is good and covers this)

more images stuff• installed imagemagick on the base rails install

with paperclip and imagemagik

• edited config/environments/development.rb to point to imagemagik

• edited index.html.erb to include thumb and change heading

• voila! (show the artists demo from master)

images to bootstrap• merged from master to the bootstrap branch

so that I could have all my good paperclip work and the bootstrap work together (my first non-gui merge prompted a call for help!)

• on the bootstrap branch - set to work on making the bootstrap layout ‘bootstrappy’

bootstrappy!• ran ‘rails g bootstrap:layout application fixed’

to generate a bootstrap compatible layout (show layouts)

• voila (show the artists demo from the bootstrap branch)

zurb foundation• created a ‘foundation’ branch

• followed the super easy getting started with zurb foundation docs (note: the rails install is under ‘Applications’)

• using the the ‘foundation-rails’gem did the bundle and install

• made a couple of mods to add a grid layout and a navbar

• and we have this (show the artists demo from the foundation branch)

github.com/scussen

• github.com/scussen/artcardbackend

• ‘master’ contains the base install with paperclip the art cards project and artists application

• the ‘boostrap’ branch contains the bootstrap gem and install, together with the bootstrap-ized artists application

• the ‘foundation’ branch contains the foundation gem and install, together with the foundation-ized artists application

resources• getting started with rails - http://guides.rubyonrails.org/getting_started.html

• the amazing Ryan Bates - Rails Cast #328

• getting started with bootstrap - http://getbootstrap.com/getting-started/

• The bootstrap rails gem doc - https://github.com/seyhunak/twitter-bootstrap-rails

• rubyracer gem (V8 Javascript interpreter for ruby ) doc - https://github.com/cowboyd/therubyracer

• Paperclip - early (2008) Ryan Bates - Rails Cast #134

• paperclip doc - https://github.com/thoughtbot/paperclip

• getting started with foundation - http://foundation.zurb.com/docs/

• again, Ryan Bates - Rails Cast #417 - http://railscasts.com/episodes/417-foundation

• and, what would I do without stackoverflow!