diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js
index 822b427..23dbd21 100644
--- a/_includes/add-buttons.js
+++ b/_includes/add-buttons.js
@@ -6,10 +6,10 @@
           newEls += fakeElement.create();
         }
         var $newEls = $( newEls )
-        // $demo.append( $newEls ).isotope( 'appendToLayout', $newEls );
-        $demo.isotope( 'insert', $newEls );
-        // $demo.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
-        // $demo.isotope()
+        // $container.append( $newEls ).isotope( 'appendToLayout', $newEls );
+        $container.isotope( 'insert', $newEls );
+        // $container.append( $newEls ).isotope( 'addAtoms', $newEls ).isotope();
+        // $container.isotope()
         // console.log( next )
 
         return false;
@@ -22,7 +22,7 @@
           newEls += fakeElement.create();
         }
         var $newEls = $( newEls )
-        $demo.append( $newEls ).isotope( 'appended', $newEls );
+        $container.append( $newEls ).isotope( 'appended', $newEls );
 
         return false;
       });
\ No newline at end of file
diff --git a/_includes/layout-change.js b/_includes/layout-change.js
index ffb765c..e473b74 100644
--- a/_includes/layout-change.js
+++ b/_includes/layout-change.js
@@ -9,15 +9,15 @@
         if ( wasHorizontal !== isHorizontal ) {
           // need to do some clean up for transitions and sizes
           var style = isHorizontal ? 
-            { height: '80%', width: $demo.width() } : 
+            { height: '80%', width: $container.width() } : 
             { width: 'auto' };
-          $demo.addClass('no-transition').css( style );
+          $container.addClass('no-transition').css( style );
           setTimeout(function(){
-            $demo.removeClass('no-transition').isotope({ layoutMode : mode });
+            $container.removeClass('no-transition').isotope({ layoutMode : mode });
           }, 100 )
         } else {
           // go ahead and apply new layout
-          $demo.isotope({ layoutMode : mode });
+          $container.isotope({ layoutMode : mode });
     
         }
   
diff --git a/_includes/sort-buttons.js b/_includes/sort-buttons.js
index ceafb6b..a127bd3 100644
--- a/_includes/sort-buttons.js
+++ b/_includes/sort-buttons.js
@@ -7,7 +7,7 @@
             asc = $this.parents('.sort').hasClass('asc');
         // var sortTest = 'sort ' + sortName + ' ' + direction;
         // console.time( sortTest );
-        $demo.isotope({ 
+        $container.isotope({ 
           sortBy : sortName,
           sortAscending : asc
         });
diff --git a/_layouts/elements.html b/_layouts/elements.html
index 8471d69..c76eec1 100644
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@@ -65,10 +65,10 @@
 
     $(function(){
 
-      var $demo = $('#demo');
+      var $container = $('#container');
 
       // hacky way of adding random size classes
-      $demo.find('.element').each(function(){
+      $container.find('.element').each(function(){
         if ( Math.random() > 0.6 ) {
           $(this).addClass('width2');
         }
@@ -80,7 +80,7 @@
 
       // console.log('starting')
       // console.time('initializeMe');
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         // layoutMode : 'fitRows',
         masonry : {
@@ -126,7 +126,7 @@
         filterName = filterName === '.show-all' ? '*' : filterName;
         // var filterTest = 'filter ' + filterName;
         // console.time( filterTest );
-        $demo.isotope({ filter: filterName })
+        $container.isotope({ filter: filterName })
         // console.timeEnd( filterTest );
         return false;
       });
@@ -134,16 +134,16 @@
       {% include sort-buttons.js %}
 
       // change size of clicked element
-      $demo.find('.element').live('click', function(){
+      $container.find('.element').live('click', function(){
         $(this).toggleClass('large');
         // console.time('relayout');
-        $demo.isotope('reLayout');
+        $container.isotope('reLayout');
         // console.timeEnd('relayout');
       });
 
       // toggle variable sizes of all elements
       $('#toggle-sizes').find('a').click(function(){
-        $demo
+        $container
           .toggleClass('variable-sizes')
           .isotope('reLayout');
         return false;
@@ -154,12 +154,12 @@
       {% include add-buttons.js %}
 
       $('#shuffle a').click(function(){
-        $demo.isotope('shuffle');
+        $container.isotope('shuffle');
         return false;
       });
 
       $('#xray').find('a').click(function(){
-        $demo.toggleClass('xray');
+        $container.toggleClass('xray');
       });
       
       
diff --git a/_layouts/inf-scroll-page.html b/_layouts/inf-scroll-page.html
index 689836c..6d44628 100644
--- a/_layouts/inf-scroll-page.html
+++ b/_layouts/inf-scroll-page.html
@@ -11,7 +11,7 @@
 
   <h1>{{ page.title }}</h1>
   
-  <div id="demo" class="iso-container variable-sizes">
+  <div id="container" class="iso-container variable-sizes">
     {% assign page_position = page.page_position %}
     {% for element in site.elements_ordered limit:20 offset:page_position %}
       {% include element-partial.html %}
@@ -27,9 +27,9 @@
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
       
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         layoutMode : 'fitRows'
       });
diff --git a/_posts/demos/2010-12-12-basic.html b/_posts/demos/2010-12-12-basic.html
index 617b5eb..cef2d0a 100644
--- a/_posts/demos/2010-12-12-basic.html
+++ b/_posts/demos/2010-12-12-basic.html
@@ -9,11 +9,11 @@ related: etc
     <p>This is a basic demo of Isotope. Resize the browser window to see the layout animate.</p>
   </section>
   
-  <div id="demo" class="iso-container">
+  <div id="container" class="iso-container">
     {% for element in site.elements_ordered limit:20 %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -24,9 +24,9 @@ related: etc
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
       
-      $demo.isotope({
+      $container.isotope({
         itemSelector: '.element'
       });
       
diff --git a/_posts/demos/2010-12-13-elements-complete.html b/_posts/demos/2010-12-13-elements-complete.html
index 5fc97f2..64ad31d 100644
--- a/_posts/demos/2010-12-13-elements-complete.html
+++ b/_posts/demos/2010-12-13-elements-complete.html
@@ -5,7 +5,7 @@ category: demos
 related: etc
 ---
 
-<div id="demo" class="iso-container clickable">
+<div id="container" class="iso-container clickable">
   {% for element in site.elements %}
     {% include element-partial.html %}
   {% endfor %}
diff --git a/_posts/demos/2010-12-16-elements-partial.html b/_posts/demos/2010-12-16-elements-partial.html
index 003bc44..0ebbb54 100644
--- a/_posts/demos/2010-12-16-elements-partial.html
+++ b/_posts/demos/2010-12-16-elements-partial.html
@@ -5,7 +5,7 @@ category: demos
 related: etc
 ---
 
-<div id="demo" class="iso-container clickable">
+<div id="container" class="iso-container clickable">
   {% for element in site.elements_best_of %}
     {% include element-partial.html %}
   {% endfor %}
diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html
index a2caa5d..975178c 100644
--- a/_posts/demos/2010-12-29-layout-modes.html
+++ b/_posts/demos/2010-12-29-layout-modes.html
@@ -16,11 +16,11 @@ related: layouts
 
   </section> <!-- #options -->
   
-  <div id="demo" class="iso-container variable-sizes">
+  <div id="container" class="iso-container variable-sizes">
     {% for element in site.elements_ordered limit:20 %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -31,10 +31,10 @@ related: layouts
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
 
       // hacky way of adding random size classes
-      $demo.find('.element').each(function(){
+      $container.find('.element').each(function(){
         if ( Math.random() > 0.6 ) {
           $(this).addClass('width2');
         }
@@ -43,7 +43,7 @@ related: layouts
         }
       });
       
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         masonry : {
           columnWidth : 120
diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html
index 90ee9b0..159c995 100644
--- a/_posts/demos/2010-12-30-filtering.html
+++ b/_posts/demos/2010-12-30-filtering.html
@@ -23,11 +23,11 @@ related: filtering
 
   </section> <!-- #options -->
   
-  <div id="demo" class="iso-container">
+  <div id="container" class="iso-container">
     {% for element in site.elements_best_of %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -38,9 +38,9 @@ related: filtering
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
 
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         animationEngine : $.browser.opera ? 'jquery' : 'best-available'
       });
@@ -48,7 +48,7 @@ related: filtering
       // filter buttons
       $('#filters a').click(function(){
         var selector = $(this).attr('data-filter');
-        $demo.isotope({ filter: selector });
+        $container.isotope({ filter: selector });
         return false;
       });
       
diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html
index 3b501f3..4773c7c 100644
--- a/_posts/demos/2010-12-30-sorting.html
+++ b/_posts/demos/2010-12-30-sorting.html
@@ -16,11 +16,11 @@ related: sorting
 
   </section> <!-- #options -->
   
-  <div id="demo" class="iso-container">
+  <div id="container" class="iso-container">
     {% for element in site.elements_best_of %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -31,10 +31,10 @@ related: sorting
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
 
       
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         animationEngine : $.browser.opera ? 'jquery' : 'best-available',
         getSortData : {
diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html
index 0bc0e65..9c81483 100644
--- a/_posts/demos/2010-12-31-relayout.html
+++ b/_posts/demos/2010-12-31-relayout.html
@@ -16,11 +16,11 @@ related: methods
     </ul>
   </section>
   
-  <div id="demo" class="iso-container clickable">
+  <div id="container" class="iso-container clickable">
     {% for element in site.elements_ordered limit:20 %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -31,10 +31,10 @@ related: methods
   <script>
     $(function(){
       
-      var $demo = $('#demo');
+      var $container = $('#container');
       
       // hacky way of adding random size classes
-      $demo.find('.element').each(function(){
+      $container.find('.element').each(function(){
         if ( Math.random() > 0.6 ) {
           $(this).addClass('width2');
         }
@@ -43,7 +43,7 @@ related: methods
         }
       });
       
-      $demo.isotope({
+      $container.isotope({
         itemSelector: '.element',
         masonry : {
           columnWidth : 120
@@ -52,17 +52,17 @@ related: methods
       
       // toggle variable sizes of all elements
       $('#toggle-sizes a').click(function(){
-        $demo
+        $container
           .toggleClass('variable-sizes')
           .isotope('reLayout');
         return false;
       });
       
       // change size of clicked element
-      $demo.find('.element').live('click', function(){
+      $container.find('.element').live('click', function(){
         $(this).toggleClass('large');
         // console.time('relayout');
-        $demo.isotope('reLayout');
+        $container.isotope('reLayout');
         // console.timeEnd('relayout');
       });
       
diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html
index b55e595..f830215 100644
--- a/_posts/demos/2011-01-02-adding-items.html
+++ b/_posts/demos/2011-01-02-adding-items.html
@@ -18,11 +18,11 @@ related: methods
     </ul>
   </section>
 
-  <div id="demo" class="iso-container">
+  <div id="container" class="iso-container">
     {% for element in site.elements_best_of limit:10 %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
 
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../src/mini-modernizr.js"></script>
@@ -34,9 +34,9 @@ related: methods
   <script>
     $(function(){
 
-      var $demo = $('#demo');
+      var $container = $('#container');
     
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
         getSortData : {
           symbol : function( $elem ) {
diff --git a/_posts/demos/2011-01-02-infinite-scroll.html b/_posts/demos/2011-01-02-infinite-scroll.html
index bad81b7..c9dd8db 100644
--- a/_posts/demos/2011-01-02-infinite-scroll.html
+++ b/_posts/demos/2011-01-02-infinite-scroll.html
@@ -10,11 +10,11 @@ infinite_scroll: true
     <p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout.</p>
   </section>
 
-  <div id="demo" class="iso-container variable-sizes">
+  <div id="container" class="iso-container variable-sizes">
     {% for element in site.elements_ordered limit:20 %}
       {% include element-partial.html %}
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <nav id="page_nav">
     <a href="../pages/2.html"></a>
@@ -30,13 +30,13 @@ infinite_scroll: true
   <script>
     $(function(){
 
-      var $demo = $('#demo');
+      var $container = $('#container');
     
-      $demo.isotope({
+      $container.isotope({
         itemSelector : '.element',
       });
       
-      $demo.infinitescroll({
+      $container.infinitescroll({
         navSelector  : '#page_nav',    // selector for the paged navigation 
         nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
         itemSelector : '.element',     // selector for all items you'll retrieve
@@ -50,7 +50,7 @@ infinite_scroll: true
         },
         // call Isotope as a callback
         function( newElements ) {
-          $demo.isotope( 'appended', $( newElements ) ); 
+          $container.isotope( 'appended', $( newElements ) ); 
         }
       );
       
diff --git a/_posts/demos/2011-01-11-images.html b/_posts/demos/2011-01-11-images.html
index f3defcd..81640da 100644
--- a/_posts/demos/2011-01-11-images.html
+++ b/_posts/demos/2011-01-11-images.html
@@ -19,13 +19,13 @@ photos:
 
   </section>
 
-  <div id="demo" class="iso-container photos">
+  <div id="container" class="iso-container photos">
     {% for photo in page.photos %}
       <div class="photo">
         {{ photo }}
       </div>
     {% endfor %}
-  </div> <!-- #demo -->
+  </div> <!-- #container -->
   
   <nav id="page_nav">
     <a href="../pages/2.html"></a>
@@ -41,9 +41,9 @@ photos:
   <script>
     $(function(){
 
-      var $demo = $('#demo');
+      var $container = $('#container');
     
-      $demo.imagesLoaded( function(){
+      $container.imagesLoaded( function(){
         $(this).isotope({
           itemSelector : '.photo',
         });
diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown
index ff9b36d..78db442 100644
--- a/_posts/docs/2010-12-06-filtering.mdown
+++ b/_posts/docs/2010-12-06-filtering.mdown
@@ -17,7 +17,7 @@ Each item element has several identifying classes. In this case, `transition`, `
 
 {% highlight html %}
 
-<div id="demo" class="iso-container"> 
+<div id="container" class="iso-container"> 
   <div class="element transition metal">...</div>
   <div class="element post-transition metal">...</div>
   <div class="element alkali metal">...</div>
@@ -36,7 +36,7 @@ To show only `.metal` items, the jQuery script would be:
 
 {% highlight javascript %}
 
-$('#demo').isotope({ filter: '.metal' });
+$('#container').isotope({ filter: '.metal' });
 
 {% endhighlight %}
 
@@ -65,7 +65,7 @@ Here we set the filter for each link with a `data-filter` attribute. In our jQue
 
 $('#filters a').click(function(){
   var selector = $(this).attr('data-filter');
-  $('#demo').isotope({ filter: selector });
+  $('#container').isotope({ filter: selector });
   return false;
 });
 
diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown
index 25c8a51..bda3efb 100644
--- a/_posts/docs/2010-12-07-sorting.mdown
+++ b/_posts/docs/2010-12-07-sorting.mdown
@@ -18,7 +18,7 @@ In our example, each item element has several data points that can be used for s
 
 {% highlight html %}
 
-<div id="demo">
+<div id="container">
   <div class="element transition metal" data-category="transition"> 
     <p class="number">79</p> 
     <h3 class="symbol">Au</h3> 
@@ -47,7 +47,7 @@ In the example above, to get element name, we would need to get the text from th
 
 {% highlight javascript %}
 
-$('#demo').isotope({
+$('#container').isotope({
   getSortData : {
     name : function ( $elem ) {
       return $elem.find('.name').text();
@@ -113,7 +113,7 @@ With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'
 
 {% highlight javascript %}
 
-$('#demo').isotope({ sortBy : 'symbol' });
+$('#container').isotope({ sortBy : 'symbol' });
 
 {% endhighlight %}
 
@@ -125,7 +125,7 @@ By default, Isotope sorts data in ascension. If our data for name is "Gold, Anti
 
 {% highlight javascript %}
 
-$('#demo').isotope({ 
+$('#container').isotope({ 
   sortBy : 'name',
   sortAscending : false
 });
@@ -155,7 +155,7 @@ When one of these links is clicked, we can use the `href` attribute as the value
 $('#sort a').click(function(){
   // get href attribute, minus the '#'
   var sortName = $(this).attr('href').slice(1);
-  $('#demo').isotope({ sortBy : sortName });
+  $('#container').isotope({ sortBy : sortName });
   return false;
 });
 
diff --git a/index.html b/index.html
index 8a070f2..069b4d5 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@ layout: nil
         <li><a href="#show-all" data-filter="*" class="selected">show all</a></li>
         <li><a href="#features" data-filter=".feature">features</a></li>
         <li><a href="#docs" data-filter=".doc">docs</a></li>
-        <li><a href="#demos" data-filter=".demo">demos</a></li>
+        <li><a href="#containers" data-filter=".demo">demos</a></li>
       </ul>
     </div>
     <div class="option-combo">