fix sandbox examples; update README code

Ref #775
metafizzy · Jun 3, 2015 · 06b26b2 · 06b26b2
1 parent 4298d66
commit 06b26b2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 26 deletions.
diff --git a/README.mdown b/README.mdown
@@ -41,40 +41,41 @@ If you are creating an open source application under a license compatible with t
 
 ## Initialize
 
-### In JavaScript
+With jQuery
 
 ``` js
-// jQuery
-$('#container').isotope({
+$('.grid').isotope({
   // options...
-  itemSelector: '.item',
+  itemSelector: '.grid-item',
   masonry: {
     columnWidth: 200
   }
 });
 ```
 
+With vanilla JavaScript
+
 ``` js
 // vanilla JS
-var container = document.querySelector('#container');
-var iso = new Isotope( container, {
+var grid = document.querySelector('.grid');
+var iso = new Isotope( grid, {
   // options...
-  itemSelector: '.item',
+  itemSelector: '.grid-item',
   masonry: {
     columnWidth: 200
   }
 });
 ```
 
-### In HTML
+With HTML
 
 Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`.
 
 ``` html
-<div id="container" class="js-isotope"
-  data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'>
-  <div class="item"></div>
-  <div class="item"></div>
+<div class="grid js-isotope"
+  data-isotope-options='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
   ...
 </div>
 ```

diff --git a/sandbox/bottom-up.html b/sandbox/bottom-up.html
@@ -78,7 +78,6 @@ <h1>bottom up</h1>
     <div class="item"></div>
   </div>
 
-<script src="../bower_components/classie/classie.js"></script>
 <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
 <script src="../bower_components/eventEmitter/EventEmitter.min.js"></script>
 <script src="../bower_components/eventie/eventie.js"></script>
@@ -90,26 +89,35 @@ <h1>bottom up</h1>
 <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
 <script src="../bower_components/outlayer/item.js"></script>
 <script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../bower_components/masonry/masonry.js"></script>
 
-<script src="../masonry.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/layout-mode.js"></script>
+<script src="../js/isotope.js"></script>
+<script src="../js/layout-modes/masonry.js"></script>
+<script src="../js/layout-modes/fit-rows.js"></script>
 
 <script>
 docReady( function() {
   ( function() {
     var container = document.querySelector('#basic');
-    var msnry = new Masonry( container, {
+    var iso = new Isotope( container, {
       isOriginTop: false,
-      columnWidth: 60
+      masonry: {
+        columnWidth: 60
+      }
     });
   })();
 
   ( function() {
     var container = document.querySelector('#stamped');
-    var msnry = new Masonry( container, {
+    var iso = new Isotope( container, {
       itemSelector: '.item',
       isOriginTop: false,
-      columnWidth: 60,
-      gutter: 10,
+      masonry: {
+        columnWidth: 60,
+        gutter: 10,
+      },
       stamp: '.stamp'
     });
   })();

diff --git a/sandbox/combination-filters-inclusive.html b/sandbox/combination-filters-inclusive.html
@@ -196,7 +196,8 @@ <h3>Shape</h3>
 </div>
 
 
-<script src="../bower_components/jquery/jquery.js"></script>
+<script src="../bower_components/jquery/dist/jquery.js"></script>
+
 <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
 <script src="../bower_components/eventie/eventie.js"></script>
 <script src="../bower_components/doc-ready/doc-ready.js"></script>

diff --git a/sandbox/combination-filters.html b/sandbox/combination-filters.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
 
-  <title>masonry</title>
+  <title>combination filters</title>
 
   <link rel="stylesheet" href="sandbox.css" />
   <style>
@@ -196,14 +196,16 @@ <h3>Shape</h3>
 </div>
 
 
-<script src="../bower_components/jquery/jquery.js"></script>
+<script src="../bower_components/jquery/dist/jquery.js"></script>
+
 <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
 <script src="../bower_components/eventie/eventie.js"></script>
 <script src="../bower_components/doc-ready/doc-ready.js"></script>
 <script src="../bower_components/get-style-property/get-style-property.js"></script>
 <script src="../bower_components/get-size/get-size.js"></script>
 <script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
 <script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
 <script src="../bower_components/outlayer/item.js"></script>
 <script src="../bower_components/outlayer/outlayer.js"></script>
 <script src="../bower_components/masonry/masonry.js"></script>

diff --git a/sandbox/sorting.html b/sandbox/sorting.html
@@ -143,9 +143,9 @@ <h2 class="name">Actinium</h2>
 <script src="../bower_components/outlayer/item.js"></script>
 <script src="../bower_components/outlayer/outlayer.js"></script>
 
+<script src="../js/layout-mode.js"></script>
 <script src="../js/item.js"></script>
 <script src="../js/isotope.js"></script>
-<script src="../js/layout-mode.js"></script>
 <script src="../js/layout-modes/fit-rows.js"></script>
 
 <script>

diff --git a/sandbox/transition-bug.html b/sandbox/transition-bug.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
 
-  <title>filter sort</title>
+  <title>transition bug</title>
 
   <link rel="stylesheet" href="sandbox.css" />
   <style>
@@ -12,7 +12,7 @@
 </head>
 <body>
 
-  <h1>filter sort</h1>
+  <h1>transition bug</h1>
 
 <div>
   <button id="bug-me">Bug me</button>
@@ -50,7 +50,6 @@ <h2 class="name">Antimony</h2>
 <script src="../js/layout-mode.js"></script>
 <script src="../js/isotope.js"></script>
 <script src="../js/layout-modes/fit-rows.js"></script>
-<script src="../js/layout-modes/cells-by-row.js"></script>
 <script src="../js/layout-modes/vertical.js"></script>
 
 <script>