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

docs : homepage : use default layout; new jumbled up isotope container

pull/96/head
David DeSandro 14 years ago
parent
cce3c6b456
commit
8dea0b3b55
2 changed files with 136 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      css/style.css
  2. 188
      index.html

72
css/style.css
Unescape View File

@ -88,7 +88,8 @@ h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
h1, h2, #super-list, .element, .tagline, #index-list {
h1, h2, #super-list, .element, .tagline, #index-list,
.super-list .feature, .super-list .link {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
@ -625,8 +626,8 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
#super-list li a {
color: #222;
}
#super-list li.doc a { background: #3CF; }
#super-list li.demo a { background: #FC3; }
#super-list li.docs a { background: #3CF; }
#super-list li.demos a { background: #FC3; }
#super-list li.link a { background: #E58; color: white; }
#super-list li a:hover {
@ -675,33 +676,74 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
margin: 0;
}
#sites li {
.super-list .example {
list-style: none;
float: left;
width: 290px;
width: 230px;
margin: 5px;
}
#sites li a,
#sites li b,
#sites li img {
.super-list .example a,
.super-list .example b,
.super-list .example img {
display: block;
}
#sites li a {
width: 270px;
padding: 10px;
.super-list .example img { width: 100%; }
.super-list .example a {
background: #1F1E1D;
}
#sites li a:hover {
background: #333;
.super-list .example a:hover {
background: white;
color: #111;
}
#sites li b {
.super-list .example b {
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0.6em;
padding: 3px;
padding-top: 8px;
}
.super-list .link,
.super-list .feature {
font-size: 26px;
line-height: 1.2em;
font-weight: 300;
margin: 5px;
height: 90px;
}
.super-list .feature {
width: 330px;
padding: 10px;
background: #111;
}
.super-list .link {
width: 230px;
height: 110px;
}
.super-list .link a {
display: block;
padding: 10px;
height: 90px;
background: #E58;
color: white;
text-shadow: 0 -1px hsla( 0, 0%, 0%, 0.3 );
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.super-list .link a:hover {
text-shadow: none;
background: white;
color: #111;
}
/**** Infinite Scroll ****/

188
index.html
Unescape View File

@ -1,133 +1,93 @@
---
title: Index
layout: nil
title: Isotope
layout: default
category: homepage
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ site.name }}</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<h1>{{ site.name }}</h1>
<section id="options" class="clearfix">
<div class="option-combo">
<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 id="filter" class="option-set floated clearfix" data-option-key="filter">
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
<li><a href="#elements" data-option-value=".element">elements</a></li>
<li><a href="#features" data-option-value=".feature">features</a></li>
<li><a href="#examples" data-option-value=".example">examples</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Sort:</h2>
<ul id="sort" class="option-set floated clearfix">
<li><a href="#type" data-sort="original-order" class="selected">original order</a></li>
<li><a href="#related" data-sort="related">related</a></li>
<li><a href="#width" data-sort="width">width</a></li>
<ul id="sort" class="option-set floated clearfix" data-option-key="sortBy">
<li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
<li><a href="#original" data-option-value="original-order">original</a></li>
<li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
</ul>
</div>
<div class="option-combo">
<h2>Layout: </h2>
<ul id="layouts" class="option-set floated clearfix">
<li><a href="#fitRows" class="selected">fitRows</a></li>
<li><a href="#straightDown">straightDown</a></li>
<li><a href="#masonry">masonry</a></li>
<ul id="layouts" class="option-set floated clearfix" data-option-key="layoutMode">
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
</ul>
</div>
</section>
<ul id="super-list" class="fitRows clearfix">
<li class="feature" data-category="feature" data-related="etc"><span>An exquisite jQuery plugin for magical layouts</span></li>
<li class="feature" data-category="feature" data-related="filtering"><span>Reveal &amp; hide items with filtering</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Re&ndash;order items with sorting</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="animating"><span>Captivating animations</span></li>
<li class="feature" data-category="feature" data-related="sorting"><span>Sort items by just about anything</span></li>
<li class="feature" data-category="feature" data-related="methods"><span>Powerful methods, simple syntax</span></li>
<li class="feature" data-category="feature" data-related="animating"><span>Progressively enhanced for CSS3 transforms &amp; transitions</span></li>
{% for doc in site.categories.docs reversed %}
{% if doc.layout != 'index-page' %}
<li class="doc" data-category="doc" data-related="{{ doc.related }}"><a href=".{{ doc.url }}">Docs: {{ doc.title }}</a></li>
{% endif %}
<div id="container" class="super-list clearfix">
{% for elem_number in site.random_order limit:30 %}
{% assign element = site.elements[elem_number] %}
{% include element-partial.html %}
{% endfor %}
{% for demo in site.categories.demos reversed %}
{% if demo.layout != 'index-page' %}
<li class="demo" data-category="demo" data-related="{{ demo.related }}"><a href=".{{ demo.url }}">Demo: {{ demo.title }}</a></li>
{% endif %}
{% endfor %}
<li class="link" data-related="z-etc"><a href="jquery.isotope.min.js">Download jquery.isotope.min.js</a></li>
<li class="link" data-related="z-etc"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Download this project</a></li>
<li class="link" data-related="z-etc"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></li>
</ul>
<div class="feature" data-number="1">An exquisite jQuery plugin for magical&nbsp;layouts</div>
<div class="feature" data-number="11">Reveal &amp; hide items with&nbsp;filtering</div>
<div class="feature" data-number="21">Re&ndash;order items with&nbsp;sorting</div>
<div class="feature" data-number="31">Dynamic, intelligent layouts</div>
<div class="feature" data-number="41">Captivating animations</div>
<div class="feature" data-number="51">Sort items by just about&nbsp;anything</div>
<div class="feature" data-number="61">Powerful methods, simple&nbsp;syntax</div>
<div class="feature" data-number="71">Progressively enhanced for CSS3 transforms &amp;&nbsp;transitions</div>
<div class="link" data-number="5"><a href="jquery.isotope.min.js">Down&#8203;load jquery&#8203;.isotope&#8203;.min.js</a></div>
<div class="link" data-number="13"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Down&#8203;load this project</a></div>
<div class="link" data-number="35"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></div>
</div>
<div id="sites"></div>
{% include footer.html %}
<script src="{{ site.jquery_js }}"></script>
<script src="{{ site.isotope_js }}"></script>
<script>
$list = $('#super-list');
$('#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;
});
var currentLayout = 'fitRows';
$('#layouts a').click(function(){
var layoutName = $(this).attr('href').slice(1);
$list.removeClass( currentLayout ).addClass( layoutName );
currentLayout = layoutName;
$list.isotope({ layoutMode : layoutName });
return false;
});
{% include option-buttons.js %}
$(function(){
$list.isotope({
layoutMode : 'fitRows',
masonry : {
columnWidth: 220
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 120
},
getSortData : {
related : function( $elem ) {
return $elem.attr('data-related');
sortBy: 'number',
getSortData: {
number: function( $elem ) {
var number = $elem.hasClass('element') ?
$elem.find('.number').text() :
$elem.attr('data-number');
return parseInt( number, 10 );
},
width : function( $elem ) {
return $elem.width();
alphabetical: function( $elem ) {
var name = $elem.find('.name'),
itemText = name.length ? name : $elem;
return itemText.text();
}
}
});
{% include option-set-buttons.js %}
// Sites using Isotope markup
var $sites = $('#sites'),
$sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
$sitesList = $('<ul class="clearfix"></ul>');
$sites.append( $sitesTitle ).append( $sitesList );
$sitesList.isotope({
@ -137,18 +97,18 @@ layout: nil
rowHeight: 400
}
});
var ajaxError = function(){
$sitesTitle.removeClass('loading').addClass('error')
.text('Could not load sites using Isotope :(');
};
// dynamically load sites using Isotope from Ember app
$.getJSON('http://api.emberapp.com/users/view/' +
'desandro/collections/view/isotope.json?callback=?')
.error( ajaxError )
.success(function( data ){
// proceed only if we have images
if ( !data.response || !data.response.images ) {
ajaxError();
@ -157,27 +117,37 @@ layout: nil
var images = data.response.images,
items = [],
item, image;
for ( var i=0, len = images.length; i < len; i++ ) {
image = images[i];
item = '<li><a href="' + image.url + '">'
+ '<b>' + image.name + '</b>'
+ '<img src="' + image.file.src.replace('/m.', '/s.') + '" />'
+ '<b>' + image.name + '</b>'
+ '</a></li>';
items.push( item );
}
var $items = $( items.join('') );
var $items = $( items.join('') )
.addClass('example');
// set random number for each item
$items.each(function(){
$(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
});
$items.imagesLoaded(function(){
$sitesTitle.removeClass('loading').text('Sites using Isotope');
$sitesList.isotope( 'insert', $items );
$container.append( $items );
$items.each(function(){
var $this = $(this),
itemHeight = Math.ceil( $this.height() / 120 ) * 120 - 10;
$this.height( itemHeight );
});
$container.isotope( 'insert', $items );
});
});
});
</script>
{% include html-foot.html %}
Write Preview
Loading…
Cancel
Save