isotope/_posts/docs/2010-12-01-introduction.mdown

---

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

---

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

## Features

+ **Layout modes**: Intelligent, dynamic layouts that can't be achieved with CSS alone.
+ **Filtering**: Hide and reveal item elements easily with jQuery selectors.
+ **Sorting**: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
+ **Interoperabilty**: features can be utilized together for a cohesive experience.
+ **Progressive enhancement**: Isotope's engaging animations take advantage of the best CSS transition and transform features when available, but 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. This includes portfolio sites and premium templates. Commercial licenses may be purchased at <a href="http://metafizzy.co">metafizzy.co</a>.
</p>

Use in non-commercial and personal applications is free.

## 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.... %%

## 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