File: D:/web/expressmusic/isotope-docs/isotope-docs/index.html
<!doctype html>
<html class="export">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="filter & sort magical layouts">
<title>Isotope</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css" media="screen">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@metafizzyco">
<meta name="twitter:url" content="http://isotope.metafizzy.co/index.html">
<meta name="twitter:title" content="Isotope">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--index" data-page="index">
<div class="nav">
<h1 class="nav__title"><a href=".">Isotope</a></h1>
<ol class="site-nav">
<li class="site-nav__item site-nav__item--filtering">
<a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
<li class="site-nav__item site-nav__item--sorting">
<a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
<li class="site-nav__item site-nav__item--layout ">
<a class="site-nav__item__link" href="layout.html">Layout</a>
</li>
<li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
<a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
<ul class="sub-nav">
<li class="sub-nav__item sub-nav__item--masonry">
<a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
<li class="sub-nav__item sub-nav__item--fitrows">
<a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
<li class="sub-nav__item sub-nav__item--vertical">
<a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
<li class="sub-nav__item sub-nav__item--packery">
<a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
<li class="sub-nav__item sub-nav__item--cellsbyrow">
<a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
<li class="sub-nav__item sub-nav__item--masonryhorizontal">
<a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
<li class="sub-nav__item sub-nav__item--fitcolumns">
<a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
<li class="sub-nav__item sub-nav__item--cellsbycolumn">
<a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
<li class="sub-nav__item sub-nav__item--horizontal">
<a class="sub-nav__item__link" href="layout-modes/horizontal.html">horizontal</a></li>
</ul>
</li>
<li class="site-nav__item site-nav__item--options">
<a class="site-nav__item__link" href="options.html">Options</a></li>
<li class="site-nav__item site-nav__item--methods">
<a class="site-nav__item__link" href="methods.html">Methods</a></li>
<li class="site-nav__item site-nav__item--events">
<a class="site-nav__item__link" href="events.html">Events</a></li>
<li class="site-nav__item site-nav__item--license">
<a class="site-nav__item__link" href="license.html">License</a></li>
<li class="site-nav__item site-nav__item--appendix">
<a class="site-nav__item__link" href="appendix.html">Appendix</a></li>
<li class="site-nav__item site-nav__item--faq">
<a class="site-nav__item__link" href="faq.html">FAQ</a></li>
</ol>
<ul class="page-nav" data-js-module="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#install">Install</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#download">Download</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cdn">CDN</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#package-managers">Package managers</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#license">License</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#commercial-license">Commercial license</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#open-source-license">Open source license</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#getting-started">Getting started</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#html">HTML</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#css">CSS</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-jquery">Initialize with jQuery</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-in-html">Initialize in HTML</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#next">Next</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#v1">v1</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#isotope-in-use">Isotope in use</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#twitter-updates-from-metafizzyco">Twitter updates from @metafizzyco</a></li>
</ul>
</div>
<div class="hero">
<div class="primary-content">
<h1 class="hero__title">Isotope</h1>
<p class="hero__tagline">Filter & sort magical layouts</p>
<div class="hero__big-buttons clearfix">
<a class="hero__big-buttons__button" href="isotope.pkgd.min.js">
<i class="icon icon-file-download"></i>
Download isotope.​pkgd.​min.js
</a>
<a class="hero__big-buttons__button" href="https://github.com/metafizzy/isotope">
<i class="icon icon-github"></i>
Isotope on GitHub
</a>
</div>
<div class="big-demo" data-js-module="hero-demo">
<div class="ui-group">
<h3 class="ui-group__title">Filter</h3>
<div class="filters button-group js-radio-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".metal">metal</button>
<button class="button" data-filter=".transition">transition</button>
<button class="button" data-filter="ium">–ium</button>
</div>
</div>
<div class="ui-group">
<h3 class="ui-group__title">Sort</h3>
<div class="sort-by button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
</div>
</div>
<pre class="code-display"><code>$grid.isotope({
itemSelector: <span class="string">'.element-item'</span>,
layoutMode: <span class="string">'fitRows'</span>,
...
})</code></pre>
<div class="grid">
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Mercury</h5>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Tellurium</h5>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Bismuth</h5>
<p class="symbol">Bi</p>
<p class="number">83</p>
<p class="weight">208.980</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Lead</h5>
<p class="symbol">Pb</p>
<p class="number">82</p>
<p class="weight">207.2</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Gold</h5>
<p class="symbol">Au</p>
<p class="number">79</p>
<p class="weight">196.967</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Potassium</h5>
<p class="symbol">K</p>
<p class="number">19</p>
<p class="weight">39.0983</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Sodium</h5>
<p class="symbol">Na</p>
<p class="number">11</p>
<p class="weight">22.99</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cadmium</h5>
<p class="symbol">Cd</p>
<p class="number">48</p>
<p class="weight">112.411</p>
</div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h5 class="name">Calcium</h5>
<p class="symbol">Ca</p>
<p class="number">20</p>
<p class="weight">40.078</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Rhenium</h5>
<p class="symbol">Re</p>
<p class="number">75</p>
<p class="weight">186.207</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Thallium</h5>
<p class="symbol">Tl</p>
<p class="number">81</p>
<p class="weight">204.383</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Antimony</h5>
<p class="symbol">Sb</p>
<p class="number">51</p>
<p class="weight">121.76</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cobalt</h5>
<p class="symbol">Co</p>
<p class="number">27</p>
<p class="weight">58.933</p>
</div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h5 class="name">Ytterbium</h5>
<p class="symbol">Yb</p>
<p class="number">70</p>
<p class="weight">173.054</p>
</div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h5 class="name">Argon</h5>
<p class="symbol">Ar</p>
<p class="number">18</p>
<p class="weight">39.948</p>
</div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h5 class="name">Nitrogen</h5>
<p class="symbol">N</p>
<p class="number">7</p>
<p class="weight">14.007</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Uranium</h5>
<p class="symbol">U</p>
<p class="number">92</p>
<p class="weight">238.029</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Plutonium</h5>
<p class="symbol">Pu</p>
<p class="number">94</p>
<p class="weight">(244)</p>
</div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/nFrte">Edit this demo on CodePen</a>
</p>
</div>
</div>
</div>
<div id="content" class="main">
<div class="primary-content">
<h2 id="install">Install</h2>
<h3 id="download">Download</h3>
<ul>
<li><a href="isotope.pkgd.js">isotope.pkgd.js</a> un-minified, or</li>
<li><a href="isotope.pkgd.min.js">isotope.pkgd.min.js</a> minified</li>
</ul>
<h3 id="cdn">CDN</h3>
<p>Link directly to <a href="https://cdnjs.com/libraries/jquery.isotope">Isotope files on cdnjs</a>.</p>
<pre><code class="html"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="title">script</span>></span>
<span class="comment"><!-- or --></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="title">script</span>></span>
</code></pre>
<h3 id="package-managers">Package managers</h3>
<p>Install with Bower: <code>bower install isotope --save</code></p>
<p><a href="https://www.npmjs.com/package/isotope-layout">Install with npm</a>: <code>npm install isotope-layout</code></p>
<h2 id="license">License</h2>
<h3 id="commercial-license">Commercial license</h3>
<p>If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. <a href="license.html">Read more about Isotope commercial licensing</a>.</p>
<p>Once purchased, you’ll receive a commercial license PDF and be all set to use Isotope in your commercial applications.</p>
<div class="buy-button-trio">
<a class="buy-button" href="https://app.simplegoods.co/i/WFOLIVJF">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Developer</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for 1 developer</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">25</span>
</span>
</a>
<a class="buy-button" href="https://app.simplegoods.co/i/QZAXGOUY">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Team</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for up to 8 developers</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">110</span>
</span>
</a>
<a class="buy-button" href="https://app.simplegoods.co/i/NWONVKMO">
<span class="buy-button__project">Isotope Commercial</span>
<span class="buy-button__title">Organization</span>
<span class="buy-button__license">License</span>
<span class="buy-button__for">for Unlimited developers</span>
<span class="buy-button__price">
<span class="buy-button__price__dollar">$</span><span class="buy-button__price__value">290</span>
</span>
</a>
</div>
<h3 id="open-source-license">Open source license</h3>
<p>If you are creating an open source application under a license compatible with the <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL license v3</a>, you may use Isotope under the terms of the GPLv3. <a href="license.html">Read more about Isotope open source licensing</a>.</p>
<h2 id="getting-started">Getting started</h2>
<h3 id="html">HTML</h3>
<p>Include the Isotope <code>.js</code> file in your site.</p>
<pre><code class="html"><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/isotope.pkgd.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="title">script</span>></span>
</code></pre>
<p>Isotope works on a container element with a group of similar child items.</p>
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span>...<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item grid-item--width2"</span>></span>...<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span>...<span class="tag"></<span class="title">div</span>></span>
...
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<h3 id="css">CSS</h3>
<p>All sizing of items is handled by your CSS.</p>
<pre><code class="css"><span class="class">.grid-item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">25%</span></span></span>; }</span>
<span class="class">.grid-item--width2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50%</span></span></span>; }</span>
</code></pre>
<h3 id="initialize-with-jquery">Initialize with jQuery</h3>
<p>You can use Isotope as a jQuery plugin:
<code>$(<span class="string">'selector'</span>).isotope()</code>.</p>
<pre><code class="js">$(<span class="string">'.grid'</span>).isotope({
<span class="comment">// options</span>
itemSelector: <span class="string">'.grid-item'</span>,
layoutMode: <span class="string">'fitRows'</span>
});
</code></pre>
<h3 id="initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</h3>
<p>You can use Isotope with vanilla JS:
<code><span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( elem, options )</code>.
The <code><span class="isotope_keyword">Isotope</span>()</code> constructor accepts two arguments: the container element and an options object.</p>
<pre><code class="js"><span class="keyword">var</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">'.grid'</span>);
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( elem, {
<span class="comment">// options</span>
itemSelector: <span class="string">'.grid-item'</span>,
layoutMode: <span class="string">'fitRows'</span>
});
<span class="comment">// element argument can be a selector string</span>
<span class="comment">// for an individual element</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( <span class="string">'.grid'</span>, {
<span class="comment">// options</span>
});
</code></pre>
<h3 id="initialize-in-html">Initialize in HTML</h3>
<p>You can initialize Isotope in HTML, without writing any JavaScript. Add <code>js-isotope</code> to the class of the container element. <a href="options.html">Options</a> can be set with a <code>data-isotope-options</code> attribute.</p>
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid js-isotope"</span>
<span class="attribute">data-isotope-options</span>=<span class="value">'{ "itemSelector": ".item", "layoutMode": "fitRows" }'</span>></span>
</code></pre>
<div class="call-out">
<p>Options set in HTML must be valid JSON. Keys need to be quoted, for example <code><span class="string">"itemSelector"</span>:</code>. Note the HTML attribute <code>data-isotope-options</code> is set with single quotes <code>'</code>, but JSON entities use double-quotes <code>"</code>.</p>
</div>
<h2 id="next">Next</h2>
<p>Learn more about how to use Isotope:</p>
<ul>
<li><a href="filtering.html">Filtering</a></li>
<li><a href="sorting.html">Sorting</a></li>
<li><a href="layout.html">Layout</a></li>
</ul>
<h2 id="v1">v1</h2>
<p>Isotope is currently v2. See <a href="http://isotope.metafizzy.co/v1">isotope.metafizzy.co/v1</a> for documentation and resources for previous v1 version.</p>
<h2 id="isotope-in-use">Isotope in use</h2>
<p>Justin Bieber, <a href="http://www.tylerperry.com/entertainment/">Tyler Perry</a>, <a href="http://colonelsanders.com">Colonel Sanders</a>: they all have used Isotope.</p>
<p>Are you using Isotope? Tweet <a href="https://twitter.com/metafizzyco">@metafizzyco</a> or email <a href="mailto:yo@metafizzy.co">yo@metafizzy.co</a> to share your work and possibly get it featured here.</p>
<div class="in-use-grid go-wide" data-js-module="in-use-grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<a class="in-use-grid__item" href="http://patchwork.stylehatch.co/">
<p class="in-use-grid__item__title">Patchwork</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/d4c5KdG.jpg">
</a>
<a class="in-use-grid__item" href="http://1407bway.com/">
<p class="in-use-grid__item__title">1407 Broadway</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/BjZDpte.jpg">
</a>
<a class="in-use-grid__item" href="http://seriouslyamazing.si.edu/">
<p class="in-use-grid__item__title">Seriously Amazing | Smithsonian</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/844IN6P.jpg">
</a>
<a class="in-use-grid__item" href="http://www.tylerperry.com/entertainment/">
<p class="in-use-grid__item__title">TylerPerry.com - Entertainment</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/M4WWoiC.jpg">
</a>
<a class="in-use-grid__item" href="https://www.onnit.com/honor-roll/">
<p class="in-use-grid__item__title">Onnit Honor Roll – Onnit Labs</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/sjgd3S9.jpg">
</a>
<a class="in-use-grid__item" href="http://www.nytimes.com/interactive/2012/12/24/sports/basketball/pick-your-all-time-new-york-city-nba-team.html">
<p class="in-use-grid__item__title">Pick Your All-Time New York City N.B.A. Team</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/a8DsGOg.jpg">
</a>
<a class="in-use-grid__item" href="http://uk.rimmellondon.com/products/all">
<p class="in-use-grid__item__title">Products | Rimmel London</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/ykVIUTD.jpg">
</a>
<a class="in-use-grid__item" href="http://www.foxycart.com/features">
<p class="in-use-grid__item__title">Foxycart Features</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/jQmpZI2.jpg">
</a>
<a class="in-use-grid__item" href="http://www.bbc.com/future/bespoke/20140724-flight-risk/">
<p class="in-use-grid__item__title">Flight Risk | BBC</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/zDc6cDu.jpg">
</a>
<a class="in-use-grid__item" href="http://explore-kc.com/press.html">
<p class="in-use-grid__item__title">Explore KC | Press</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/V8M2dY7.jpg">
</a>
<a class="in-use-grid__item" href="http://bench.li/">
<p class="in-use-grid__item__title">Design Inspiration / Bench.li</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/Jr3XuHp.jpg">
</a>
<a class="in-use-grid__item" href="http://gimmickbook.com/">
<p class="in-use-grid__item__title">Gimmick Book</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/IuLghbY.jpg">
</a>
<a class="in-use-grid__item" href="http://www.createthebridge.com/portfolio.html">
<p class="in-use-grid__item__title">Create the Bridge</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/TzesDQh.jpg">
</a>
<a class="in-use-grid__item" href="http://www.lexus.co.uk/amazing-in-motion/beyond-magazine/index.tmex#/AmazingInMotion">
<p class="in-use-grid__item__title">Lexus</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/hbzq0jU.jpg">
</a>
<a class="in-use-grid__item" href="http://www.youandwho.com/shirts">
<p class="in-use-grid__item__title">You and Who | Our Shirts</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/wjXQx5I.jpg">
</a>
<a class="in-use-grid__item" href="http://www.biodroid-entertainment.com/">
<p class="in-use-grid__item__title">Biodroid</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/ER6LINu.jpg">
</a>
<a class="in-use-grid__item" href="http://ortegagraphics.com/logos.html">
<p class="in-use-grid__item__title">Ortega Graphics | Logos</p>
<img class="in-use-grid__item__image" src="http://i.imgur.com/RZj2El4.jpg">
</a>
</div>
<h2 id="twitter-updates-from-metafizzyco">Twitter updates from <a href="https://twitter.com/metafizzyco">@metafizzyco</a></h2>
<p><a class="twitter-timeline" data-dnt="true" href="https://twitter.com/search?q=isotope%20from%3Ametafizzyco" data-widget-id="494524574201966592">Tweets about Isotope</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>
</div>
<div class="site-footer">
<div class="primary-content">
<p class="footer-copy">Follow <a href="https://twitter.com/metafizzyco">@metafizzyco on Twitter for Isotope updates</a></p>
</div>
<div class="site-footer__brand">
<a class="site-footer__brand__logo" href="http://metafizzy.co">M<span class="etafizzy">etafizzy</span></a>
<span class="site-footer__brand__copyright">© 2011–2015</span>
</div>
</div>
<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js"></script>
<!-- Google Analytics - Remove this if you copy/pasted this page -->
<script>
// Google Analytics
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-58739927-3','auto');ga('send','pageview');
</script>
</body>
</html>