diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index 3ab3fe0..7ab359a 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -67,6 +67,56 @@ $('#container').isotope({ 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). +### CSS + +Add these styles to your CSS for [filtering](filtering.html), [animation](animating.html) with CSS transitions, and [adding items](adding-items.html). + +{% highlight css %} + +/**** Isotope Filtering ****/ + +.isotope-item { + z-index: 2; +} + +.isotope-hidden.isotope-item { + pointer-events: none; + z-index: 1; +} + +/**** Isotope CSS3 transitions ****/ + +.isotope, +.isotope .isotope-item { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; + transition-duration: 0.8s; +} + +.isotope { + -webkit-transition-property: height, width; + -moz-transition-property: height, width; + transition-property: height, width; +} + +.isotope .isotope-item { + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + transition-property: transform, opacity; +} + +/**** disabling Isotope CSS3 transitions ****/ + +.isotope.no-transition, +.isotope.no-transition .isotope-item, +.isotope .isotope-item.no-transition { + -webkit-transition-duration: 0s; + -moz-transition-duration: 0s; + transition-duration: 0s; +} + +{% endhighlight %} + ## 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 follow development. diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown index cf81113..daecfa5 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -8,6 +8,7 @@ toc: - { title: insert method, anchor: insert_method } - { title: appended method, anchor: appended_method } - { title: Prepending, anchor: prepending } + - { title: Recommended CSS, anchor: recommended_css } --- @@ -55,4 +56,22 @@ var $newItems = $('
' $('#container').prepend( $newItems) .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); -{% endhighlight %} \ No newline at end of file +{% endhighlight %} + +## Recommended CSS + +You'll need these styles in your CSS for the reveal animation when adding items. + +{% highlight css %} + +/**** disabling Isotope CSS3 transitions ****/ + +.isotope.no-transition, +.isotope.no-transition .isotope-item, +.isotope .isotope-item.no-transition { + -webkit-transition-duration: 0s; + -moz-transition-duration: 0s; + transition-duration: 0s; +} + +{% endhighlight %}