Learning Meteor Application Development Tutorial: Structuring Your UI with Masonry | packtpub.com

927 views · Published 6 May 2015 · 4:16 · Indexed 28 October 2026

Channel: Packt · 2015 · Science & Technology

Watch on YouTube

Part of 'Learning Meteor Application Development' video series. For the full Course visit:
https://www.packtpub.com/application-development/learning-meteor-application-development-video?utm_source=youtube&utm_medium=video-description&utm_campaign=yt-learningMeteorappdev

Using the popular voodoohop:masonrify package, we will create an automated, responsive layout for our snippets, making our UI much more user friendly and clean. 
• Adding structure with CSS – our snippets need some dimensions and boundaries. Using a bit of simple CSS, we will give them dimensions that are useful for display via Masonry.js 
• Adding masonryContainer – we’re now ready to add the Masonry logic and structure. By inserting a {{#masonryContainer}} template helper into our snippets template, we’re ready for Masonry.js to work its magic 
• Adding masonryElement (oe elements) – now that we have our containing Masonry.js logic, we will wrap each snippet’s HTML code in a {{#masonryElement}} helper block, and let Masonry do the heavy lifting on displaying the results responsively 
_________________________________________________________

For the latest in Application Development video tutorials, please visit:
http://www.packtpub.com/books/video?utm_source=youtube&utm_medium=video-description&utm_campaign=yt-learningMeteorappdev

Find us on Facebook -- http://www.facebook.com/Packtvideo
Follow us on Twitter - http://www.twitter.com/packtvideo

More from this channel