docs : add Filtering doc

_layouts/elements.html

@@ -33,7 +33,6 @@
 
     {% include sort-buttons.html %}
 
-
     {% include layout-options.html %}
 
     <h3>Etc</h3>

_posts/demos/2010-12-30-filtering.html

@@ -31,9 +31,10 @@ category: demos
       <li><a href="#filter" data-filter=".transition">transition</a></li>
       <li><a href="#filter" data-filter=".post-transition">post-transition</a></li>
       <li><a href="#filter" data-filter=".nonmetal">nonmetal</a></li>
+      <li><a href="#filter" data-filter=".inner-transition-element">inner-transition-element</a></li>
       <li><a href="#filter" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
       <li><a href="#filter" data-filter=":not(.transition)">not transition</a></li>
-      <li><a href="#filter" data-filter=".metal:not(.transition)">metal and not transition</a></li>
+      <li><a href="#filter" data-filter=".metal:not(.transition)">metal but not transition</a></li>
     </ul>
 
   </section> <!-- #options -->
@@ -61,13 +62,9 @@ category: demos
       });
       
       // filter buttons
-      $('#filters').find('a').click(function(){
-        // get href attribute, minus the #, plus a . to make it a class
-        var filterName = $(this).attr('data-filter');
-        // var filterTest = 'filter ' + filterName;
-        // console.time( filterTest );
-        $demo.isotope({ filter: filterName })
-        // console.timeEnd( filterTest );
+      $('#filters a').click(function(){
+        var selector = $(this).attr('data-filter');
+        $demo.isotope({ filter: selector });
         return false;
       });
       

_posts/demos/2010-12-30-sorting.html

@@ -27,7 +27,7 @@ category: demos
 
   </section> <!-- #options -->
   
-  <div id="demo" class="iso-container variable-sizes">
+  <div id="demo" class="iso-container">
     {% for element in site.elements_best_of %}
       {% include element-partial.html %}
     {% endfor %}

_posts/docs/2010-12-03-options.mdown

@@ -23,7 +23,7 @@ body_class: option-def
 
 Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.
 
-### Values
+### Values {#animationEngine-values}
 
 
 + `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
@@ -73,6 +73,10 @@ The class applied to the container element.
 
 Setting a filter with show item elements that match the selector, and hide elements that do not match.
 
+### Values {#filter-values}
+
++ `'*'` Shows all item elements
+
 ## getSortData
 
 <dl class="clearfix">

_posts/docs/2010-12-06-filtering.mdown

@@ -0,0 +1,71 @@
+---
+
+title: Filtering
+category: docs
+layout: doc
+
+---
+
+Isotope can hide and show item elements via the `filter` option. The `filter` option accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
+
+[**See Demo: Filtering**](../demos/filtering.html)
+
+## Markup
+
+Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc.
+
+{% highlight html %}
+
+<div id="demo" class="iso-container"> 
+  <div class="element transition metal">...</div>
+  <div class="element post-transition metal">...</div>
+  <div class="element alkali metal">...</div>
+  <div class="element transition metal">...</div>
+  <div class="element lanthanoid metal inner-transition-element">...</div> 
+  <div class="element halogen nonmetal">...</div> 
+  <div class="element alkaline-earth metal">...</div>
+  ...
+</div>
+
+{% endhighlight %}
+
+## jQuery script
+
+To show only `.metal` items, the jQuery script would be:
+
+{% highlight javascript %}
+
+$('#demo').isotope({ filter: '.metal' });
+
+{% endhighlight %}
+
+Filtering selectors work just as expected. `.alkali, alkaline-earth` with show both `.alkali` AND ` .alkaline-earth` items, and hide all others.  `.metal:not(.transition)` will show `.metal` item elements that are not `.transition`.
+
+## Buttons
+
+Let's use a basic list for our buttons
+
+{% highlight html %}
+
+<ul id="filters">
+  <li><a href="#" data-filter="*">show all</a></li>
+  <li><a href="#" data-filter=".metal">metal</a></li>
+  <li><a href="#" data-filter=".transition">transition</a></li>
+  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
+  <li><a href="#" data-filter=":not(.transition)">not transition</a></li>
+  <li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
+</ul>
+
+{% endhighlight %}
+
+Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter secltor.
+
+{% highlight javascript %}
+
+$('#filters a').click(function(){
+  var selector = $(this).attr('data-filter');
+  $('#demo').isotope({ filter: selector });
+  return false;
+});
+
+{% endhighlight %}

css/style.css

@@ -320,7 +320,7 @@ body.doc {
 }
 
 pre {
-  padding: 0.5em;
+  padding: 10px;
 }
 
 pre, code {