masonry-rails 0.1.0

data/spec/_posts/docs/2011-05-04-animating.mdown

@@ -0,0 +1,96 @@
+---
+
+title: Animating
+category: docs
+layout: default
+toc:
+  - { title: jQuery, anchor: jquery }
+  - { title: CSS transitions, anchor: css_transitions }
+  - { title: Modernizr, anchor: modernizr }
+
+---
+
+Rearrangements can be animated when the container is resized.
+
+## jQuery
+
+To animate Masonry layout changes with jQuery, set the `isAnimated` option to `true`.
+
+{% highlight javascript %}
+
+$('#container').masonry({
+  // options...
+  isAnimated: true
+});
+
+{% endhighlight %}
+
+[See Demo: Animating with jQuery](../demos/animating-jquery.html).
+
+You can pass in jQuery animation options are set with the [`animationOptions` option](options.html#animationoptions).
+
+{% highlight javascript %}
+
+$('#container').masonry({
+  // options...
+  isAnimated: true,
+  animationOptions: {
+    duration: 750,
+    easing: 'linear',
+    queue: false
+  }
+});
+
+{% endhighlight %}
+
+## CSS transitions
+
+Alternatively, you can rely on CSS3 transitions to animate layout rearrangements. Enabling transitions is recommended, as they provide for better browser performance over jQuery animation.
+
+In your CSS, add transition styles below. The Masonry plugin will add a class of `masonry` to the container after the first arrangement so transitions can be applied afterward. Item elements will have a class of `masonry-brick` added.
+
+[See Demo: Animating with CSS transitions](../demos/animating-css-transitions.html).
+
+{% highlight css %}
+/**** Transitions ****/
+
+.masonry,
+.masonry .masonry-brick {
+  -webkit-transition-duration: 0.7s;
+     -moz-transition-duration: 0.7s;
+      -ms-transition-duration: 0.7s;
+       -o-transition-duration: 0.7s;
+          transition-duration: 0.7s;
+}
+
+.masonry {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+      -ms-transition-property: height, width;
+       -o-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.masonry .masonry-brick {
+  -webkit-transition-property: left, right, top;
+     -moz-transition-property: left, right, top;
+      -ms-transition-property: left, right, top;
+       -o-transition-property: left, right, top;
+          transition-property: left, right, top;
+}
+{% endhighlight %}
+
+## Modernizr
+
+To get the best of both worlds, you can use [Modernizr](http://www.modernizr.com/) to detect browser support for CSS transitions. Add the transitions styles above, then enable `animated` based on Modernizr's detected support for transitions. This will allow browsers that support CSS transitions to use them, and browsers without support to use jQuery animation.
+
+[See Demo: Animating with Modernizr](../demos/animating-modernizr.html).
+
+{% highlight javascript %}
+
+$('#container').masonry({
+  // options...
+  isAnimated: !Modernizr.csstransitions
+});
+
+{% endhighlight %}

data/spec/_posts/docs/2011-05-30-help.mdown

@@ -0,0 +1,139 @@
+---
+
+title: Help
+category: docs
+layout: default
+toc:
+  - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues }
+  - { title: Additional resources, anchor: additional_resources }
+  - { title: Unloaded media and overlapping, anchor: unloaded_media_and_overlapping }
+  - { title: @font-face fonts, anchor: fontface_fonts }
+  - { title: First item breaks grid, anchor: first_item_breaks_grid }
+  - { title: Filtering, anchor: filtering }
+  - { title: Getting data, anchor: getting_data }
+  - { title: Other frameworks, anchor: other_frameworks }
+
+---
+
+jQuery Masonry is a fairly popular plugin. Chances are your issue has already been encountered by someone else.
+
+## Reporting bugs and issues
+
+Please read my [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) and then [report bugs and issues on GitHub](http://github.com/desandro/masonry/issues). 
+
+## Additional resources
+
++ The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases
++ [My answers on Stack Overflow](http://stackoverflow.com/users/182183/desandro?tab=answers)
++ [Various Masonry tests on jsFiddle](http://www.delicious.com/desandro/re:masonry+fiddle)
++ [Sites using Masonry on Delicious](http://www.delicious.com/desandro/jquerymasonry)
++ [Sites using Masonry on Zootool](http://zootool.com/user/desandro/tag:masonry) (has screenshots)
++ [Stack Overflow questions about Masonry](http://stackoverflow.com/search?q=masonry)
++ [Related Masonry links](http://www.delicious.com/desandro/re:masonry)
++ Other resources that are [like Masonry but not](http://www.delicious.com/desandro/likemasonrybutnot)
+
+## Unloaded media and overlapping
+
+The number one issue that pops up is overlapping content. This is most likely due to unloaded images.
+
+### imagesLoaded plugin
+
+The easiest solution is to use the <a href="intro.html#imagesloaded_plugin">imagesLoaded plugin</a> as shown in the intro. This small plugin will trigger a callback after all the images in the specified content have been loaded.
+
+[See Demo: Images](../demos/images.html).
+
+### Inline dimensions
+
+Or you can specify the width and height of images inline.
+
+{% highlight html %}
+
+<img src="img-file.jpg" width="280" height="160" />
+
+{% endhighlight %}
+
+If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.
+
+### $(window).load()
+
+Another solution is to initialize Masonry inside `$(window).load()` instead of `$(document).ready()`. This will trigger Masonry after all the media on the page has loaded -- images, fonts, external scripts and stylesheets, etc. This method is not recommended as it can cause ugly wait times.
+
+{% highlight javascript %}
+
+$(window).load(function(){
+  $('#container').masonry({
+    // options...
+  });
+});
+
+{% endhighlight %}
+
+## @font-face fonts
+
+Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. 
+
++ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
++ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)
+
+### Typekit
+
+Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit's default script,  `try{Typekit.load();}catch(e){}`.
+
+{% highlight javascript %}
+
+var $container;
+
+function triggerMasonry() {
+  // don't proceed if $container has not selected
+  if ( !$container ) {
+    return
+  }
+  $container.masonry({
+    // options...
+  });
+}
+
+$(function(){
+  $container = $('#container');
+  // trigger masonry on doc ready
+  triggerMasonry();
+});
+
+// trigger masonry when fonts have loaded
+Typekit.load({
+  active: triggerMasonry,
+  inactive: triggerMasonry
+});
+
+{% endhighlight %}
+
+## First item breaks grid
+
+If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set [`columnWidth` option](options.html#columnwidth). Without `columnWidth` set, Masonry will use the width of the first item for the size of its columns.
+
+{% highlight javascript %}
+
+$('#container').masonry({
+  columnWidth: 220
+});
+
+{% endhighlight %}
+
+## Filtering
+
+Filtering with Masonry is officially unsupported as of v2.0. Use [Isotope](http://isotope.metafizzy.co) instead. Isotope shares a majority Masonry's features. It also has additional powerful features like filtering and sorting built right in, so you probably won't be missing any functionality.
+
+## Getting data
+
+You can access all the options and properties in a Masonry instance using the `.data()` method with the namespace `'masonry'`.
+
+{% highlight javascript %}
+
+$('#container').data('masonry');
+
+{% endhighlight %}
+
+## Other frameworks
+
++ [mooMasonry for MooTools](http://mootools.net/forge/p/moomasonry)
++ [Prototype Masonry for Prototype JS](http://www.sthoughts.com/prototype-masonry/)

data/spec/_posts/pages/2011-05-02-2.html

@@ -0,0 +1,189 @@
+---
+title: Page 2
+category: pages
+layout: default
+has_modernizr: true
+---
+
+<div id="copy">
+  <p>This is a page used for the <a href="../demos/infinite-scroll.html">Infinite Scroll example</a>.</p>
+</div>
+
+<div id="container" class="transitions-enabled clearfix">
+
+  <div class="box col3">
+    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
+    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+    <ul>
+      <li>Lacus a ultrices sagittis</li>
+      <li>Democratis</li>
+      <li>Plummus</li>
+    </ul>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+  </div>
+
+  <div class="box col1">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <a href="http://www.flickr.com/photos/nemoorange/5013646314/" title="Take My Portrait by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" alt="Take My Portrait"></a>
+  </div>
+
+  <div class="box col1">
+    <h2>Morbi purus libero</h2>
+  </div>
+
+
+  <div class="box col2">
+    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
+    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+  </div>
+
+  <div class="box col3">
+    <p><a href="http://www.flickr.com/photos/nemoorange/3318887485/" title="Silver Diner by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3645/3318887485_a9b5b5533f.jpg" alt="Silver Diner" /></a>
+    </p>
+
+
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+  </div>
+
+  <div class="box col1">
+    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+  </div>
+
+  <div class="box col2">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
+    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+    <ul>
+      <li>Lacus a ultrices sagittis</li>
+      <li>Democratis</li>
+      <li>Plummus</li>
+    </ul>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+  </div>
+
+  <div class="box col1">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+  
+  <div class="box col2">
+    <a href="http://www.flickr.com/photos/nemoorange/5013646070/" title="Kendra by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra"></a>
+  </div>
+
+  <div class="box col1">
+    <h2>Morbi purus libero</h2>
+  </div>
+
+
+  <div class="box col2">
+    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
+    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+  </div>
+
+
+  <div class="box col1">
+    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+  </div>
+
+  <div class="box col2">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
+    <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+    <ul>
+      <li>Lacus a ultrices sagittis</li>
+      <li>Democratis</li>
+      <li>Plummus</li>
+    </ul>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+  </div>
+
+  <div class="box col1">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col1">
+    <h2>Morbi purus libero</h2>
+  </div>
+
+
+  <div class="box col2">
+    <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
+    <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+  </div>
+
+  <div class="box col1">
+    <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+  </div>
+
+  <div class="box col3">
+    <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+  </div>
+
+
+  <div class="box col1">
+    <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+  </div>
+
+  <div class="box col2">
+    <p>Sit amet mi ullamcorper vehicula</p>
+  </div>
+
+
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+  $(function(){
+    
+    var $container = $('#container');
+    
+    $container.imagesLoaded(function(){
+      $container.masonry({
+        itemSelector: '.box',
+        columnWidth: 100,
+        isAnimated: !Modernizr.csstransitions
+      });
+    })
+    
+  });
+</script>

data/spec/_posts/pages/2011-05-03-3.html

@@ -0,0 +1,174 @@
+---
+title: Page 3
+category: pages
+layout: default
+has_modernizr: true
+---
+
+<div id="copy">
+  <p>This is a page used for the <a href="../demos/infinite-scroll.html">Infinite Scroll example</a>.</p>
+</div>
+
+<div id="container" class="transitions-enabled clearfix">
+  
+  <div>
+    <div class="box col2">
+      <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+      <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+    </div>
+
+    <div class="box col2">
+      <p>Sit amet mi ullamcorper vehicula</p>
+    </div>
+
+    <div class="box col1">
+      <p>Morbi purus libero</p>
+    </div>
+
+    <div class="box col1">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+
+    <div class="box col3">
+      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
+      <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+      <ul>
+        <li>Lacus a ultrices sagittis</li>
+        <li>Democratis</li>
+        <li>Plummus</li>
+      </ul>
+    </div>
+
+    <div class="box col1">
+      <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+    </div>
+
+    <div class="box col1">
+      <p>Sit amet mi ullamcorper vehicula</p>
+    </div>
+
+    <div class="box col1">
+      <h2>Morbi purus libero</h2>
+    </div>
+
+
+    <div class="box col2">
+      <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
+      <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+    </div>
+
+    <div class="box col1">
+      <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+    </div>
+
+    <div class="box col3">
+      <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+      <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+      <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    </div>
+
+
+    <div class="box col1">
+      <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+    </div>
+
+    <div class="box col2">
+      <p>Sit amet mi ullamcorper vehicula</p>
+    </div>
+
+    <div class="box col1">
+      <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+    </div>
+    
+    <div class="box col2">
+      <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley"></a>
+    </div>
+
+    <div class="box col1">
+      <h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </h2>
+    </div>
+
+    <div class="box col2">
+      <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
+      <p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
+    </div>
+
+    <div class="box col4">
+      <p>
+        <a href="http://www.flickr.com/photos/nemoorange/3319714118/" title="Mercedes Benz Jukebox by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3295/3319714118_1f5dd65a29.jpg" alt="Mercedes Benz Jukebox" /></a>
+      </p>
+    </div>
+
+    <div class="box col1">
+
+      <ul>
+        <li>Lacus a ultrices sagittis</li>
+        <li>Democratis</li>
+        <li>Plummus</li>
+      </ul>
+    </div>
+
+    <div class="box col3">
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
+      <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula  </p>
+      <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.</p>
+    </div>
+
+    <div class="box col2">
+      <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+      <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.  Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    </div>
+
+    <div class="box col4">
+      <p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue.  Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    </div>  
+
+    <div class="box col1">
+      <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+    </div>
+
+    <div class="box col1">
+      <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+    </div>
+
+    <div class="box col3">
+      <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+      <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
+    </div>
+
+
+  </div>
+  
+  <div class="box col2">
+    <a href="http://www.flickr.com/photos/nemoorange/5013039697/" title="Anita by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg" alt="Anita"></a>
+  </div>
+
+  <div class="box col1">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+  </div>
+
+  <div class="box col1">
+    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
+  </div>
+
+
+
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+  $(function(){
+    
+    var $container = $('#container');
+    
+    $container.imagesLoaded(function(){
+      $container.masonry({
+        itemSelector: '.box',
+        columnWidth: 100,
+        isAnimated: !Modernizr.csstransitions
+      });
+    })
+    
+  });
+</script>