Beginning Rails Twitter Bootstrap and Zurb Foundation
- 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!
Editor's Notes
- #2: start the presentation!