Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

ready to rock

  • Loading branch information...
commit 39a83295362aa687eeee5132768e44be95e1c08c 1 parent aeb143e
@kristianmandrup authored
Showing with 8,254 additions and 27 deletions.
  1. +1 −1  .gitignore
  2. +51 −0 Masonry.mdown
  3. +53 −0 README.md
  4. +0 −19 README.rdoc
  5. +6 −0 _config.yml
  6. +7 −0 lib/masonry-rails.rb
  7. +16 −0 minify.sh
  8. +75 −0 spec/_layouts/default.html
  9. +206 −0 spec/_posts/demos/2011-05-01-basic-single-column.html
  10. +213 −0 spec/_posts/demos/2011-05-02-basic-multi-column.html
  11. +57 −0 spec/_posts/demos/2011-05-03-images.html
  12. +226 −0 spec/_posts/demos/2011-05-04-tumblelog.html
  13. +144 −0 spec/_posts/demos/2011-05-05-animating-jquery.html
  14. +132 −0 spec/_posts/demos/2011-05-06-animating-css-transitions.html
  15. +136 −0 spec/_posts/demos/2011-05-07-animating-modernizr.html
  16. +89 −0 spec/_posts/demos/2011-05-08-adding-items.html
  17. +268 −0 spec/_posts/demos/2011-05-09-infinite-scroll.html
  18. +209 −0 spec/_posts/demos/2011-05-10-gutters.html
  19. +135 −0 spec/_posts/demos/2011-05-11-right-to-left.html
  20. +137 −0 spec/_posts/demos/2011-05-17-centered.html
  21. +219 −0 spec/_posts/demos/2011-07-26-fluid.html
  22. +249 −0 spec/_posts/demos/2011-10-07-corner-stamp.html
  23. +149 −0 spec/_posts/docs/2011-05-01-intro.mdown
  24. +157 −0 spec/_posts/docs/2011-05-02-options.mdown
  25. +155 −0 spec/_posts/docs/2011-05-03-methods.mdown
  26. +96 −0 spec/_posts/docs/2011-05-04-animating.mdown
  27. +139 −0 spec/_posts/docs/2011-05-30-help.mdown
  28. +189 −0 spec/_posts/pages/2011-05-02-2.html
  29. +174 −0 spec/_posts/pages/2011-05-03-3.html
  30. +159 −0 spec/_posts/pages/2011-05-04-4.html
  31. +167 −0 spec/_posts/pages/2011-05-05-5.html
  32. +14 −0 spec/_posts/tests/2011-01-01-index.html
  33. +1,438 −0 spec/_posts/tests/2011-05-14-lots-of-bricks.html
  34. +247 −0 spec/_posts/tests/2011-05-17-dual.html
  35. +217 −0 spec/_posts/tests/2011-05-18-first-child-no-width.html
  36. +205 −0 spec/_posts/tests/2011-05-19-empty.html
  37. +214 −0 spec/_posts/tests/2011-08-08-destroy.html
  38. +50 −0 spec/_posts/tests/2011-09-27-centered-few.html
  39. +58 −0 spec/index.html
  40. +0 −7 spec/masonry-rails_spec.rb
  41. +38 −0 vendor/assets/javascripts/masonry/box-maker.js
  42. +402 −0 vendor/assets/javascripts/masonry/jquery.event.drag-2.2.js
  43. +47 −0 vendor/assets/javascripts/masonry/jquery.infinitescroll.min.js
  44. +682 −0 vendor/assets/javascripts/masonry/jquery.masonry.js
  45. +10 −0 vendor/assets/javascripts/masonry/jquery.masonry.min.js
  46. +2 −0  vendor/assets/javascripts/masonry/modernizr-transitions.js
  47. +616 −0 vendor/assets/stylesheets/masonry/style.css
View
2  .gitignore
@@ -28,7 +28,7 @@ pkg
#
# For MacOS:
#
-#.DS_Store
+.DS_Store
# For TextMate
#*.tmproj
View
51 Masonry.mdown
@@ -0,0 +1,51 @@
+jQuery Masonry
+==============
+
+Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
+
+This package has all the documentation and demos to get you started.
+
+View this project live at [http://masonry.desandro.com](http://masonry.desandro.com).
+
+## Viewing this project locally
+
+
+### Via download
+
+You can download a zip of all the flat HTML files from [http://meta.metafizzy.co/files/masonry-site.zip](http://meta.metafizzy.co/files/masonry-site.zip).
+
+### Via Jekyll
+
+The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and run Jekyll from Terminal:
+
+ git clone https://github.com/desandro/masonry.git
+ cd masonry/
+ jekyll --server --auto
+
+Then view the live site at [http://localhost:4000](http://localhost:4000).
+
+## Including Masonry as a submodule
+
+The _module_ branch has just `jquery.masonry.js` and `jquery.masonry.min.js`, perfect for adding to your repo as a [submodule](http://dropshado.ws/post/20058825150/git-submodules).
+
+``` bash
+git submodule add https://github.com/desandro/masonry.git
+cd masonry/
+git checkout module
+git pull origin module
+cd ../
+git submodule update --init
+```
+
+Then you can reference `masonry/jquery.masonry.min.js` within your own project.
+
+To pull in the lastest version of the masonry submodule:
+
+``` bash
+cd masonry/
+git pull origin module
+```
+
+* * *
+
+Copyright (c) 2012 David DeSandro
View
53 README.md
@@ -0,0 +1,53 @@
+# Masonry for Rails asset pipeline
+
+[masonry](http://masonry.desandro.com/docs/intro.html) at [github](https://github.com/desandro/masonry)
+
+Using fork from [masonry](https://github.com/kristianmandrup/masonry)
+
+See more Masonry info at [masonry README](https://github.com/desandro/masonry/README.mdown)
+
+## Usage
+
+In Gemfile
+
+`gem 'masonry-rails'`
+
+### CSS
+
+Manifest `application.css` file:
+
+```css
+*= require 'masonry/style'
+```
+
+### Javascript
+
+```javascript
+// require masonry/jquery.masonry
+```
+
+Optional
+
+// require masonry/box-maker
+// require masonry/modernizr-transitions
+// require masonry/jquery.infinitescroll
+// require masonry/jquery.event.drag-2.2
+
+
+See examples on [masonry](http://masonry.desandro.com/docs/intro.html) or [github](https://github.com/desandro/masonry)
+
+## Contributing to masonry-rails
+
+* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
+* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
+* Fork the project.
+* Start a feature/bugfix branch.
+* Commit and push until you are happy with your contribution.
+* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
+* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
+
+## Copyright
+
+Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
+further details.
+
View
19 README.rdoc
@@ -1,19 +0,0 @@
-= masonry-rails
-
-Description goes here.
-
-== Contributing to masonry-rails
-
-* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
-* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
-* Fork the project.
-* Start a feature/bugfix branch.
-* Commit and push until you are happy with your contribution.
-* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
-* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
-
-== Copyright
-
-Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
-further details.
-
View
6 _config.yml
@@ -0,0 +1,6 @@
+name: jQuery Masonry
+permalink: /:categories/:title.html
+pygments: true
+masonry_js: jquery.masonry.min.js
+jquery_js: js/jquery-1.7.1.min.js
+exclude: [ minify.sh, notes.mdown ]
View
7 lib/masonry-rails.rb
@@ -0,0 +1,7 @@
+module Masonry
+ module Rails
+ # add vendor/assets to Rails asset pipeline
+ class Engine < ::Rails::Engine
+ end
+ end
+end
View
16 minify.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# minifies jquery.masonry.js
+# requires nodejs & uglifyjs
+
+IN=jquery.masonry.js
+OUT=jquery.masonry.min.js
+
+# remove any lines that begin with /*jshint or /*global
+# then, minify with Uglify JS
+# then, add newline characters after `*/`, but not last newline character
+awk '!/^\/\*[jshint|global]/' $IN \
+ | uglifyjs \
+ | awk '{ORS=""; gsub(/\*\//,"*/\n"); if (NR!=1) print "\n"; print;}' > $OUT
+echo "Minified" $IN "as" $OUT
+
View
75 spec/_layouts/default.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ {% if page.category != 'homepage' %}{% assign root_path = '../' %}{% assign link_path = '..' %}{% else %}{% assign link_path = '.' %}{% endif %}
+ <title>{{ page.title }}{% if page.category != 'homepage' %} &middot; {{ site.name }}{% endif %}</title>
+
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+ <link rel="stylesheet" href="{{ root_path }}css/style.css" />
+
+ {% if page.has_modernizr %}
+ <script src="{{ root_path }}js/modernizr-transitions.js"></script>
+ {% endif %}
+ <!-- scripts at bottom of page -->
+
+</head>
+<body class="{{ page.category }} {{ page.body_class }}">
+
+ <nav id="site-nav">
+ <h1><a href="{{ root_path }}index.html">{{ site.name }}</a></h1>
+
+ <h2>Docs</h2>
+
+ <ul class="docs-list">
+ {% for doc in site.categories.docs reversed %}
+ {% if page.title == doc.title %}
+ <li class="current"><a href="#content">{{ doc.title }}</a>
+ <ul class="toc">
+ {% for item in page.toc %}
+ <li><a href="#{{ item.anchor }}">{{ item.title }}</a></li>
+ {% endfor %}
+ </ul>
+ </li>
+ {% else %}
+ {% if doc.layout != 'index-page' %}
+ <li><a href="{{ link_path }}{{ doc.url }}">{{ doc.title }}</a>
+ {% endif %}
+ {% endif %}
+ {% endfor %}
+ </ul>
+
+ <h2>Demos</h2>
+
+ <ul class="demos-list">
+ {% for demo in site.categories.demos reversed %}
+ {% if page.title == demo.title %}
+ <li class="current"><a href="#content">{{ demo.title }}</a></li>
+ {% else %}
+ {% if demo.layout != 'index-page' %}
+ <li><a href="{{ link_path }}{{ demo.url }}">{{ demo.title }}</a>
+ {% endif %}
+ {% endif %}
+ {% endfor %}
+ </ul>
+
+ </nav> <!-- #site-nav -->
+
+ <section id="content">
+
+ {% if page.category != 'homepage' %}
+ <h1>{{ page.title }}</h1>
+ {% endif %}
+
+ {{ content }}
+
+ <footer id="site-footer">
+ {{ site.name }} by <a href="http://desandro.com">David DeSandro</a>
+ </footer>
+
+ </section> <!-- #content -->
+
+</body>
+</html>
View
206 spec/_posts/demos/2011-05-01-basic-single-column.html
@@ -0,0 +1,206 @@
+---
+
+title: Basic single-column
+category: demos
+layout: default
+
+---
+
+<div id="copy">
+{% highlight javascript %}
+
+$('#container').masonry({
+ itemSelector: '.box'
+});
+
+{% endhighlight %}
+</div>
+
+<div id="container" class="clearfix">
+
+ <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>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 class="box col1">
+ <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
+ </div>
+
+ <div class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </div>
+
+ <div class="box col1">
+ <h2>Sit amet mi ullamcorper vehicula</h2>
+ <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>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+ </div>
+
+ <div class="box col1">
+ <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 col1">
+ <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. </p>
+ <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+ </div>
+
+ <div class="box col1">
+ <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
+ </div>
+
+ <div class="box col1">
+ <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+ <div class="box col1">
+ <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 col1">
+ <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. </p>
+ </div>
+
+ <div class="box col1">
+ <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+ </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 col1">
+ <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 col1">
+ <p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
+ </div>
+
+
+ <div class="box col1">
+ <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+ </div>
+
+
+ <div>
+ <div class="box col1">
+ <p>Sit amet mi ullamcorper vehicula</p>
+ <h2>Sit amet mi ullamcorper vehicula</h2>
+ </div>
+
+ <div class="box col1">
+ <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+ </div>
+
+ <div class="box col1">
+ <h2>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </h2>
+ </div>
+
+ <div class="box col1">
+ <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 col1">
+
+ <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>
+ <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 col1">
+ <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+
+ </div>
+ </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 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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </div>
+
+ <div class="box col1">
+ <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
+ </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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box'
+ });
+
+ });
+</script>
View
213 spec/_posts/demos/2011-05-02-basic-multi-column.html
@@ -0,0 +1,213 @@
+---
+title: Basic multi-column
+category: demos
+layout: default
+---
+
+<div id="copy">
+ <p>The width of item elements can span multiple columns. Set <code>columnWidth</code> to match the width of a column in your grid layout.</p>
+
+{% highlight javascript %}
+
+$('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100
+});
+
+{% endhighlight %}
+</div>
+
+<div id="container" class="clearfix">
+
+ <div class="box col2">
+ <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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </div>
+
+ <div class="box">
+ <h2>This is the box with no width set</h2>
+ </div>
+
+ <div class="box col1">
+ <h2>Sit amet mi ullamcorper vehicula</h2>
+ </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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+ <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 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 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 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 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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </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>
+ <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+</div> <!-- #container -->
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100
+ });
+
+ });
+</script>
View
57 spec/_posts/demos/2011-05-03-images.html
@@ -0,0 +1,57 @@
+---
+title: Images
+layout: default
+category: demos
+photos:
+ - <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>
+ - <a href="http://www.flickr.com/photos/nemoorange/5013039885/" title="Officer by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" /></a>
+ - <a href="http://www.flickr.com/photos/nemoorange/5013039583/" title="Tony by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" /></a>
+ - <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>
+ - <a href="http://www.flickr.com/photos/nemoorange/5013039541/" title="Giraffe by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" /></a>
+ - <a href="http://www.flickr.com/photos/nemoorange/5013039741/" title="Gavin by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" alt="Gavin" /></a>
+ - <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>
+ - <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>
+ - <a href="http://www.flickr.com/photos/nemoorange/5013040075/" title="Wonder by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg" alt="Wonder" /></a>
+---
+
+<section id="copy">
+ <p>Masonry is triggered after all images are loaded with the imagesLoaded plugin</a>. </p>
+
+{% highlight javascript %}
+var $container = $('#container');
+
+$container.imagesLoaded( function(){
+ $container.masonry({
+ itemSelector : '.box'
+ });
+});
+{% endhighlight %}
+</section>
+
+<div id="container" class="clearfix">
+ {% for photo in page.photos %}
+ <div class="box photo col3">
+ {{ photo }}
+ </div>
+ {% endfor %}
+</div> <!-- #container -->
+
+<nav id="page_nav">
+ <a href="../pages/2.html"></a>
+</nav>
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ var $container = $('#container');
+
+ $container.imagesLoaded( function(){
+ $container.masonry({
+ itemSelector : '.box'
+ });
+ });
+
+ });
+</script>
View
226 spec/_posts/demos/2011-05-04-tumblelog.html
@@ -0,0 +1,226 @@
+---
+title: Tumblelog example
+category: demos
+layout: default
+---
+
+<div id="copy">
+ <p>A tumblelog is a good example of a typical use case for Masonry.</p>
+ <p>There are three sizes of columns used:</p>
+
+{% highlight css %}
+
+#tumblelog .col1 { width: 220px; }
+#tumblelog .col2 { width: 460px; }
+#tumblelog .col3 { width: 700px; }
+
+{% endhighlight %}
+
+ <p>With 10px of margin on right and left sides that makes for a grid with columns 240px wide. The imagesLoaded plugin is used to trigger Masonry once all images are loaded</p>
+
+{% highlight javascript %}
+
+var $tumblelog = $('#tumblelog');
+
+$tumblelog.imagesLoaded( function(){
+ $tumblelog.masonry({
+ columnWidth: 240
+ });
+});
+
+{% endhighlight %}
+
+</div>
+
+<div id="tumblelog" class="clearfix">
+
+ <div class="story col2">
+ <h2>Last Day Dream</h2>
+ <p>
+ <object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4155700&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff4000&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4155700&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff4000&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
+ </p>
+
+ <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+
+
+ <div class="story col1">
+ <blockquote>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ </blockquote>
+ <p>&mdash; Marcus Aurelius</p>
+ </div>
+
+ <div class="story col1">
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet.</p>
+
+ </div>
+
+ <div class="story col2">
+ <p>
+ <a href="http://www.flickr.com/photos/george_eastman_house/3123693806/in/set-72157611386593623"><img src="http://farm4.static.flickr.com/3121/3123693806_4cb1ca16d9.jpg" alt="" /></a>
+ </p>
+ </div>
+
+ <div class="story col1">
+ <p>
+ <a href="http://www.flickr.com/photos/george_eastman_house/3123692308/in/set-72157611386593623">
+ <img src="http://farm4.static.flickr.com/3282/3123692308_9e81bc4d14.jpg" alt="" />
+ </a>
+ </p>
+ <p>[PARENTS MAGAZINE, GIRL WITH CAT]</p>
+ </div>
+
+ <div class="story col1">
+ <blockquote>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
+ </blockquote>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </div>
+
+
+ <div class="story col2">
+ <object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6185327&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6185327&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
+ </div>
+
+ <div class="story col2">
+ <h2>Ut enim ad minim veniam</h2>
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ul>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ </div>
+
+ <div class="story col3">
+ <h3>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</h3>
+
+
+ <h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a></h3>
+ </div>
+
+ <div class="story col1">
+ <h3>feugiat vitae, ultricies eget</h3>
+ <a href="http://www.flickr.com/photos/library_of_congress/2179137415/"><img src="http://farm3.static.flickr.com/2109/2179137415_0e63ebb36e_m.jpg" alt="" /></a>
+ </div>
+
+ <div class="story col2">
+ <h2>A Tremendous Celebration</h2>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ol>
+
+ </div>
+
+
+ <div class="story col2">
+ <h2>And of Deliberate Consequences</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ol>
+
+ <h3>Aenean ultricies mi</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h3>Vestibulum tortor quam</h3>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+
+ </div>
+
+ <div class="story col1">
+ <blockquote>
+ <p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+
+ </p>
+ </blockquote>
+ </div>
+
+ <div class="story col1">
+ <p>
+ <a href="http://www.flickr.com/photos/library_of_congress/2179136893/" title="Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the &quot;Flying Fortress,&quot; the B-17F is a later model of the B-17 which distinguished itself in acti by The Library of Congress, on Flickr"><img src="http://farm3.static.flickr.com/2186/2179136893_a12b3ace56_m.jpg" alt="Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the &quot;Flying Fortress,&quot; the B-17F is a later model of the B-17 which distinguished itself in acti"></a>
+ </p>
+ <p>
+
+ Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in action in the South Pacific, over Germany and elsewhere. It is a long range, high altitude heavy bomber, with a crew of seven to nine men, and with armament sufficient to defend itself on daylight missions
+ </p>
+ </div>
+
+ <div class="story col1">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+ <p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+
+ <div class="story col1">
+ <p>
+ <a href="http://www.flickr.com/photos/library_of_congress/2178407555/"><img src="http://farm3.static.flickr.com/2008/2178407555_9a9bcfe31f_m.jpg" height="240" alt="" /></a>
+ </p>
+ </div>
+
+
+ <div class="story col3">
+ <object width="700" height="394"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7174318&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7174318&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=dd4499&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="394"></embed></object>
+ </div>
+
+ <div class="story col1">
+ <blockquote>
+ <p>Sing, O goddess, the anger of Achilles son of Peleus, that brought countless ills upon the Achaeans. Many a brave soul did it send hurrying down to Hades, and many a hero did it yield a prey to dogs and vultures, for so were the counsels of Jove fulfilled from the day on which the son of Atreus, king of men, and great Achilles, first fell out with one another.</p>
+ </blockquote>
+
+ <cite><a href="http://classics.mit.edu/Homer/iliad.1.i.html">Homer &mdash; The Iliad</a></cite>
+ </div>
+
+ <div class="story col1">
+ <h2>Aliens attack South Dakota</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+ <blockquote><p>Yes, it did happen.</p></blockquote>
+
+ <p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+
+
+
+ </div>
+
+ <div class="story col3">
+ <p style="float: right; margin-left: 20px"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><img src="http://farm4.static.flickr.com/3197/3122875223_917b1ccafc.jpg" alt="McCall Cover, Joan Caulfield" /></a></p>
+ <h2>And then, there is this.</h2>
+ <p class="caption"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><em>McCall Cover, Joan Caulfield</em> by Nickolas Muray</a></p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+
+</div> <!-- /#tumblelog -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ var $tumblelog = $('#tumblelog');
+
+ $tumblelog.imagesLoaded( function(){
+ $tumblelog.masonry({
+ columnWidth: 240
+ });
+ });
+
+ });
+</script>
View
144 spec/_posts/demos/2011-05-05-animating-jquery.html
@@ -0,0 +1,144 @@
+---
+title: Animating with jQuery
+category: demos
+layout: default
+---
+
+<div id="copy">
+ <p>Rearrangements can be animated (with jQuery) when the container is resized by setting <code>animated: <span class="kc">true</span></code>. More details in <a href="../docs/animating.html#jquery">Animating</a>.</p>
+
+{% highlight javascript %}
+
+$('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ isAnimated: true
+});
+
+{% endhighlight %}
+
+</div>
+
+<div id="container" class="clearfix">
+
+ <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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </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 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 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 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> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ isAnimated: true
+ });
+
+ });
+</script>
View
132 spec/_posts/demos/2011-05-06-animating-css-transitions.html
@@ -0,0 +1,132 @@
+---
+title: Animating with CSS Transitions
+category: demos
+layout: default
+---
+
+<div id="copy">
+ <p>This layout is animated with CSS transitions. More details in <a href="../docs/animating.html#css_transitions">Animating</a>.</p></p>
+</div>
+
+<div id="container" class="transitions-enabled clearfix">
+
+ <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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </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 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 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 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> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100
+ });
+
+ });
+</script>
View
136 spec/_posts/demos/2011-05-07-animating-modernizr.html
@@ -0,0 +1,136 @@
+---
+title: Animating with Modernizr
+category: demos
+layout: default
+has_modernizr: true
+---
+
+
+
+<div id="copy">
+ <p>This layout is animated with CSS transitions if the browser supports it, but falls back to jQuery animation if not available. Modernizr has been implemented to detect support. More details in <a href="../docs/animating.html#modernizr">Animating</a>.</p></p>
+</div>
+
+<div id="container" class="transitions-enabled clearfix">
+
+ <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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </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 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 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 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> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ isAnimated: !Modernizr.csstransitions
+ });
+
+ });
+</script>
View
89 spec/_posts/demos/2011-05-08-adding-items.html
@@ -0,0 +1,89 @@
+---
+title: Adding items
+category: demos
+layout: default
+has_modernizr: true
+---
+
+
+
+
+<div id="copy">
+ <p>After adding items to a Masonry-ed container, you can properly lay them out using methods. <code>appended</code> will layout new items to the end of the layout. <code>reload</code> will layout all the item elements in the container, which is useful for prepending or inserting.</p>
+</div>
+
+<p>
+ <button id="prepend">Prepend new items</button>
+ <button id="append">Append new items</button>
+</p>
+
+<div id="container" class="transitions-enabled clearfix">
+
+ <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">
+ <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 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>
+ </ul>
+ </div>
+
+
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script src="../js/box-maker.js"></script>
+<script>
+ $(function(){
+
+ var $container = $('#container');
+
+ $container.masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ isAnimated: !Modernizr.csstransitions
+ });
+
+ $('#prepend').click(function(){
+ var $boxes = $( boxMaker.makeBoxes() );
+ $container.prepend( $boxes ).masonry( 'reload' );
+ });
+
+ $('#append').click(function(){
+ var $boxes = $( boxMaker.makeBoxes() );
+ $container.append( $boxes ).masonry( 'appended', $boxes );
+ });
+
+ });
+</script>
View
268 spec/_posts/demos/2011-05-09-infinite-scroll.html
@@ -0,0 +1,268 @@
+---
+title: Infinite Scroll
+category: demos
+layout: default
+---
+
+<div id="copy">
+ <p>Masonry integrates well with auto-paging scripts like <a href="http://infinite-scroll.com/">Infinite Scroll</a> by <a href="http://paulirish.com">Paul Irish</a>. Using the <a href="../docs/methods.html#appended"><code>appended</code> method</a>, Masonry will position only the newly appended elements, and skip over all the previous elements that are already in their proper position, thus saving precious milliseconds of page load time. This demo also makes use of the <code>isAnimatedFromBottom</code> flag.</p>
+</div>
+
+<div id="container" class="transitions-enabled infinite-scroll clearfix">
+
+ <div class="box col3">
+ <p>
+ <a href="http://www.flickr.com/photos/nemoorange/3318887645/" title="Clarendon Metro by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3619/3318887645_1f33364338.jpg" alt="Clarendon Metro" /></a>
+ </p>
+ </div>
+
+ <div class="box col1">
+ <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
+ </div>
+
+ <div class="box col2">
+ <p>
+ <a href="http://www.flickr.com/photos/nemoorange/3319714470/" title="Whitlow's on Wilson by nemoorange, on Flickr"><img src="http://farm4.static.flickr.com/3008/3319714470_c05a5cb5a8_m.jpg" alt="Whitlow's on Wilson" /></a>
+ </p>
+ </div>
+
+
+ <div class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </div>
+
+ <div class="box col1">
+ <h2>Sit amet mi ullamcorper vehicula</h2>
+ </div>
+
+ <div class="box col1">
+ <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
+ </div>
+
+ <div class="box col5">
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
+
+ </div>
+
+ <div class="box col3">
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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">
+ <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 col3">
+
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+ <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 col4">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+
+
+ <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 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 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 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 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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </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>
+ <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+</div> <!-- #container -->
+
+<nav id="page-nav">
+ <a href="../pages/2.html"></a>
+</nav>
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script src="../js/jquery.infinitescroll.min.js"></script>
+<script>
+ $(function(){
+
+ var $container = $('#container');
+
+ $container.imagesLoaded(function(){
+ $container.masonry({
+ itemSelector: '.box',
+ columnWidth: 100
+ });
+ });
+
+ $container.infinitescroll({
+ navSelector : '#page-nav', // selector for the paged navigation
+ nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
+ itemSelector : '.box', // selector for all items you'll retrieve
+ loading: {
+ finishedMsg: 'No more pages to load.',
+ img: 'http://i.imgur.com/6RMhx.gif'
+ }
+ },
+ // trigger Masonry as a callback
+ function( newElements ) {
+ // hide new items while they are loading
+ var $newElems = $( newElements ).css({ opacity: 0 });
+ // ensure that images load before adding to masonry layout
+ $newElems.imagesLoaded(function(){
+ // show elems now they're ready
+ $newElems.animate({ opacity: 1 });
+ $container.masonry( 'appended', $newElems, true );
+ });
+ }
+ );
+
+ });
+</script>
View
209 spec/_posts/demos/2011-05-10-gutters.html
@@ -0,0 +1,209 @@
+---
+title: Gutters
+category: demos
+layout: default
+has_modernizr: true
+---
+
+<div id="copy">
+ <p>The <a href="../docs/options.html#gutterwidth"><code>gutterWidth</code> option</a> adds additional spacing between columns, but not on the outer sides of the container.</p>
+</div>
+
+<div id="container" class="transitions-enabled has-gutters clearfix">
+
+ <div class="box col2">
+ <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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </div>
+
+ <div class="box">
+ <h2>This is the box with no width set</h2>
+ </div>
+
+ <div class="box col1">
+ <h2>Sit amet mi ullamcorper vehicula</h2>
+ </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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+ <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>
+ </div>
+
+ <div class="box col2">
+ <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 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 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 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 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 class="box col1">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
+ </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>
+ <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </div>
+
+</div> <!-- #container -->
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ gutterWidth: 40
+ });
+
+ });
+</script>
View
135 spec/_posts/demos/2011-05-11-right-to-left.html
@@ -0,0 +1,135 @@
+---
+title: Right-to-left
+category: demos
+layout: default
+has_modernizr: true
+---
+
+<div id="copy">
+ <p>Enable right-to-layout by setting the <a href="../docs/options.html#isrtl"><code>isRTL</code> option</a> to <code>true</code>.</p>
+</div>
+
+<div id="container" class="transitions-enabled rtl clearfix">
+
+ <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">
+ <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 col3">
+ <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>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </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 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 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 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> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+
+ $('#container').masonry({
+ itemSelector: '.box',
+ columnWidth: 100,
+ isAnimated: !Modernizr.csstransitions,
+ isRTL: true
+ });
+
+ });
+</script>
View
137 spec/_posts/demos/2011-05-17-centered.html
@@ -0,0 +1,137 @@
+---
+title: Centered
+category: demos
+layout: default
+has_modernizr: true
+---
+
+
+
+<div id="copy">
+ <p>This layout is centered by setting <code>isFitWidth: true</code> and adding necessary CSS position styles <code>margin: 0 auto;</code>.</p>
+</div>
+
+<div id="container" class="transitions-enabled centered clearfix">
+
+ <div class="box col2">
+ <p>Sit amet mi ullamcorper vehicula</p>
+ </div>
+
+ <div class="box col2">
+ <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+ </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 col4">
+ <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 col2">
+ <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
+ </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 col2">
+ <p>Morbi purus libero</p>
+ </div>
+
+ <div class="box col2">
+ <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 col4">
+ <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 col2">
+ <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 col2">
+ <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 col2">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+ </div>
+
+
+
+
+ <div class="box col2">
+ <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 col2">
+ <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+ </div>
+
+
+
+ <div class="box col4">
+ <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 col2">
+ <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
+ </div>
+
+ <div class="box col2">
+ <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
+ </div>
+
+</div> <!-- #container -->
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.masonry_js }}"></script>
+<script>
+ $(function(){
+