playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 Commits
3 Branches
54 Tags
2.2 MiB
 
 
 
Tree: 12f0593d19
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '12f0593d19'
${ noResults }
isotope/_posts/docs/2010-12-01-introduction.mdown

4.3 KiB
Raw Blame History

title category layout related
Introduction docs doc etc

Isotope: An exquisite jQuery plugin for magical layouts

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.
  • Interoperability: features can be utilized together for a cohesive experience.
  • Progressive enhancement: Isotope's animation engine takes advantage of CSS transitions and transforms when available, but will also fall back to Javascript animation for lesser browsers.

License

Commercial use requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at metafizzy.co.

Use in non-commercial and personal applications is free.

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.

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 %}

...
...
...
...

{% endhighlight %}

Script

{% highlight javascript %}

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

{% endhighlight %}

There are a number of options you can specify. Within the options is where you can set the layout mode, filter items, and sort items.

Code repository

This project lives on GitHub at github.com/desandro/isotope. There you can grab the latest code and download this entire project.

A word about moderation

Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn't mean you necessarily should. For each each feature you implement with Isotope, consider the benefit you extend to your users, at the cost of another level of complexity to your interface.

Acknowledgments