Locked lesson.
About this lesson
Setting up JQuery Masonry.
Exercise files
Download this lesson’s related exercise files.
Installing Masonry Part 1.docx59 KB Installing Masonry Part 1 - Solution.docx
59.5 KB
Quick reference
Installing Masonry Part 1
In this video we'll begin installing JQuery Masonry.
When to use
With Masonry, we can add cool effects that allow our pin images to move around the screen when the browser is re-sized.
Instructions
First: Grab the Masonry Gem and the JQuery Turbolinks Gem reference from RubyGems.org, add them to your Gemfile and run Bundle Install.
Next: Right below the "require JQuery" link in your app/assets/javascript/application.js file, add this line:
//= require jquery.turbolinks
Next: Above the "require_tree ." line in your app/assets/stylesheets/application.css file, add this line:
*= require 'masonry/transitions'
Next: Above the "require_tree ." line in your app/assets/javascript/application.js file, add this line:
//= require masonry/jquery.masonry
Next: Wrap your app/views/pins/index.html.erb file code in these two divs:
<div id="pins">
<div class="box">
</div>
</div>
Hints & tips
- Check out the Masonry Website at: http://masonry.desandro.com/
- To install Masonry, we'll use the Masonry Gem and the JQuery Turbolinks Gem
- We'll also add a little Custom CSS
Lesson notes are only available for subscribers.