Your SlideShare is downloading. ×
0
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Beginning Rails Twitter Bootstrap and Zurb Foundation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beginning Rails Twitter Bootstrap and Zurb Foundation

971

Published on

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

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
971
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • start the presentation!
  • Transcript

    • 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!

    ×