playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

docs : index gets sweet Isotoped menu

pull/14/head
David DeSandro 14 years ago
parent
7c69fbe456
commit
93d0c56133
20 changed files with 147 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _layouts/demo.html
  2. 2
      _layouts/doc.html
  3. 1
      _posts/demos/2010-12-13-elements-complete.html
  4. 1
      _posts/demos/2010-12-16-elements-partial.html
  5. 1
      _posts/demos/2010-12-29-layout-modes.html
  6. 1
      _posts/demos/2010-12-30-filtering.html
  7. 1
      _posts/demos/2010-12-30-sorting.html
  8. 1
      _posts/demos/2010-12-31-relayout.html
  9. 1
      _posts/demos/2011-01-03-adding-items.html
  10. 3
      _posts/docs/2010-12-01-introduction.mdown
  11. 1
      _posts/docs/2010-12-02-getting-started.mdown
  12. 1
      _posts/docs/2010-12-03-options.mdown
  13. 13
      _posts/docs/2010-12-04-methods.mdown
  14. 1
      _posts/docs/2010-12-05-layout-modes.mdown
  15. 1
      _posts/docs/2010-12-06-filtering.mdown
  16. 4
      _posts/docs/2010-12-07-sorting.mdown
  17. 1
      _posts/docs/2010-12-09-animating.mdown
  18. 1
      _posts/docs/2010-12-10-adding-items.mdown
  19. 37
      css/style.css
  20. 84
      index.html

2
_layouts/demo.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{ page.title }}</title> <title>Isotope Demo: {{ page.title }}</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />

2
_layouts/doc.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{ site.name }}: {{ page.title }}</title> <title>{{ site.name }} Docs: {{ page.title }}</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />

1
_posts/demos/2010-12-13-elements-complete.html
Unescape View File

@ -2,6 +2,7 @@
title: Elements Complete title: Elements Complete
layout: elements layout: elements
category: demos category: demos
related: etc
--- ---
<div id="demo" class="iso-container clickable"> <div id="demo" class="iso-container clickable">

1
_posts/demos/2010-12-16-elements-partial.html
Unescape View File

@ -2,6 +2,7 @@
title: Elements Partial title: Elements Partial
layout: elements layout: elements
category: demos category: demos
related: etc
--- ---
<div id="demo" class="iso-container clickable"> <div id="demo" class="iso-container clickable">

1
_posts/demos/2010-12-29-layout-modes.html
Unescape View File

@ -2,6 +2,7 @@
title: Layout Modes title: Layout Modes
layout: demo layout: demo
category: demos category: demos
related: layouts
--- ---
<section id="copy"> <section id="copy">

1
_posts/demos/2010-12-30-filtering.html
Unescape View File

@ -2,6 +2,7 @@
title: Filtering title: Filtering
layout: demo layout: demo
category: demos category: demos
related: filtering
--- ---
<section id="options" class="clearfix"> <section id="options" class="clearfix">

1
_posts/demos/2010-12-30-sorting.html
Unescape View File

@ -2,6 +2,7 @@
title: Sorting title: Sorting
layout: demo layout: demo
category: demos category: demos
related: sorting
--- ---
<section id="copy"> <section id="copy">

1
_posts/demos/2010-12-31-relayout.html
Unescape View File

@ -2,6 +2,7 @@
title: reLayout title: reLayout
layout: demo layout: demo
category: demos category: demos
related: methods
--- ---
<section id="copy"> <section id="copy">

1
_posts/demos/2011-01-03-adding-items.html
Unescape View File

@ -2,6 +2,7 @@
title: Adding items title: Adding items
layout: demo layout: demo
category: demos category: demos
related: methods
--- ---
<section id="copy"> <section id="copy">

3
_posts/docs/2010-12-01-introduction.mdown
Unescape View File

@ -3,11 +3,14 @@
title: Introduction title: Introduction
category: docs category: docs
layout: doc layout: doc
related: etc
--- ---
Isotope is a layout, filtering, and sorting plugin for jQuery. Isotope is a layout, filtering, and sorting plugin for jQuery.
Top notch performance that can handle
## Features ## Features
### Layout ### Layout

1
_posts/docs/2010-12-02-getting-started.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Getting Started title: Getting Started
category: docs category: docs
layout: doc layout: doc
related: etc
--- ---

1
_posts/docs/2010-12-03-options.mdown
Unescape View File

@ -4,6 +4,7 @@ title: Options
category: docs category: docs
layout: doc layout: doc
body_class: option-def body_class: option-def
related: etc
--- ---

13
_posts/docs/2010-12-04-methods.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Methods title: Methods
category: docs category: docs
layout: doc layout: doc
related: methods
--- ---
@ -15,7 +16,8 @@ layout: doc
{% endhighlight %} {% endhighlight %}
Adds elements to the pool of item elements of the container, but does sort, filter or layout. Adds elements to the pool of item elements of the container, but does sort, filter or layout. More details in [Adding items](adding-items.html).
## appended ## appended
@ -25,9 +27,9 @@ Adds elements to the pool of item elements of the container, but does sort, filt
{% endhighlight %} {% endhighlight %}
Adds elements via `addItems` method, then triggers `layout` just for those new elements. Adds elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. More details in [Adding items](adding-items.html).
Useful for Infinite Scroll. [**See Demo: Adding items**](../demos/adding-items.html).
## destroy ## destroy
@ -47,7 +49,9 @@ Removes Isotope functionality completely. Returns element back to pre-init state
{% endhighlight %} {% endhighlight %}
Appends elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. Appends elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. More details in [Adding items](adding-items.html).
[**See Demo: Adding items**](../demos/adding-items.html).
## layout ## layout
@ -77,7 +81,6 @@ Modifies options for plugin instance.
{% endhighlight %} {% endhighlight %}
Resets layout properties and lays-out every item element. Resets layout properties and lays-out every item element.
[**See Demo: reLayout**](../demos/relayout.html) [**See Demo: reLayout**](../demos/relayout.html)

1
_posts/docs/2010-12-05-layout-modes.mdown
Unescape View File

@ -4,6 +4,7 @@ title: Layout Modes
category: docs category: docs
layout: doc layout: doc
body_class: option-def body_class: option-def
related: layout
--- ---

1
_posts/docs/2010-12-06-filtering.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Filtering title: Filtering
category: docs category: docs
layout: doc layout: doc
related: filtering
--- ---

4
_posts/docs/2010-12-07-sorting.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Sorting title: Sorting
category: docs category: docs
layout: doc layout: doc
related: sorting
--- ---
@ -12,7 +13,7 @@ Isotope can rearrange item elements via sorting.
## Markup ## Markup
In our example, each item element has several data points that can be used for sorting. In our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category.
{% highlight html %} {% highlight html %}
@ -35,7 +36,6 @@ In our example, each item element has several data points that can be used for s
{% endhighlight %} {% endhighlight %}
There's the elemental symbol, number, name of the element, weight, and category.
## getSortData ## getSortData

1
_posts/docs/2010-12-09-animating.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Animating title: Animating
category: docs category: docs
layout: doc layout: doc
related: animating
--- ---

1
_posts/docs/2010-12-10-adding-items.mdown
Unescape View File

@ -3,6 +3,7 @@
title: Adding items title: Adding items
category: docs category: docs
layout: doc layout: doc
related: methods
--- ---

37
css/style.css
Unescape View File

@ -440,9 +440,46 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
} }
/**** Super list ****/
#super-list {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 40px;
}
#super-list li {
display: inline-block;
font-size: 28px;
line-height: 1.2em;
margin: 2px;
font-weight: 300;
}
#super-list li.feature { background: #111; }
#super-list li span,
#super-list li a {
display: block;
padding: 0.2em 0.5em;
}
#super-list li a {
color: #222;
/* font-weight: bold;*/
}
#super-list li.doc a { background: #3CF; }
#super-list li.demo a { background: #FC3; }
#super-list li a:hover,
#super-list li a.doc:hover,
#super-list li a.demo:hover {
background: white;
}
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; } .clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ /* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; } .clearfix { zoom: 1; }

84
index.html
Unescape View File

@ -1,20 +1,54 @@
--- ---
title: Index title: Index
layout: default layout: nil
--- ---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ site.name }}</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head> </head>
<body> <body>
<h1>{{ page.title }}</h1> <h1>{{ site.name }}</h1>
<h2>Docs</h2> <section id="options">
<ul> <h2>Filter</h2>
<ul id="filter" class="option-set floated clearfix">
<li><a href="#show-all" data-filter="*" class="selected">show all</a></li>
<li><a href="#features" data-filter=".feature">features</a></li>
<li><a href="#docs" data-filter=".doc">docs</a></li>
<li><a href="#demos" data-filter=".demo">demos</a></li>
</ul>
<h2>Sort</h2>
<ul id="sort" class="option-set floated clearfix">
<li><a href="#type" data-sort="original-order" class="selected">type</a></li>
<li><a href="#related" data-sort="related">related</a></li>
</ul>
</section>
<ul id="super-list">
<li class="feature" data-category="feature" data-related="etc"><span>Aggressively enhanced for CSS3 transforms &amp; transitions</span></li>
<li class="feature" data-category="feature" data-related="layout"><span>Dynamic, intelligent layouts</span></li>
<li class="feature" data-category="feature" data-related="filtering"><span>Reveal and hide items with filtering</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Re-order items with sorting</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Get sorting data from just about anything</span></li>
<li class="feature" data-category="feature" data-related="methods"><span>Built on jQuery UI's widget bridge for powerful methods</span></li>
{% for doc in site.categories.docs reversed %} {% for doc in site.categories.docs reversed %}
<li><a href=".{{ doc.url }}">{{ doc.title }}</a></li> <li class="doc" data-category="doc" data-related="{{ doc.related }}"><a href=".{{ doc.url }}">Docs: {{ doc.title }}</a></li>
{% endfor %} {% endfor %}
{% for demo in site.categories.demos reversed %}
<li class="demo" data-category="demo" data-related="{{ demo.related }}"><a href=".{{ demo.url }}">Demo: {{ demo.title }}</a></li>
{% endfor %}
</ul>
<h2>Docs</h2>
<ul>
</ul> </ul>
<h2>Demos</h2> <h2>Demos</h2>
@ -23,3 +57,43 @@ layout: default
<li><a href=".{{ demo.url }}">{{ demo.title }}</a></li> <li><a href=".{{ demo.url }}">{{ demo.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="src/mini-modernizr.js"></script>
<script src="src/jquery.opto-transform.js"></script>
<script src="src/jquery.smartresize.js"></script>
<script src="src/jquery.isotope.js"></script>
<script src="src/jquery.ui.widget.js"></script>
<script>
$(function(){
$list = $('#super-list');
$list.isotope({
layoutMode : 'fitRows',
getSortData : {
related : function( $elem ) {
return $elem.attr('data-related');
}
}
});
$('#filter a').click(function(){
var filterName = $(this).attr('data-filter');
$list.isotope({ filter : filterName });
return false;
});
$('#sort a').click(function(){
var sortName = $(this).attr('data-sort');
$list.isotope({ sortBy : sortName });
return false;
});
{% include option-buttons.js %}
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save