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

Stephen Cussen
for
RubyABQ
Dec 11th, 2013
the plan
•

‘from scratch’, without any previous experience,
build working rails app with bootstrap and
foundation front e...
what are the components?
•

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

•...
where did I start?
•

the instruction from Michael (on the wiki):

•

1: install homebrew

•

2: install rvm

•

3: instal...
so…
•

I installed Rails 4.0

•

new project named ‘artcards’

•

built my ‘artist’model - first name, last name,
descript...
branch
•

created a bootstrap branch from master in git

•

installed the bootstrap rails gem (show the Gemfile
on the bra...
adding images to the
database
•

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

•

added the paper...
easy to lose a few hours…
- added the paperclip gem (and installed imagemagick)
- rails generate paperclip artist small_im...
more images stuff
•

installed imagemagick on the base rails install with
paperclip and imagemagik

•

edited config/envir...
images to bootstrap
•

merged from master to the bootstrap branch so that
I could have all my good paperclip work and the
...
bootstrappy!
•

ran ‘rails g bootstrap:layout application fixed’ to
generate a bootstrap compatible layout (show
layouts)
...
zurb foundation
•

created a ‘foundation’ branch

•

followed the super easy getting started with zurb foundation
docs (no...
github.com/scussen

•

github.com/scussen/artcardbackend

•

‘master’ contains the base install with paperclip the art car...
resources
•

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

•

the amazing Ryan Bates - ...
Upcoming SlideShare
Loading in …5
×

Beginning Rails Twitter Bootstrap and Zurb Foundation

1,106
-1

Published on

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
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • start the presentation!
  • Beginning Rails Twitter Bootstrap and Zurb Foundation

    1. 1. From Zero to Twitter Bootstrap & Zurb Foundation on a Rails Backend Stephen Cussen for RubyABQ Dec 11th, 2013
    2. 2. the plan • ‘from scratch’, without any previous experience, build working rails app with bootstrap and foundation front ends
    3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×