---

title: Introduction
category: docs
layout: doc
related: etc

---

<p class="tagline">Isotope: An exquisite jQuery plugin for magical layouts</p>

## Features

+ [**Layout modes**](layout-modes.html): Intelligent, dynamic layouts that can't be achieved with CSS alone.
+ [**Filtering**](filtering.html): Hide and reveal item elements easily with jQuery selectors.
+ [**Sorting**](sorting.html): Re-order item elements with sorting. Sorting data can be extracted from just about anything.
+ **Interoperability**: features can be utilized together for a cohesive experience.
+ **Progressive enhancement**: Isotope's [animation engine](animating.html) takes advantage of CSS transitions and transforms when available, but will also fall back to Javascript animation for lesser browsers.

## License

<p id="commercial">
  <strong>Commercial use requires purchase of one-time license fee per developer seat.</strong> Commercial use includes any application that makes you money &mdash; portfolio sites, premium templates, etc. Commercial licenses may be purchased at <a href="http://metafizzy.co">metafizzy.co</a>.
</p>

Use in non-commercial and personal applications is free.

<p class="as-is">
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</p>


## Getting started

Isotope requires jQuery 1.4.3 and greater.

### Markup

Isotope works on a container element with a group of similar child items.

{% highlight html %}

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

{% endhighlight %}

### Script

{% highlight javascript %}

$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});

{% endhighlight %}

There are a number of [options](options.html) you can specify.  Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html),  and [sort items](sorting.html).

## Code repository

This project lives on GitHub at [github.com/desandro/isotope](http://github.com/desandro/isotope). There you can grab the latest code and download this entire project.

## Acknowledgments

+ [**Faruk Ateş**](http://farukat.es) and [**Paul Irish**](http://paul-irish.com) for [Modernizr](http://www.modernizr.com/)
+ [**Louis-Rémi Babé**](http://twitter.com/#!/Louis_Remi) for [jQuery smartresize](https://github.com/lrbabe/jquery-smartresize) which is used within Isotope and for [jQuery transform](https://github.com/lrbabe/jquery.transform.js) which clued me in to using jQuery 1.4.3's CSS   hooks
+ [**Jacek Galanciak**](http://razorjack.net/) for [jQuery Quicksand](http://razorjack.net/quicksand/), an early kernel of inspiration
+ [**Ralph Holzmann**](http://twitter.com/#!/ralphholzmann) for re-writing the [jQuery Plugins/Authoring tutorial](http://docs.jquery.com/Plugins/Authoring) and opened my eyes to [Plugin Methods](http://docs.jquery.com/Plugins/Authoring#Plugin_Methods) pattern
+ [**Eric Hynds**](http://www.erichynds.com/) for his article [Using $.widget.bridge Outside of the Widget Factory](http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/) which provided the architecture for the plugin
+ [**Juriy Zaytsev aka "kangax"**](http://perfectionkills.com) for [getStyleProperty](http://perfectionkills.com/feature-testing-css-properties/) which is used within Isotope