html : add options doc

_config.yml

@@ -1,5 +1,6 @@
 name: Isotope
 permalink: /:categories/:title.html
+pygments: true
 
 elements:
   - categories: [alkali, metal]

_posts/docs/2010-12-02-getting-started.mdown

@@ -0,0 +1,9 @@
+---
+
+title: Getting Started
+category: docs
+layout: doc
+
+---
+
+this is how you get started

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

@@ -0,0 +1,118 @@
+---
+
+title: Options
+category: docs
+layout: doc
+body_class: option-def
+
+---
+
+<dl class="header clearfix">
+  <dt><code>option</code></dt>
+  <dd class="option-type">Type</dd>
+  <dd class="default">Default</dd>
+</dl>
+
+<dl class="clearfix">
+  <dt><code>animationEngine</code></dt>
+  <dd class="option-type">String</dd>
+  <dd class="default"><code><span class="s1">'best-available'</span></code></dd>
+</dl>
+
+Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.
+
+#### Values
+
+
++ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
++ `'css'`: Isotope uses `.css()`
++ `'jquery'`: Isotope uses `.animate()`
+
+<dl class="clearfix">
+  <dt><code>animationOptions</code></dt>
+  <dd class="option-type">Object</dd>
+  <dd class="default"><code>{ queue: <span class="kc">false</span> }</code></dd>
+</dl>
+
+When jQuery is the animation engine, these options will be used in <code>.animate()</code>. See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details.
+
+**Example:**
+
+{% highlight javascript %}
+
+$('#container').isotope({
+  animationOptions: {
+     duration: 750,
+     easing: 'linear',
+     queue: false
+   }
+});
+
+{% endhighlight %}
+
+<dl class="clearfix">
+  <dt><code>containerClass</code></dt>
+  <dd class="option-type">String</dd>
+  <dd class="default"><code><span class="s1">'isotope'</span></code></dd>
+</dl>
+
+The class applied to the container element.
+
+<dl class="clearfix">
+  <dt><code>filter</code></dt>
+  <dd class="option-type">Selector</dd>
+</dl>
+
+Setting a filter with show item elements that match the selector, and hide elements that do not match.
+
+<dl class="clearfix">
+  <dt><code>getSortData</code></dt>
+  <dd class="option-type">Object</dd>
+</dl>
+
+<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>
+
+<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>
+
+<dl class="clearfix">
+  <dt><code>itemSelector</code></dt>
+  <dd class="option-type">Selector</dd>
+</dl>
+
+<dl class="clearfix">
+  <dt><code>layoutMode</code></dt>
+  <dd class="option-type">String</dd>
+  <dd class="default"><code><span class="s1">'masonry'</span></code></dd>
+</dl>
+
+<dl class="clearfix">
+  <dt><code>resizeable</code></dt>
+  <dd class="option-type">Boolean</dd>
+  <dd class="default"><code><span class="kc">true</span></code></dd>
+</dl>
+
+<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>
+
+<dl class="clearfix">
+  <dt><code>sortBy</code></dt>
+  <dd class="option-type">String</dd>
+</dl>
+
+<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>
+

css/style.css

@@ -11,7 +11,7 @@ body {
   font-family: 'Helvetica Neue', Arial, sans-serif;
   font-size: 13px;
   line-height: 1.7em;
-  background: #1D1D1D;
+  background: #222;
   color: #FFF;
 }
 
@@ -323,6 +323,81 @@ body.doc {
   line-height: 1.7em;
 }
 
+.doc h2,
+.doc footer {
+  border-top: 1px solid #333;
+  padding-top: 0.8em;
+}
+
+pre {
+  padding: 0.5em;
+}
+
+pre, code {
+  background: black;
+  color: white;
+  font-family: 'Monaco', monospace, sans-serif;
+}
+
+.doc #content code {
+  font-size: 0.85em;
+  
+}
+
+.option-def dl {
+  background: #161616;
+}
+
+.option-def dl.header { background: #444; }
+
+.option-def dl dt,
+.option-def dl dd {
+  float: left;
+  padding: 0.5em;
+}
+
+.option-def dl dt {
+  width: 160px;
+}
+
+.option-def dl .option-type {
+  width: 60px;
+  font-size: 13px;
+  color: #AAA;
+  font-style: italic;
+}
+
+.option-def dl dd {
+  border-left: 1px solid #222;
+}
+
+
+
+/**** Pygments ****/
+
+code .s1,
+code .s { color: #78BD55; } /* string */
+code .mi, /* integer */
+code .cp, /* doctype */
+code .kc { color: #5298D4; } /*boolean*/
+code .k { color: #E39B79; } /* keyword */
+code .kd, /* storage */
+code .na { color: #A9D866; } /* markup attribute */
+code .p  { color: #EDB; } /* punctuation */
+code .o  { color: #F63; }   /* operator */
+code .nb { color: #AA97AC;} /* support */
+
+/* comment */
+code .c,
+code .c1 { color: #666; font-style: italic; }
+
+code .nt { color: #A0C8FC; } /* Markup open tag */
+
+code .nf { color: #9EA8B8; } /* css id */
+code .nc { color: #A78352; }  /* CSS class */
+code .m  { color: #DE8E50; } /* CSS value */
+code .nd { color: #9FAD7E; } /* CSS pseudo selector */
+
 @media screen and (min-width: 768px) {
 
   body.doc {