html : options and methods

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

@@ -70,23 +70,51 @@ Setting a filter with show item elements that match the selector, and hide eleme
   <dd class="option-type">Object</dd>
 </dl>
 
+An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value.
+
+**Example**
+
+{% highlight javascript %}
+
+$('#container').isotope({
+  getSortData : {
+    symbol : function( $elem ) {
+      return $elem.attr('data-symbol');
+    },
+    number : function( $elem ) {
+      return parseInt( $elem.find('.number').text(), 10 );
+    },
+    name : function ( $elem ) {
+      return $elem.find('.name').text();
+    }
+  }
+});
+
+{% endhighlight %}
+
 <dl class="clearfix">
   <dt><code>hiddenClass</code></dt>
   <dd class="option-type">String</dd>
   <dd class="default"><code><span class="s1">'isotope-hidden'</span></code></dd>
 </dl>
 
+The class applied to item elements hidden by Filtering.
+
 <dl class="clearfix">
   <dt><code>hiddenStyle</code></dt>
   <dd class="option-type">Object</dd>
   <dd class="default"><code>{ opacity : <span class="mi">0</span>, scale : <span class="mi">0.001</span> }</code></dd>
 </dl>
 
+The style applied to item elements hidden by Filtering.
+
 <dl class="clearfix">
   <dt><code>itemSelector</code></dt>
   <dd class="option-type">Selector</dd>
 </dl>
 
+Restricts Isotope item elements to selector.
+
 <dl class="clearfix">
   <dt><code>layoutMode</code></dt>
   <dd class="option-type">String</dd>
@@ -99,20 +127,30 @@ Setting a filter with show item elements that match the selector, and hide eleme
   <dd class="default"><code><span class="kc">true</span></code></dd>
 </dl>
 
+Triggers layout logic when browser window is resized. 
+
 <dl class="clearfix">
   <dt><code>sortAscending</code></dt>
   <dd class="option-type">Boolean</dd>
   <dd class="default"><code><span class="kc">true</span></code></dd>
 </dl>
 
+Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...".
+
 <dl class="clearfix">
   <dt><code>sortBy</code></dt>
   <dd class="option-type">String</dd>
 </dl>
 
+The property name of the method within the `getSortData` option to sort item elements.
+
+Looking at the `getSortData` example above, valid values would be `'symbol'`, `'number'`, or `'name'`.
+
 <dl class="clearfix">
   <dt><code>visibleStyle</code></dt>
   <dd class="option-type">Object</dd>
   <dd class="default"><code>{ opacity : <span class="mi">1</span>, scale : <span class="mi">1</span> }</code></dd>
 </dl>
 
+The style applied to item elements made visible by Filtering.
+

_posts/docs/2010-12-04-methods.mdown

@@ -0,0 +1,54 @@
+---
+
+title: Methods
+category: docs
+layout: doc
+body_class: option-def
+
+---
+
+<dl class="clearfix">
+  <dt>name</dt>
+  <dd></dd>
+</dl>
+
+These are some methods
+
+<dl class="clearfix">
+  <dt>appended</dt>
+  <dd><code>.isotope( <span class="s1">'appended'</span>, $content, callback )</code></dd>
+</dl>
+
+<dl class="clearfix">
+  <dt>addAtoms</dt>
+  <dd><code>.isotope( <span class="s1">'addAtoms'</span>, $content, callback )</code></dd>
+</dl>
+
+<dl class="clearfix">
+  <dt>insert</dt>
+  <dd><code>.isotope( <span class="s1">'insert'</span>, $content, callback )</code></dd>
+</dl>
+
+<dl class="clearfix">
+  <dt>reLayout</dt>
+  <dd><code>.isotope( <span class="s1">'reLayout'</span>, callback )</code></dd>
+</dl>
+
+<dl class="clearfix">
+  <dt>layout</dt>
+  <dd><code>.isotope( <span class="s1">'layout'</span>, $content, callback )</code></dd>
+</dl>
+
+reLayout
+
+    reLayout : function( callback )
+
+layout
+
+    layout : function( $elems, callback )
+
+resize
+
+option
+
+destroy

css/style.css

@@ -5,9 +5,9 @@
   padding: 0;
 }
 
-
 body {
   padding: 20px;
+/*  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;*/
   font-family: 'Helvetica Neue', Arial, sans-serif;
   font-size: 13px;
   line-height: 1.7em;
@@ -24,7 +24,6 @@ h1, h2, h3, p, ul, ol, pre, dl {
   margin-bottom: 1.0em;
 }
 
-
 ul, ol {
   margin-left: 1.5em;
 }
@@ -319,8 +318,8 @@ body.doc {
 }
 
 .doc #content {
-  font-size: 14px;
+/*  font-size: 14px;
-  line-height: 1.7em;
+  line-height: 1.7em;*/
 }
 
 .doc h2,
@@ -340,20 +339,31 @@ pre, code {
 }
 
 .doc #content code {
-  font-size: 0.85em;
+  font-size: 12px;
+}
 
+.doc #content pre {
+  line-height: 1.6em;
 }
 
 .option-def dl {
-  background: #161616;
+  margin-top: 1.8em;
+  padding-top: 0.5em;
+  border-top: 1px solid #333;
 }
 
-.option-def dl.header { background: #444; }
 
 .option-def dl dt,
 .option-def dl dd {
   float: left;
-  padding: 0.5em;
+  padding: 0.5em 0.8em;;
+  background: #161616;
+  height: 2.0em;
+}
+
+.option-def dl.header dt,
+.option-def dl.header dd {
+  background: #444;
 }
 
 .option-def dl dt {
@@ -408,7 +418,6 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
     width: 200px;
     position: fixed;
     left: 10px;
-    font-size: 14px;
   }
 
   .doc nav h1 {