Browse Source

docs : better docs on modified layout modes

pull/139/head
David DeSandro 13 years ago
parent
commit
60cad1ca54
  1. 2
      _posts/custom-layout-modes/2011-05-18-centered-masonry.html
  2. 2
      _posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html
  3. 2
      _posts/custom-layout-modes/2011-07-14-masonry-gutters.html
  4. 21
      _posts/docs/2010-12-05-layout-modes.mdown
  5. 6
      _posts/docs/2011-05-25-extending-isotope.mdown

2
_posts/custom-layout-modes/2011-05-18-centered-masonry.html

@ -11,7 +11,7 @@ category: custom-layout-modes
</style>
<section id="copy">
<p>Modified masonry layout mode for centered container.</p>
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for centered container.</p>
</section>
<section id="options" class="clearfix">

2
_posts/custom-layout-modes/2011-07-07-masonry-corner-stamp.html

@ -20,7 +20,7 @@ category: custom-layout-modes
</style>
<section id="copy">
<p>Modified masonry layout mode methods for corner stamp. This is a branch of Masonry. See <a href="http://jsfiddle.net/desandro/M8EYn/embedded/result/">Masonry corner stamp demo</a>.</p>
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for corner stamp. An element can be "stamped" in the right top corner.</p>
<p>Set <code>cornerStampSelector</code> within <code>masonry</code> options. <code>itemSelector</code> needs to be set as well.</p>
{% highlight javascript %}

2
_posts/custom-layout-modes/2011-07-14-masonry-gutters.html

@ -15,7 +15,7 @@ category: custom-layout-modes
</style>
<section id="copy">
<p>Modified masonry layout mode methods for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p>
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p>
<p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p>
{% highlight javascript %}

21
_posts/docs/2010-12-05-layout-modes.mdown

@ -14,6 +14,7 @@ toc:
- { title: straightAcross, anchor: straightacross }
- { title: straightDown, anchor: straightdown }
- { title: Horizontal layouts, anchor: horizontal_layouts }
- { title: Modified layout modes, anchor: modified_layout_modes }
---
@ -173,4 +174,22 @@ Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and strai
height: 480px;
}
{% endhighlight %}
{% endhighlight %}
## Modified layout modes
[Isotope's methods can be extended and overwritten](extending-isotope.html) to shim-in additional functionality. See these modified layout modes:
+ [**Centered masonry**](../custom-layout-modes/centered-masonry.html)
+ [**Masonry corner stamp**](../custom-layout-modes/masonry-corner-stamp.html)
+ [**Masonry gutters**](../custom-layout-modes/masonry-gutters.html)
To use these mods, copy the revised methods found in the demos' page source. They look like:
{% highlight javascript %}
$.Isotope.prototype._masonryReset = function() {
// modified code..
};
{% endhighlight %}

6
_posts/docs/2011-05-25-extending-isotope.mdown

@ -39,7 +39,8 @@ $.extend( $.Isotope.prototype, {
{% endhighlight %}
[**See Custom layout mode: Category Rows**](../customer-layout-modes/category-rows.html)
[**See Custom layout mode: Category Rows**](../custom-layout-modes/category-rows.html)
[**See Custom layout mode: Spine align**](../custom-layout-modes/spine-align.html)
All of the [default layout modes](../docs/layout-modes.html) follow this pattern. We'll look at the code behind the _fitRows_ layout mode.
@ -169,4 +170,5 @@ _masonryResizeChanged : function() {
return this._checkIfSegmentsChanged();
},
{% endhighlight %}
{% endhighlight %}

Loading…
Cancel
Save