From Zero to Twitter Bootstrap & Zurb Foundation on a Rails Backend

1. From Zero to
Twitter Bootstrap & Zurb
Foundation on a Rails Backend
Stephen Cussen
for
RubyABQ
Dec 11th, 2013

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

3. 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 …

4. where did I start?
•
the instruction from Michael (on the wiki):
•
1: install homebrew
•
2: install rvm
•
3: install rails
•
4: go for it!

5. 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)

6. 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’

7. 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 :-(

8. 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)

9. 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)

10. 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’

11. 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)

12. 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)

13. 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

14. 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!