From 80e34d4b166bb4d6ee24c46b73cbc21c0c9f1d34 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jun 2011 20:37:00 -0400 Subject: [PATCH 01/31] demos : remove animationEngine option from elements --- _layouts/elements.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/_layouts/elements.html b/_layouts/elements.html index fd3072f..0d117ef 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -112,8 +112,6 @@ columnWidth : 240, rowHeight : 240 }, - animationEngine : $.browser.opera ? 'jquery' : 'best-available', - // animationEngine : 'jquery', getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); From 66e28a48394b6a7a47188157f18cfcce0c7d9aee Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 14 Jun 2011 08:05:17 -0400 Subject: [PATCH 02/31] demos : add hash history with jQuery BBQ. Fixes #3 thx @cowboy ! --- _posts/demos/2011-06-13-hash-history.html | 195 ++++++++++++++++++++++ js/jquery.ba-bbq.min.js | 18 ++ 2 files changed, 213 insertions(+) create mode 100644 _posts/demos/2011-06-13-hash-history.html create mode 100644 js/jquery.ba-bbq.min.js diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html new file mode 100644 index 0000000..f009378 --- /dev/null +++ b/_posts/demos/2011-06-13-hash-history.html @@ -0,0 +1,195 @@ +--- +title: Hash history +layout: demo +category: demos +related: z-etc +--- + +
+

Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

+
+ +
+ +

Filters

+ + + + +

Sort

+ + + +

Sort direction

+ + + +

Layout modes

+ + + +
+ +
+ {% for elem_number in site.random_order | limit:60 %} + {% assign element = site.elements[elem_number] %} + {% include element-partial.html %} + {% endfor %} +
+ + + + + + + diff --git a/js/jquery.ba-bbq.min.js b/js/jquery.ba-bbq.min.js new file mode 100644 index 0000000..bcbf248 --- /dev/null +++ b/js/jquery.ba-bbq.min.js @@ -0,0 +1,18 @@ +/* + * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010 + * http://benalman.com/projects/jquery-bbq-plugin/ + * + * Copyright (c) 2010 "Cowboy" Ben Alman + * Dual licensed under the MIT and GPL licenses. + * http://benalman.com/about/license/ + */ +(function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this); \ No newline at end of file From eaf1ebbf68c8e5f39c0ae04f5684c910f6e007a2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 14 Jun 2011 08:05:58 -0400 Subject: [PATCH 03/31] demos : layout-change.js : tidy up var statement --- _includes/layout-change.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/layout-change.js b/_includes/layout-change.js index 21c2cc8..5898340 100644 --- a/_includes/layout-change.js +++ b/_includes/layout-change.js @@ -2,9 +2,10 @@ // change layout var isHorizontal = false; $('#layouts a').click(function(){ - var mode = $(this).attr('href').slice(1); + var $this = $(this), + mode = $this.attr('href').slice(1), wasHorizontal = isHorizontal; - isHorizontal = $(this).hasClass('horizontal'); + isHorizontal = $this.hasClass('horizontal'); if ( wasHorizontal !== isHorizontal ) { // need to do some clean up for transitions and sizes @@ -21,7 +22,6 @@ } else { // go ahead and apply new layout $container.isotope({ layoutMode : mode }); - } return false; From 6873a644ec654a6cde0129284ee4fa785cf5822d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 14 Jun 2011 18:17:14 -0400 Subject: [PATCH 04/31] demos : standardize setting options; add option-set-buttons.js include --- _includes/filter-buttons.html | 14 ++++ _includes/option-set-buttons.js | 29 ++++++++ _includes/sort-buttons.html | 37 ++++------ _layouts/elements.html | 82 +++++++--------------- _posts/demos/2010-12-30-filtering.html | 25 +------ _posts/demos/2010-12-30-sorting.html | 6 +- _posts/demos/2011-05-22-category-rows.html | 60 ++++++---------- 7 files changed, 111 insertions(+), 142 deletions(-) create mode 100644 _includes/filter-buttons.html create mode 100644 _includes/option-set-buttons.js diff --git a/_includes/filter-buttons.html b/_includes/filter-buttons.html new file mode 100644 index 0000000..12202ef --- /dev/null +++ b/_includes/filter-buttons.html @@ -0,0 +1,14 @@ + +

Filters

+ + diff --git a/_includes/option-set-buttons.js b/_includes/option-set-buttons.js new file mode 100644 index 0000000..81e0b5d --- /dev/null +++ b/_includes/option-set-buttons.js @@ -0,0 +1,29 @@ + + var $optionSets = $('#options .option-set'), + $optionLinks = $optionSets.find('a'); + + $optionLinks.click(function(){ + var $this = $(this); + + // don't proceed if already selected + if ( $this.hasClass('selected') ) { + return; + } + + var $optionSet = $this.parents('.option-set'); + + $optionSet.find('.selected').removeClass('selected'); + $this.addClass('selected'); + + // make option object dynamically, i.e. { filter: '.my-filter-class' } + var options = {}, + key = $optionSet.attr('data-option-key'), + value = $this.attr('data-option-value'); + // parse 'false' as false boolean + value = value === 'false' ? false : value; + options[ key ] = value; + + $container.isotope( options ); + + return false; + }); diff --git a/_includes/sort-buttons.html b/_includes/sort-buttons.html index 328f5b9..e87577f 100644 --- a/_includes/sort-buttons.html +++ b/_includes/sort-buttons.html @@ -1,25 +1,18 @@

Sort

- \ No newline at end of file + + +

Sort direction

+ + diff --git a/_layouts/elements.html b/_layouts/elements.html index 0d117ef..0bc0d85 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -10,24 +10,7 @@
-

Filters

- - + {% include filter-buttons.html %} {% include sort-buttons.html %} @@ -59,45 +42,9 @@ var $container = $('#container'); {% include random-sizes.js %} - - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = '.' + $(this).attr('href').slice(1); - filterName = filterName === '.show-all' ? '*' : filterName; - $container.isotope({ filter: filterName }) - return false; - }); - - {% include sort-buttons.js %} - - // change size of clicked element - $container.find('.element').live('click', function(){ - $(this).toggleClass('large'); - $container.isotope('reLayout'); - }); - - // toggle variable sizes of all elements - $('#toggle-sizes').find('a').click(function(){ - $container - .toggleClass('variable-sizes') - .isotope('reLayout'); - return false; - }); - - {% include layout-change.js %} - - {% include add-buttons.js %} - - $('#shuffle a').click(function(){ - $container.isotope('shuffle'); - return false; - }); - - {% include option-buttons.js %} - + $container.isotope({ itemSelector : '.element', - // layoutMode : 'fitRows', masonry : { columnWidth : 120 }, @@ -130,6 +77,31 @@ } } }); + + {% include option-set-buttons.js %} + + // toggle variable sizes of all elements + $('#toggle-sizes').find('a').click(function(){ + $container + .toggleClass('variable-sizes') + .isotope('reLayout'); + return false; + }); + + {% include layout-change.js %} + + {% include add-buttons.js %} + + $('#shuffle a').click(function(){ + $container.isotope('shuffle'); + return false; + }); + + // change size of clicked element + $container.find('.element').live('click', function(){ + $(this).toggleClass('large'); + $container.isotope('reLayout'); + }); }); diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html index cec188d..13aeee2 100644 --- a/_posts/demos/2010-12-30-filtering.html +++ b/_posts/demos/2010-12-30-filtering.html @@ -13,19 +13,7 @@ related: filtering
-

Filters

- - + {% include filter-buttons.html %}
@@ -43,19 +31,12 @@ related: filtering var $container = $('#container'); - // filter buttons - $('#filters a').click(function(){ - var selector = $(this).attr('data-filter'); - $container.isotope({ filter: selector }); - return false; - }); - - {% include option-buttons.js %} - $container.isotope({ itemSelector : '.element' }); + {% include option-set-buttons.js %} + }); diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html index d1a84ac..6777fcf 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -29,10 +29,6 @@ related: sorting $(function(){ var $container = $('#container'); - - {% include sort-buttons.js %} - - {% include option-buttons.js %} $container.isotope({ itemSelector : '.element', @@ -55,5 +51,7 @@ related: sorting } }); + {% include option-set-buttons.js %} + }); diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index 4a9499c..14bbe54 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -11,24 +11,7 @@ related: layouts
-

Filters

- - + {% include filter-buttons.html %}

Etc

@@ -109,27 +92,9 @@ related: layouts $(function(){ var $container = $('#container'); - - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = '.' + $(this).attr('href').slice(1); - filterName = filterName === '.show-all' ? '*' : filterName; - $container.isotope({ filter: filterName }) - return false; - }); - - {% include add-buttons.js %} - - // toggle variable sizes of all elements - $('#toggle-sizes').find('a').click(function(){ - $container - .toggleClass('variable-sizes') - .isotope('reLayout'); - return false; - }); - - {% include option-buttons.js %} - + + {% include random-sizes.js %} + $container.isotope({ itemSelector : '.element', layoutMode : 'categoryRows', @@ -146,6 +111,23 @@ related: layouts }); + + {% include option-set-buttons.js %} + + {% include add-buttons.js %} + + // toggle variable sizes of all elements + $('#toggle-sizes').find('a').click(function(){ + $container + .toggleClass('variable-sizes') + .isotope('reLayout'); + return false; + }); + + + + + }); From 07ef99e1437f5f860a55a5eb32ac1c605c08fd55 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 08:10:37 -0400 Subject: [PATCH 05/31] demos : use option-set-buttons.js where possible --- _includes/add-buttons.js | 2 +- _includes/layout-change.js | 22 +++---- _includes/layout-options.html | 23 +++---- _includes/option-set-buttons.js | 14 +++-- _includes/sort-buttons.js | 13 ---- _posts/demos/2010-12-29-layout-modes.html | 12 ++-- _posts/tests/2011-03-27-flash01.html | 33 +++------- .../2011-04-26-item-position-data01.html | 2 +- .../tests/2011-05-13-jquery-animation01.html | 60 ++++++------------- _posts/tests/2011-05-18-centered-masonry.html | 35 ++--------- .../2011-05-24-elements-complete-test.html | 19 +----- 11 files changed, 68 insertions(+), 167 deletions(-) delete mode 100644 _includes/sort-buttons.js diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js index 62e2797..699c55e 100644 --- a/_includes/add-buttons.js +++ b/_includes/add-buttons.js @@ -1,3 +1,4 @@ + $('#insert a').click(function(){ var $newEls = $( fakeElement.getGroup() ); $container.isotope( 'insert', $newEls ); @@ -11,4 +12,3 @@ return false; }); - \ No newline at end of file diff --git a/_includes/layout-change.js b/_includes/layout-change.js index 5898340..4dcf825 100644 --- a/_includes/layout-change.js +++ b/_includes/layout-change.js @@ -1,28 +1,24 @@ // change layout var isHorizontal = false; - $('#layouts a').click(function(){ - var $this = $(this), - mode = $this.attr('href').slice(1), - wasHorizontal = isHorizontal; - isHorizontal = $this.hasClass('horizontal'); - + function changeLayoutMode( $link, options ) { + var wasHorizontal = isHorizontal; + isHorizontal = $link.hasClass('horizontal'); + if ( wasHorizontal !== isHorizontal ) { + // orientation change // need to do some clean up for transitions and sizes var style = isHorizontal ? { height: '80%', width: $container.width() } : { width: 'auto' }; // stop any animation on container height / width $container.filter(':animated').stop(); - + // disable transition, apply revised style $container.addClass('no-transition').css( style ); setTimeout(function(){ - $container.removeClass('no-transition').isotope({ layoutMode : mode }); + $container.removeClass('no-transition').isotope( options ); }, 100 ) } else { - // go ahead and apply new layout - $container.isotope({ layoutMode : mode }); + $container.isotope( options ); } - - return false; - }); \ No newline at end of file + } diff --git a/_includes/layout-options.html b/_includes/layout-options.html index 1d950c7..3cacfc0 100644 --- a/_includes/layout-options.html +++ b/_includes/layout-options.html @@ -1,12 +1,13 @@ -

Layout modes

- \ No newline at end of file +

Layout modes

+ + diff --git a/_includes/option-set-buttons.js b/_includes/option-set-buttons.js index 81e0b5d..ab930c0 100644 --- a/_includes/option-set-buttons.js +++ b/_includes/option-set-buttons.js @@ -4,14 +4,11 @@ $optionLinks.click(function(){ var $this = $(this); - // don't proceed if already selected if ( $this.hasClass('selected') ) { - return; + return false; } - var $optionSet = $this.parents('.option-set'); - $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); @@ -22,8 +19,13 @@ // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; - - $container.isotope( options ); + if ( key === 'layoutMode' && changeLayoutMode ) { + // changes in layout modes need extra logic + changeLayoutMode( $this, options ) + } else { + // otherwise, apply new options + $container.isotope( options ); + } return false; }); diff --git a/_includes/sort-buttons.js b/_includes/sort-buttons.js deleted file mode 100644 index 6871b11..0000000 --- a/_includes/sort-buttons.js +++ /dev/null @@ -1,13 +0,0 @@ - - // sorting - $('#sort a').click(function(){ - // get href attribute, minus the # - var $this = $(this), - sortName = $this.attr('href').slice(1), - asc = $this.parents('.sort').hasClass('asc'); - $container.isotope({ - sortBy : sortName, - sortAscending : asc - }); - return false; - }); \ No newline at end of file diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index c8f47e2..2f37636 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -30,11 +30,7 @@ related: layouts var $container = $('#container'); {% include random-sizes.js %} - - {% include layout-change.js %} - - {% include option-buttons.js %} - + $container.isotope({ itemSelector : '.element', masonry : { @@ -53,6 +49,12 @@ related: layouts } }); + {% include layout-change.js %} + + {% include option-set-buttons.js %} + + + }); diff --git a/_posts/tests/2011-03-27-flash01.html b/_posts/tests/2011-03-27-flash01.html index 3011aab..b3b9e0e 100644 --- a/_posts/tests/2011-03-27-flash01.html +++ b/_posts/tests/2011-03-27-flash01.html @@ -29,13 +29,12 @@ category: tests

Filters

-
@@ -113,24 +112,6 @@ category: tests var $container = $('#container'); - $('#filters a').click(function(){ - var filterName = $(this).attr('data-filter'); - $container.isotope({ filter : filterName }); - return false; - }); - - // switches selected class on buttons - $('#options').find('.option-set a').click(function(){ - var $this = $(this); - - // don't proceed if already selected - if ( !$this.hasClass('selected') ) { - $this.parents('.option-set').find('.selected').removeClass('selected'); - $this.addClass('selected'); - } - - }); - $container.imagesLoaded(function(){ $container.isotope({ transformsEnabled: false, @@ -141,5 +122,7 @@ category: tests }); }); + {% include option-set-buttons.js %} + }); \ No newline at end of file diff --git a/_posts/tests/2011-04-26-item-position-data01.html b/_posts/tests/2011-04-26-item-position-data01.html index da9fbc0..a726504 100644 --- a/_posts/tests/2011-04-26-item-position-data01.html +++ b/_posts/tests/2011-04-26-item-position-data01.html @@ -36,7 +36,7 @@ category: tests {% include random-sizes.js %} - {% include sort-buttons.js %} + {% include option-set-buttons.js %} // toggle variable sizes of all elements $('#toggle-sizes').find('a').click(function(){ diff --git a/_posts/tests/2011-05-13-jquery-animation01.html b/_posts/tests/2011-05-13-jquery-animation01.html index b88387f..8bab86d 100644 --- a/_posts/tests/2011-05-13-jquery-animation01.html +++ b/_posts/tests/2011-05-13-jquery-animation01.html @@ -19,24 +19,8 @@ category: tests
-

Filters

- + {% include filter-buttons.html %} {% include sort-buttons.html %} @@ -63,32 +47,6 @@ category: tests {% include random-sizes.js %} - {% include sort-buttons.js %} - - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = '.' + $(this).attr('href').slice(1); - filterName = filterName === '.show-all' ? '*' : filterName; - $container.isotope({ filter: filterName }) - return false; - }); - - {% include option-buttons.js %} - - // change size of clicked element - $container.find('.element').live('click', function(){ - $(this).toggleClass('large'); - $container.isotope('reLayout'); - }); - - // toggle variable sizes of all elements - $('#toggle-sizes').find('a').click(function(){ - $container - .toggleClass('variable-sizes') - .isotope('reLayout'); - return false; - }); - $container.isotope({ itemSelector: '.element', transformsEnabled: false, @@ -114,6 +72,22 @@ category: tests } } }); + + {% include option-set-buttons.js %} + + // change size of clicked element + $container.find('.element').live('click', function(){ + $(this).toggleClass('large'); + $container.isotope('reLayout'); + }); + + // toggle variable sizes of all elements + $('#toggle-sizes').find('a').click(function(){ + $container + .toggleClass('variable-sizes') + .isotope('reLayout'); + return false; + }); }); \ No newline at end of file diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index d63bde0..f652083 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -16,24 +16,7 @@ category: tests
-

Filters

- - + {% include filter-buttons.html %} {% include sort-buttons.html %} @@ -124,6 +107,7 @@ category: tests var $container = $('#container'); + {% include random-sizes.js %} $container.isotope({ itemSelector : '.element', @@ -150,19 +134,8 @@ category: tests } }); + {% include option-set-buttons.js %} - {% include random-sizes.js %} - - {% include sort-buttons.js %} - - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = '.' + $(this).attr('href').slice(1); - filterName = filterName === '.show-all' ? '*' : filterName; - $container.isotope({ filter: filterName }) - return false; - }); - // change size of clicked element $container.find('.element').live('click', function(){ $(this).toggleClass('large'); @@ -184,7 +157,7 @@ category: tests return false; }); - {% include option-buttons.js %} + }); diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html index eb13c8b..232338b 100644 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ b/_posts/tests/2011-05-24-elements-complete-test.html @@ -10,24 +10,7 @@ category: tests
-

Filters

- - + {% include filter-buttons.html %} {% include sort-buttons.html %} From daa5a6067dafc95e5ef87dba36dbfadd8c6513a2 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 09:09:34 -0400 Subject: [PATCH 06/31] tests : revise for option-set-buttons.js --- .../2011-05-24-elements-complete-test.html | 118 ++++++++++-------- _posts/tests/2011-05-31-tiny-text.html | 25 +--- 2 files changed, 69 insertions(+), 74 deletions(-) diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html index 232338b..24f1738 100644 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ b/_posts/tests/2011-05-24-elements-complete-test.html @@ -40,62 +40,11 @@ category: tests diff --git a/_posts/tests/2011-05-31-tiny-text.html b/_posts/tests/2011-05-31-tiny-text.html index 05abe3c..4c4e598 100644 --- a/_posts/tests/2011-05-31-tiny-text.html +++ b/_posts/tests/2011-05-31-tiny-text.html @@ -28,10 +28,10 @@ lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Filters

-
@@ -56,30 +56,15 @@ lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - \ No newline at end of file From e7ca09e30995f48a8d032dd881ac425cb3e58de5 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 09:36:45 -0400 Subject: [PATCH 07/31] demos : hash-history : revise for public consumption --- _posts/demos/2011-06-13-hash-history.html | 44 ++++++++++------------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index f009378..b57a211 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -6,31 +6,25 @@ related: z-etc ---
-

Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

+

jQuery BBQ by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button.

Filters

-
    + -

    Sort

      @@ -70,7 +64,6 @@ related: z-etc - + + + \ No newline at end of file diff --git a/_includes/elements-demo-head.html b/_includes/elements-demo-head.html new file mode 100644 index 0000000..a617434 --- /dev/null +++ b/_includes/elements-demo-head.html @@ -0,0 +1,22 @@ +
      +

      Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

      +
      + +
      + + {% include filter-buttons.html %} + + {% include sort-buttons.html %} + + {% include layout-options.html %} + +

      Etc

      + + +
      \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..6f4ff48 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,48 @@ +{% include html-head.html %} + + + +
      + +

      {{ page.title }}

      + + {{ content }} + + {% include footer.html %} + +
      + +{% include html-foot.html %} \ No newline at end of file diff --git a/_posts/demos/2010-12-12-basic.html b/_posts/demos/2010-12-12-basic.html index d3e87af..e2379df 100644 --- a/_posts/demos/2010-12-12-basic.html +++ b/_posts/demos/2010-12-12-basic.html @@ -1,6 +1,6 @@ --- title: Basic -layout: demo +layout: default category: demos related: a-intro --- diff --git a/_posts/demos/2010-12-13-elements-complete.html b/_posts/demos/2010-12-13-elements-complete.html index 77c6469..adea08d 100644 --- a/_posts/demos/2010-12-13-elements-complete.html +++ b/_posts/demos/2010-12-13-elements-complete.html @@ -1,10 +1,12 @@ --- title: Elements Complete -layout: elements +layout: default category: demos related: a-intro --- +{% include elements-demo-head.html %} +
      {% for elem_number in site.random_order %} {% assign element = site.elements[elem_number] %} @@ -12,3 +14,4 @@ related: a-intro {% endfor %}
      +{% include elements-demo-foot.html %} \ No newline at end of file diff --git a/_posts/demos/2010-12-16-elements-partial.html b/_posts/demos/2010-12-16-elements-partial.html index 61f327e..3da84f7 100644 --- a/_posts/demos/2010-12-16-elements-partial.html +++ b/_posts/demos/2010-12-16-elements-partial.html @@ -1,10 +1,12 @@ --- title: Elements Partial -layout: elements +layout: default category: demos related: a-intro --- +{% include elements-demo-head.html %} +
      {% for elem_number in site.best_of_order %} {% assign element = site.elements[elem_number] %} @@ -12,4 +14,4 @@ related: a-intro {% endfor %}
      - +{% include elements-demo-foot.html %} diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index 2f37636..426b22a 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -1,6 +1,6 @@ --- title: Layout modes -layout: demo +layout: default category: demos related: layouts --- diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html index 13aeee2..e3c4588 100644 --- a/_posts/demos/2010-12-30-filtering.html +++ b/_posts/demos/2010-12-30-filtering.html @@ -1,6 +1,6 @@ --- title: Filtering -layout: demo +layout: default category: demos related: filtering --- diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html index 6777fcf..452ce11 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -1,6 +1,6 @@ --- title: Sorting -layout: demo +layout: default category: demos related: sorting --- diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html index 923421d..c79f9b9 100644 --- a/_posts/demos/2010-12-31-relayout.html +++ b/_posts/demos/2010-12-31-relayout.html @@ -1,6 +1,6 @@ --- title: reLayout -layout: demo +layout: default category: demos related: methods --- diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html index 34776dd..60af53c 100644 --- a/_posts/demos/2011-01-02-adding-items.html +++ b/_posts/demos/2011-01-02-adding-items.html @@ -1,6 +1,6 @@ --- title: Adding items -layout: demo +layout: default category: demos related: methods --- diff --git a/_posts/demos/2011-01-02-infinite-scroll.html b/_posts/demos/2011-01-02-infinite-scroll.html index 3c8bfc3..9a974f5 100644 --- a/_posts/demos/2011-01-02-infinite-scroll.html +++ b/_posts/demos/2011-01-02-infinite-scroll.html @@ -1,6 +1,6 @@ --- title: Infinite Scroll -layout: demo +layout: default category: demos related: layout infinite_scroll: true diff --git a/_posts/demos/2011-01-11-images.html b/_posts/demos/2011-01-11-images.html index 41760bf..a578639 100644 --- a/_posts/demos/2011-01-11-images.html +++ b/_posts/demos/2011-01-11-images.html @@ -1,6 +1,6 @@ --- title: Images -layout: demo +layout: default category: demos related: z-etc photos: diff --git a/_posts/demos/2011-03-29-combination-filters.html b/_posts/demos/2011-03-29-combination-filters.html index 9e0ff90..9cf6f2b 100644 --- a/_posts/demos/2011-03-29-combination-filters.html +++ b/_posts/demos/2011-03-29-combination-filters.html @@ -1,6 +1,6 @@ --- title: Combination filters -layout: demo +layout: default category: demos related: filtering schema: diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index 14bbe54..bdc47e2 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -1,6 +1,6 @@ --- title: Category rows -layout: demo +layout: default category: demos related: layouts --- diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index b57a211..96cec26 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -1,12 +1,12 @@ --- title: Hash history -layout: demo +layout: default category: demos related: z-etc ---
      -

      jQuery BBQ by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button.

      +

      jQuery BBQ by Ben Alman allows you to use hash history to save Isotope options. Try clicking a couple options then hitting the back button, or copying the URL and pasting it into a new window.

      diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index dc48968..8c3b6b1 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -2,7 +2,7 @@ title: Introduction category: docs -layout: doc +layout: default related: a-intro toc: - { title: Features, anchor: features } diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index 4c9963f..a4f2736 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -2,7 +2,7 @@ title: Options category: docs -layout: doc +layout: default body_class: option-def related: a-intro toc: diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown index 89718c8..2f8abcc 100644 --- a/_posts/docs/2010-12-04-methods.mdown +++ b/_posts/docs/2010-12-04-methods.mdown @@ -2,7 +2,7 @@ title: Methods category: docs -layout: doc +layout: default related: methods toc: - { title: addItems, anchor: additems } diff --git a/_posts/docs/2010-12-05-layout-modes.mdown b/_posts/docs/2010-12-05-layout-modes.mdown index 4b436c1..f54f215 100644 --- a/_posts/docs/2010-12-05-layout-modes.mdown +++ b/_posts/docs/2010-12-05-layout-modes.mdown @@ -2,7 +2,7 @@ title: Layout modes category: docs -layout: doc +layout: default body_class: option-def related: layout toc: diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown index fcbf53d..2ca38a1 100644 --- a/_posts/docs/2010-12-06-filtering.mdown +++ b/_posts/docs/2010-12-06-filtering.mdown @@ -2,7 +2,7 @@ title: Filtering category: docs -layout: doc +layout: default related: filtering toc: - { title: Markup, anchor: markup } diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown index 2c84694..b98245b 100644 --- a/_posts/docs/2010-12-07-sorting.mdown +++ b/_posts/docs/2010-12-07-sorting.mdown @@ -2,7 +2,7 @@ title: Sorting category: docs -layout: doc +layout: default related: sorting toc: - { title: Markup, anchor: markup } diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown index 9960c01..1a46be4 100644 --- a/_posts/docs/2010-12-09-animating.mdown +++ b/_posts/docs/2010-12-09-animating.mdown @@ -2,7 +2,7 @@ title: Animating category: docs -layout: doc +layout: default related: animating toc: - { title: animationEngine option, anchor: animationengine_option } diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown index 91f7304..a1e4419 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -2,7 +2,7 @@ title: Adding items category: docs -layout: doc +layout: default related: methods toc: - { title: addItems method, anchor: additems_method } diff --git a/_posts/docs/2011-05-25-extending-isotope.mdown b/_posts/docs/2011-05-25-extending-isotope.mdown index 11a562c..e3ae232 100644 --- a/_posts/docs/2011-05-25-extending-isotope.mdown +++ b/_posts/docs/2011-05-25-extending-isotope.mdown @@ -2,7 +2,7 @@ title: Extending Isotope category: docs -layout: doc +layout: default related: z-etc toc: - { title: Custom layout modes, anchor: custom_layout_modes } diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index 7eb085b..e7b90f5 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -2,7 +2,7 @@ title: Help category: docs -layout: doc +layout: default related: z-etc toc: - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues } diff --git a/_posts/docs/2011-12-20-license.mdown b/_posts/docs/2011-12-20-license.mdown index 006ca5d..66f5a56 100644 --- a/_posts/docs/2011-12-20-license.mdown +++ b/_posts/docs/2011-12-20-license.mdown @@ -2,7 +2,7 @@ title: License category: docs -layout: doc +layout: default related: z-etc toc: - { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement } diff --git a/_posts/tests/2011-03-27-destroy01.html b/_posts/tests/2011-03-27-destroy01.html index 12c22a6..93ec9bd 100644 --- a/_posts/tests/2011-03-27-destroy01.html +++ b/_posts/tests/2011-03-27-destroy01.html @@ -1,6 +1,6 @@ --- title: destroy01 -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-03-27-flash01.html b/_posts/tests/2011-03-27-flash01.html index b3b9e0e..7453fa8 100644 --- a/_posts/tests/2011-03-27-flash01.html +++ b/_posts/tests/2011-03-27-flash01.html @@ -1,6 +1,6 @@ --- title: flash01 -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-03-27-no-items01.html b/_posts/tests/2011-03-27-no-items01.html index 14cf5d8..60c938b 100644 --- a/_posts/tests/2011-03-27-no-items01.html +++ b/_posts/tests/2011-03-27-no-items01.html @@ -1,6 +1,6 @@ --- title: no items01 -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-04-26-item-position-data01.html b/_posts/tests/2011-04-26-item-position-data01.html index a726504..4e1094a 100644 --- a/_posts/tests/2011-04-26-item-position-data01.html +++ b/_posts/tests/2011-04-26-item-position-data01.html @@ -1,6 +1,6 @@ --- title: item position data01 -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-05-13-jquery-animation01.html b/_posts/tests/2011-05-13-jquery-animation01.html index 8bab86d..7f8d59f 100644 --- a/_posts/tests/2011-05-13-jquery-animation01.html +++ b/_posts/tests/2011-05-13-jquery-animation01.html @@ -1,6 +1,6 @@ --- title: jquery animation01 -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index f652083..f33a9da 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -1,6 +1,6 @@ --- title: centered masonry -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html index 24f1738..316d5b6 100644 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ b/_posts/tests/2011-05-24-elements-complete-test.html @@ -1,6 +1,6 @@ --- title: elements complete test -layout: demo +layout: default category: tests --- diff --git a/_posts/tests/2011-05-31-tiny-text.html b/_posts/tests/2011-05-31-tiny-text.html index 4c4e598..fa01718 100644 --- a/_posts/tests/2011-05-31-tiny-text.html +++ b/_posts/tests/2011-05-31-tiny-text.html @@ -1,6 +1,6 @@ --- title: Tiny text -layout: demo +layout: default category: tests lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. --- diff --git a/css/style.css b/css/style.css index d3e3545..4b24a56 100644 --- a/css/style.css +++ b/css/style.css @@ -397,7 +397,7 @@ body { /**** Docs ****/ -body.doc { +.doc #content { max-width: 640px; } @@ -406,55 +406,42 @@ body.doc { } -body.doc { +#content { margin-left: 220px; } -.doc nav { - width: 210px; - position: fixed; +/**** Doc page nav ****/ + +#site-nav h1, +#demo-nav { + font-size: 24px; + margin-bottom: 0.5em; + font-weight: bold; + font-family: 'Helvetica Neue', Arial, sans-serif; +} + +#site-nav { + width: 200px; + position: absolute; left: 10px; top: 0px; padding-top: 20px; - height: 100%; - overflow: auto; + font-size: 12px; } -.doc nav h1 { +#site-nav h1 { margin-top: 0; } -@media screen and (max-width: 768px) { - - body.doc { - margin-left: 0px; - } - - .doc nav { - width: auto; - position: relative; - left: auto; - top: auto; - padding-top: 0px; - height: auto; - margin-bottom: 20px; - } - +#site-nav h2 { + font-size: 18px; + margin: 0 0 0.3em; + border-top: none; } -/**** Doc page nav ****/ - -#docs-nav h1, -#demo-nav { - font-size: 19px; - margin-bottom: 0.5em; - font-weight: bold; - font-family: 'Helvetica Neue', Arial, sans-serif; -} - -#docs-nav h1 a, +#site-nav h1 a, #demo-nav a { color: #4FB; } -#docs-nav h1 a:hover, +#site-nav h1 a:hover, #demo-nav a:hover { color: #4BF; } #demo-nav { @@ -462,26 +449,28 @@ body.doc { border-bottom: 1px solid #333; } -#docs-nav ul { +#site-nav ul { list-style: none; - margin: 0; + margin: 0 0 1.0em; font-weight: bold; } -#docs-nav ul a { +#site-nav ul ul { margin-bottom: 0; } + +#site-nav ul a { display: block; border: none; padding: 1px 5px; } -#docs-nav ul .current a { +#site-nav ul .current a { background: hsla( 0, 0%, 0%, 0.3 ); color: #1BF; } -#docs-nav ul a:hover, -#docs-nav ul .current a:hover { color: white; } +#site-nav ul a:hover, +#site-nav ul .current a:hover { color: white; } -#docs-nav ul .current .toc a { +#site-nav ul .current .toc a { font-size: 12px; padding-left: 1.2em; font-weight: normal; @@ -723,17 +712,6 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ } -/**** Index pages ****/ - -#index-list { - font-weight: 300; - font-size: 28px; - line-height: 1.4em; - list-style: none; - margin-left: 0; -} - - /**** Infinite Scroll ****/ #infscr-loading { From fc9c88a6b8ace262267fa5a305881cbd1a289fb3 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 15:44:59 -0400 Subject: [PATCH 10/31] docs : remove old layouts; change inf scroll pages --- _includes/inf-scroll-page.html | 21 ++++ _layouts/demo.html | 11 -- _layouts/doc.html | 36 ------ _layouts/elements.html | 111 ------------------ _layouts/index-page.html | 17 --- _layouts/inf-scroll-page.html | 31 ----- .../{2011-01-01-2.yml => 2011-01-01-2.html} | 6 +- .../{2011-01-01-3.yml => 2011-01-01-3.html} | 6 +- .../{2011-01-01-4.yml => 2011-01-01-4.html} | 6 +- .../{2011-01-01-5.yml => 2011-01-01-5.html} | 6 +- .../{2011-01-01-6.yml => 2011-01-01-6.html} | 6 +- 11 files changed, 41 insertions(+), 216 deletions(-) create mode 100644 _includes/inf-scroll-page.html delete mode 100644 _layouts/demo.html delete mode 100644 _layouts/doc.html delete mode 100644 _layouts/elements.html delete mode 100644 _layouts/index-page.html delete mode 100644 _layouts/inf-scroll-page.html rename _posts/pages/{2011-01-01-2.yml => 2011-01-01-2.html} (62%) rename _posts/pages/{2011-01-01-3.yml => 2011-01-01-3.html} (62%) rename _posts/pages/{2011-01-01-4.yml => 2011-01-01-4.html} (62%) rename _posts/pages/{2011-01-01-5.yml => 2011-01-01-5.html} (62%) rename _posts/pages/{2011-01-01-6.yml => 2011-01-01-6.html} (62%) diff --git a/_includes/inf-scroll-page.html b/_includes/inf-scroll-page.html new file mode 100644 index 0000000..c074fc3 --- /dev/null +++ b/_includes/inf-scroll-page.html @@ -0,0 +1,21 @@ +
      + {% assign page_position = page.page_position %} + {% for element in site.elements limit:20 offset:page.page_position %} + {% include element-partial.html %} + {% endfor %} +
      + + + + \ No newline at end of file diff --git a/_layouts/demo.html b/_layouts/demo.html deleted file mode 100644 index 140d2aa..0000000 --- a/_layouts/demo.html +++ /dev/null @@ -1,11 +0,0 @@ -{% include html-head.html %} - -

      {{ site.name }} Demo

      - -

      {{ page.title }}

      - - {{ content }} - - {% include footer.html %} - -{% include html-foot.html %} \ No newline at end of file diff --git a/_layouts/doc.html b/_layouts/doc.html deleted file mode 100644 index e8afc11..0000000 --- a/_layouts/doc.html +++ /dev/null @@ -1,36 +0,0 @@ -{% include html-head.html %} - - - -
      - -

      {{ page.title }}

      - - {{ content }} - - {% include footer.html %} - -
      - -{% include html-foot.html %} \ No newline at end of file diff --git a/_layouts/elements.html b/_layouts/elements.html deleted file mode 100644 index 0bc0d85..0000000 --- a/_layouts/elements.html +++ /dev/null @@ -1,111 +0,0 @@ -{% include html-head.html %} - -

      {{ site.name }} Demo

      - -

      {{ page.title }}

      - -
      -

      Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

      -
      - -
      - - {% include filter-buttons.html %} - - {% include sort-buttons.html %} - - {% include layout-options.html %} - -

      Etc

      - - -
      - - - - {{ content }} - - {% include footer.html %} - - - - - - - -{% include html-foot.html %} \ No newline at end of file diff --git a/_layouts/index-page.html b/_layouts/index-page.html deleted file mode 100644 index d6e5a32..0000000 --- a/_layouts/index-page.html +++ /dev/null @@ -1,17 +0,0 @@ -{% include html-head.html %} - -

      {{ site.name }}

      - -

      {{ page.title }}

      - -
        - {% for post in site.categories[page.category] reversed %} - {% if post.layout != 'index-page' %} -
      • {{ post.title }}
        • - {% endif %} - {% endfor %} -
      - - {% include footer.html %} - -{% include html-foot.html %} \ No newline at end of file diff --git a/_layouts/inf-scroll-page.html b/_layouts/inf-scroll-page.html deleted file mode 100644 index 717ed3e..0000000 --- a/_layouts/inf-scroll-page.html +++ /dev/null @@ -1,31 +0,0 @@ -{% include html-head.html %} - -

      {{ site.name }} Demo

      - -

      {{ page.title }}

      - -
      - {% assign page_position = page.page_position %} - {% for element in site.elements limit:20 offset:page_position %} - {% include element-partial.html %} - {% endfor %} -
      - - {% include footer.html %} - - - - - -{% include html-foot.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-2.yml b/_posts/pages/2011-01-01-2.html similarity index 62% rename from _posts/pages/2011-01-01-2.yml rename to _posts/pages/2011-01-01-2.html index 533d5cd..a5b226c 100644 --- a/_posts/pages/2011-01-01-2.yml +++ b/_posts/pages/2011-01-01-2.html @@ -1,7 +1,9 @@ --- title: Infinite Scroll Page 2 category: pages -layout: inf-scroll-page +layout: default page_position: 20 infinite_scroll: true ---- \ No newline at end of file +--- + +{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-3.yml b/_posts/pages/2011-01-01-3.html similarity index 62% rename from _posts/pages/2011-01-01-3.yml rename to _posts/pages/2011-01-01-3.html index 05f9908..5aa7e41 100644 --- a/_posts/pages/2011-01-01-3.yml +++ b/_posts/pages/2011-01-01-3.html @@ -1,7 +1,9 @@ --- title: Infinite Scroll Page 3 category: pages -layout: inf-scroll-page +layout: default page_position: 40 infinite_scroll: true ---- \ No newline at end of file +--- + +{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-4.yml b/_posts/pages/2011-01-01-4.html similarity index 62% rename from _posts/pages/2011-01-01-4.yml rename to _posts/pages/2011-01-01-4.html index 3465532..d08868d 100644 --- a/_posts/pages/2011-01-01-4.yml +++ b/_posts/pages/2011-01-01-4.html @@ -1,7 +1,9 @@ --- title: Infinite Scroll Page 4 category: pages -layout: inf-scroll-page +layout: default page_position: 60 infinite_scroll: true ---- \ No newline at end of file +--- + +{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-5.yml b/_posts/pages/2011-01-01-5.html similarity index 62% rename from _posts/pages/2011-01-01-5.yml rename to _posts/pages/2011-01-01-5.html index 60004e2..7da5795 100644 --- a/_posts/pages/2011-01-01-5.yml +++ b/_posts/pages/2011-01-01-5.html @@ -1,7 +1,9 @@ --- title: Infinite Scroll Page 5 category: pages -layout: inf-scroll-page +layout: default page_position: 80 infinite_scroll: true ---- \ No newline at end of file +--- + +{% include inf-scroll-page.html %} \ No newline at end of file diff --git a/_posts/pages/2011-01-01-6.yml b/_posts/pages/2011-01-01-6.html similarity index 62% rename from _posts/pages/2011-01-01-6.yml rename to _posts/pages/2011-01-01-6.html index b1fa4c7..369c780 100644 --- a/_posts/pages/2011-01-01-6.yml +++ b/_posts/pages/2011-01-01-6.html @@ -1,7 +1,9 @@ --- title: Infinite Scroll Page 6 category: pages -layout: inf-scroll-page +layout: default page_position: 100 infinite_scroll: true ---- \ No newline at end of file +--- + +{% include inf-scroll-page.html %} \ No newline at end of file From 2793e25b95af6d6f59bb513dcef3df569c28754c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 18:20:42 -0400 Subject: [PATCH 11/31] docs : style tweaks --- css/style.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 4b24a56..a11004e 100644 --- a/css/style.css +++ b/css/style.css @@ -435,6 +435,7 @@ body { #site-nav h2 { font-size: 18px; + font-weight: normal; margin: 0 0 0.3em; border-top: none; } @@ -520,11 +521,11 @@ pre, code { font-family: 'Monaco', monospace, sans-serif; } -.doc #content code { +#content code { font-size: 12px; } -.doc #content pre { +#content pre { line-height: 1.6em; } @@ -732,10 +733,8 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ -/* >> 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; } +/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ +.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } -/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } - From 98ae9da2fb381cb93eede069e30c965562a99c31 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 22:47:27 -0400 Subject: [PATCH 12/31] docs : move footer, html-foot and html-head into default layout; CSS revisions --- _includes/footer.html | 4 ---- _includes/html-foot.html | 3 --- _includes/html-head.html | 14 ----------- _layouts/default.html | 37 +++++++++++++++++++++------- css/style.css | 52 ++++++++++++++++------------------------ 5 files changed, 49 insertions(+), 61 deletions(-) delete mode 100644 _includes/footer.html delete mode 100644 _includes/html-foot.html delete mode 100644 _includes/html-head.html diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index 312cadc..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,4 +0,0 @@ - - diff --git a/_includes/html-foot.html b/_includes/html-foot.html deleted file mode 100644 index a57a3db..0000000 --- a/_includes/html-foot.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/_includes/html-head.html b/_includes/html-head.html deleted file mode 100644 index 28aebb3..0000000 --- a/_includes/html-head.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - {{ page.title }} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %} - - - - - - - - - diff --git a/_layouts/default.html b/_layouts/default.html index 6f4ff48..54a4e0e 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,8 +1,22 @@ -{% include html-head.html %} + + + + {% if page.category != 'homepage' %}{% assign root_path = '../' %}{% assign link_path = '..' %}{% else %}{% assign link_path = '.' %}{% endif %} + + {{ page.title }}{% if page.category != 'homepage' %} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %}{% endif %} + + + + + + + + +
    @@ -28,7 +42,7 @@ {% if page.title == demo.title and page.category == 'demos' %}
  • {{ demo.title }}
    • {% else %} -
  • {{ demo.title }} +
  • {{ demo.title }} {% endif %} {% endfor %}
@@ -36,13 +50,18 @@
- -

{{ page.title }}

+ {% if page.category != 'homepage' %} +

{{ page.title }}

+ {% endif %} {{ content }} - {% include footer.html %} +
-{% include html-foot.html %} \ No newline at end of file + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index a11004e..9bd6404 100644 --- a/css/style.css +++ b/css/style.css @@ -395,30 +395,23 @@ body { width: 100%; } +#content { + margin-left: 210px; +} + /**** Docs ****/ -.doc #content { +.docs #content { max-width: 640px; } -.doc a:hover { +.docs #content a:hover { border-bottom: 1px dotted; } - -#content { - margin-left: 220px; -} - /**** Doc page nav ****/ -#site-nav h1, -#demo-nav { - font-size: 24px; - margin-bottom: 0.5em; - font-weight: bold; - font-family: 'Helvetica Neue', Arial, sans-serif; -} + #site-nav { width: 200px; @@ -430,7 +423,11 @@ body { } #site-nav h1 { + font-size: 24px; + margin-bottom: 0.5em; margin-top: 0; + font-weight: bold; + font-family: 'Helvetica Neue', Arial, sans-serif; } #site-nav h2 { @@ -440,15 +437,8 @@ body { border-top: none; } -#site-nav h1 a, -#demo-nav a { color: #4FB; } -#site-nav h1 a:hover, -#demo-nav a:hover { color: #4BF; } - -#demo-nav { - padding-bottom: 0.5em; - border-bottom: 1px solid #333; -} +#site-nav h1 a { color: #4FB; } +#site-nav h1 a:hover { color: #4BF; } #site-nav ul { list-style: none; @@ -479,18 +469,18 @@ body { /**** Doc content ****/ -.doc h2 { +.docs h2 { border-top: 1px solid #333; padding-top: 0.8em; } -.doc h2:target { +.docs h2:target { padding: 10px; background: white; color: #222; } -.doc h3 { +.docs h3 { color: #FEC; background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; @@ -498,7 +488,7 @@ body { font-size: 1.15em; } -.doc h4 { +.docs h4 { margin-bottom: 0.5em; font-size: 14px; } @@ -559,27 +549,27 @@ h3#options { /* Tagline */ -.doc .tagline { +.docs .tagline { font-size: 22px; font-weight: 300; } /* as-is from MIT */ -.doc .as-is { +.docs .as-is { font-size: 95%; } /* Commercial license blurb */ -.doc #commercial { +.docs #commercial { background: white; padding: 10px; font-size: 14px; color: #1F1F1D; } -.doc #commercial a { font-weight: bold;} +.docs #commercial a { font-weight: bold;} /**** Pygments ****/ From cce3c6b4564178c545839928c9f681c97a342cb1 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 22:47:51 -0400 Subject: [PATCH 13/31] demos : properly check for changeLayoutMode --- _includes/option-set-buttons.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/option-set-buttons.js b/_includes/option-set-buttons.js index ab930c0..0b63054 100644 --- a/_includes/option-set-buttons.js +++ b/_includes/option-set-buttons.js @@ -19,7 +19,7 @@ // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; - if ( key === 'layoutMode' && changeLayoutMode ) { + if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { From 8dea0b3b554640dcda680bfa1fa9429dfdb31f3c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 22:49:03 -0400 Subject: [PATCH 14/31] docs : homepage : use default layout; new jumbled up isotope container --- css/style.css | 72 +++++++++++++++---- index.html | 188 +++++++++++++++++++++----------------------------- 2 files changed, 136 insertions(+), 124 deletions(-) diff --git a/css/style.css b/css/style.css index 9bd6404..367cf32 100644 --- a/css/style.css +++ b/css/style.css @@ -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 ****/ diff --git a/index.html b/index.html index 7232267..5780ac7 100644 --- a/index.html +++ b/index.html @@ -1,133 +1,93 @@ --- -title: Index -layout: nil +title: Isotope +layout: default +category: homepage --- - - - - - {{ site.name }} - - - - - - - - -

{{ site.name }}

Filter:

-

Sort:

-

Layout:

-
-
    - -
  • An exquisite jQuery plugin for magical layouts
    • -
  • Reveal & hide items with filtering
    • -
  • Re–order items with sorting
    • -
  • Dynamic, intelligent layouts
    • -
  • Captivating animations
    • -
  • Sort items by just about anything
    • -
  • Powerful methods, simple syntax
    • -
  • Progressively enhanced for CSS3 transforms & transitions
    • - {% for doc in site.categories.docs reversed %} - {% if doc.layout != 'index-page' %} -
  • Docs: {{ doc.title }}
    • - {% endif %} +
    + {% 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' %} -
  • Demo: {{ demo.title }}
    • - {% endif %} - {% endfor %} -
  • Download jquery.isotope.min.js
    • -
  • Download this project
    • -
  • Isotope on GitHub
    • -
- +
An exquisite jQuery plugin for magical layouts
+
Reveal & hide items with filtering
+
Re–order items with sorting
+
Dynamic, intelligent layouts
+
Captivating animations
+
Sort items by just about anything
+
Powerful methods, simple syntax
+
Progressively enhanced for CSS3 transforms & transitions
+
Down​load jquery​.isotope​.min.js
+
Down​load this project
+
Isotope on GitHub
+ +
- {% include footer.html %} - - -{% include html-foot.html %} \ No newline at end of file From df244e107031cc6b9935585d88729ad3dd8a82ca Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 15 Jun 2011 23:06:56 -0400 Subject: [PATCH 15/31] docs : css : .demos #content { height: 100%; }; fixes bug with horizontal layouts --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 367cf32..02fc8b8 100644 --- a/css/style.css +++ b/css/style.css @@ -400,6 +400,10 @@ body { margin-left: 210px; } +.demos #content { + height: 100%; +} + /**** Docs ****/ .docs #content { From 80bd172a2ffcb39d43ec57611ed362281988ba52 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 08:10:05 -0400 Subject: [PATCH 16/31] demos : hash history : enable back button on first click --- _posts/demos/2011-06-13-hash-history.html | 39 +++++++++++++---------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index 96cec26..2bc0fe3 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -69,8 +69,14 @@ $(function(){ var $container = $('#container'), // object that will keep track of options + defaultOptions = { + filter: '*', + sortBy: 'original-order', + sortAscending: true, + layoutMode: 'masonry' + }, isotopeOptions = {}; - + // hacky way of adding random size classes $container.find('.element').each(function(){ @@ -81,7 +87,7 @@ $(function(){ $(this).addClass('height2'); } }); - + // set up Isotope $container.isotope({ itemSelector : '.element', @@ -151,29 +157,28 @@ $(function(){ $(window).bind( 'hashchange', function( event ){ // get options object from hash - var hashOptions = $.deparam.fragment( window.location.href, true ); - - // do not proceed if hash options aren't new - if ( hashOptions === isotopeOptions ) { - return; - } - + var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {}, + options = {}; + + $.extend( options, defaultOptions, hashOptions ); isotopeOptions = hashOptions; + // apply options from hash - $container.isotope( isotopeOptions ); + $container.isotope( options ); // if option link was not clicked - // then we'll need to update selected links with + // then we'll need to update selected links if ( !isOptionLinkClicked ) { // iterate over options - for ( var key in isotopeOptions ) { - var hrefObj = {}; - hrefObj[ key ] = isotopeOptions[ key ]; + var hrefObj, hrefValue, $selectedLink; + for ( var key in options ) { + hrefObj = {}; + hrefObj[ key ] = options[ key ]; // convert object into parameter string // i.e. { filter: 'inner-transition' } -> 'filter=inner-transition' - var hrefValue = $.param( hrefObj ), - // get matching link - $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); + hrefValue = $.param( hrefObj ), + // get matching link + $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); changeSelectedLink( $selectedLink ); } } From 87fad385231af425a062d8666b184ce46e4afc77 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 08:10:57 -0400 Subject: [PATCH 17/31] docs : homepage : make features like elements --- css/style.css | 61 ++++++++------------------------------------------- index.html | 52 ++++++++++++++++++++++++++++++++++--------- 2 files changed, 51 insertions(+), 62 deletions(-) diff --git a/css/style.css b/css/style.css index 02fc8b8..4f1193b 100644 --- a/css/style.css +++ b/css/style.css @@ -605,48 +605,6 @@ 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; - float: left; - 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; -} -#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 { - background: white; -} - -#super-list li.link a:hover { color: #222; } - -#super-list.masonry li { - width: 216px; -} -#super-list.masonry li.feature, -#super-list.masonry li.link { - width: 436px; -} /**** Sites using Isotope ****/ @@ -711,19 +669,11 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ padding-top: 8px; } -.super-list .link, -.super-list .feature { - font-size: 26px; +.super-list .link { + font-size: 24px; line-height: 1.2em; font-weight: 300; margin: 5px; - height: 90px; -} - -.super-list .feature { - width: 330px; - padding: 10px; - background: #111; } .super-list .link { @@ -749,6 +699,13 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ color: #111; } +.super-list .feature .name { + bottom: auto; + top: 140px; + left: 18px; + font-size: 20px; +} + /**** Infinite Scroll ****/ #infscr-loading { diff --git a/index.html b/index.html index 5780ac7..d375183 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,39 @@ title: Isotope layout: default category: homepage +features: + - name: An exquisite jQuery plugin for magical layouts + symbol: Iso + number: 1 + category: alkali + - name: Reveal & hide items with filtering + symbol: Filt + number: 11 + category: alkaline-earth + - name: Re–order items with sorting + symbol: Srt + number: 27 + category: lanthanoid + - name: Dynamic, intelligent layouts + symbol: Lao + number: 31 + category: actinoid + - name: Captivating animations + symbol: Ani + number: 41 + category: transition + - name: Sort items by just about anything + symbol: Any + number: 51 + category: post-transition + - name: Powerful methods, simple syntax + symbol: Pow + number: 61 + category: metalloid + - name: Progressively enhanced for CSS3 transforms & transitions + symbol: CS3 + number: 71 + category: halogen ---
@@ -9,7 +42,7 @@ category: homepage

Filter:

@@ -32,19 +65,18 @@ category: homepage
-
+
{% for elem_number in site.random_order limit:30 %} {% assign element = site.elements[elem_number] %} {% include element-partial.html %} {% endfor %} -
An exquisite jQuery plugin for magical layouts
-
Reveal & hide items with filtering
-
Re–order items with sorting
-
Dynamic, intelligent layouts
-
Captivating animations
-
Sort items by just about anything
-
Powerful methods, simple syntax
-
Progressively enhanced for CSS3 transforms & transitions
+ {% for feature in page.features %} +
+

{{ feature.number }}

+

{{ feature.symbol }}

+

{{ feature.name }}

+
+ {% endfor %}
Down​load jquery​.isotope​.min.js
Down​load this project
Isotope on GitHub
From 61301e0af4b509fa5799bc37c6528e2c9becbf1f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 09:53:08 -0400 Subject: [PATCH 18/31] docs : homepage : yellow and black links --- css/style.css | 34 ++++++++++++++++++++++++---------- index.html | 4 ++-- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 4f1193b..fd18dbc 100644 --- a/css/style.css +++ b/css/style.css @@ -684,19 +684,34 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ .super-list .link a { display: block; padding: 10px; + padding-left: 65px; 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; + background: #1F1E1D; + color: #FE5; + -webkit-border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 14px; +} + +.super-list .link a:before { + content: '➔'; + font-size: 70px; + position: absolute; + top: 30px; + left: 5px; + -webkit-transform: rotate(90deg); +} + +.super-list .link.away a:before { + top: 25px; + left: 0px; + -webkit-transform: rotate(-45deg); + } .super-list .link a:hover { - text-shadow: none; - background: white; - color: #111; + background: #E58; + color: white; } .super-list .feature .name { @@ -730,4 +745,3 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } - diff --git a/index.html b/index.html index d375183..1f8e4e0 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ features: number: 1 category: alkali - name: Reveal & hide items with filtering - symbol: Filt + symbol: Flt number: 11 category: alkaline-earth - name: Re–order items with sorting @@ -79,7 +79,7 @@ features: {% endfor %}
Down​load jquery​.isotope​.min.js
Down​load this project
-
Isotope on GitHub
+
Isotope on GitHub
From 6cb338e3dd8e7832b795d6251ff757c5e3d5238c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 10:44:45 -0400 Subject: [PATCH 19/31] demos : hash history : commented, jsHinted --- _posts/demos/2011-06-13-hash-history.html | 31 ++++++++++------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index 2bc0fe3..7edf06e 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -69,13 +69,14 @@ $(function(){ var $container = $('#container'), // object that will keep track of options + isotopeOptions = {}, + // defaults, used if not explicitly set in hash defaultOptions = { filter: '*', sortBy: 'original-order', sortAscending: true, layoutMode: 'masonry' - }, - isotopeOptions = {}; + }; // hacky way of adding random size classes @@ -88,8 +89,7 @@ $(function(){ } }); - // set up Isotope - $container.isotope({ + var setupOptions = $.extend( defaultOptions, { itemSelector : '.element', masonry : { columnWidth : 120 @@ -117,8 +117,10 @@ $(function(){ } }); + // set up Isotope + $container.isotope( setupOptions ); + var $optionSets = $('#options').find('.option-set'), - $optionLinks = $optionSets.find('a'), isOptionLinkClicked = false; // switches selected class on buttons @@ -130,27 +132,23 @@ $(function(){ } - $optionLinks.click(function(){ + $optionSets.find('a').click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return; } - changeSelectedLink( $this ); - // get href attr, remove leading # var href = $this.attr('href').replace( /^#/, '' ), // convert href into object // i.e. 'filter=inner-transition' -> { filter: 'inner-transition' } option = $.deparam( href, true ); - + // apply new option to previous $.extend( isotopeOptions, option ); - // set hash, triggers hashchange on window $.bbq.pushState( isotopeOptions ); isOptionLinkClicked = true; - return false; }); @@ -158,13 +156,12 @@ $(function(){ $(window).bind( 'hashchange', function( event ){ // get options object from hash var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {}, - options = {}; - - $.extend( options, defaultOptions, hashOptions ); - isotopeOptions = hashOptions; - + // apply defaults where no option was specified + options = $.extend( {}, defaultOptions, hashOptions ); // apply options from hash $container.isotope( options ); + // save options + isotopeOptions = hashOptions; // if option link was not clicked // then we'll need to update selected links @@ -176,7 +173,7 @@ $(function(){ hrefObj[ key ] = options[ key ]; // convert object into parameter string // i.e. { filter: 'inner-transition' } -> 'filter=inner-transition' - hrefValue = $.param( hrefObj ), + hrefValue = $.param( hrefObj ); // get matching link $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); changeSelectedLink( $selectedLink ); From 62a118ddfe42349027a293fb15a2bbeaa769821e Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 11:12:14 -0400 Subject: [PATCH 20/31] docs : remove .floated class --- _includes/elements-demo-head.html | 2 +- _includes/filter-buttons.html | 2 +- _includes/layout-options.html | 2 +- _includes/sort-buttons.html | 4 ++-- _posts/demos/2011-01-02-adding-items.html | 2 +- .../demos/2011-03-29-combination-filters.html | 2 +- _posts/demos/2011-05-22-category-rows.html | 2 +- _posts/demos/2011-06-13-hash-history.html | 8 ++++---- _posts/tests/2011-03-27-flash01.html | 2 +- .../2011-04-26-item-position-data01.html | 2 +- .../tests/2011-05-13-jquery-animation01.html | 2 +- _posts/tests/2011-05-18-centered-masonry.html | 2 +- .../2011-05-24-elements-complete-test.html | 2 +- _posts/tests/2011-05-31-tiny-text.html | 2 +- css/style.css | 20 +++++++++++-------- index.html | 6 +++--- 16 files changed, 33 insertions(+), 29 deletions(-) diff --git a/_includes/elements-demo-head.html b/_includes/elements-demo-head.html index a617434..6d911ad 100644 --- a/_includes/elements-demo-head.html +++ b/_includes/elements-demo-head.html @@ -12,7 +12,7 @@

Etc

-
    +
    • Toggle variable sizes
    • Insert new elements
      • diff --git a/_includes/filter-buttons.html b/_includes/filter-buttons.html index 12202ef..1e95eb3 100644 --- a/_includes/filter-buttons.html +++ b/_includes/filter-buttons.html @@ -1,7 +1,7 @@

      Filters

      -
        +
        • show all
        • metal
        • transition
          • diff --git a/_includes/layout-options.html b/_includes/layout-options.html index 3cacfc0..e806a91 100644 --- a/_includes/layout-options.html +++ b/_includes/layout-options.html @@ -1,7 +1,7 @@

          Layout modes

          -
            +
            • masonry
            • fitRows
            • cellsByRow
              • diff --git a/_includes/sort-buttons.html b/_includes/sort-buttons.html index e87577f..0f3893c 100644 --- a/_includes/sort-buttons.html +++ b/_includes/sort-buttons.html @@ -1,7 +1,7 @@

              Sort

              -
                +
                • original-order
                • name
                • symbol
                  • @@ -12,7 +12,7 @@

                  Sort direction

                  -
                    + diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html index 60af53c..8127f4a 100644 --- a/_posts/demos/2011-01-02-adding-items.html +++ b/_posts/demos/2011-01-02-adding-items.html @@ -13,7 +13,7 @@ related: methods
-
    +
    • Insert new elements
    • Append new elements
    • Prepend
      • diff --git a/_posts/demos/2011-03-29-combination-filters.html b/_posts/demos/2011-03-29-combination-filters.html index 9cf6f2b..65e4b73 100644 --- a/_posts/demos/2011-03-29-combination-filters.html +++ b/_posts/demos/2011-03-29-combination-filters.html @@ -23,7 +23,7 @@ schema: {% for group in page.schema %}

      {{ group.name }}

      -
        +
        • any {% for filter in group.filters %}
        • {{ filter }} diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index bdc47e2..ae26205 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -15,7 +15,7 @@ related: layouts

          Etc

          -
            + diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index 7edf06e..b4f589b 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -13,7 +13,7 @@ related: z-etc

            Filters

            -
              +
              • show all
              • metal
              • transition
                • @@ -27,7 +27,7 @@ related: z-etc

                Sort

                -
                  +
                  • original-order
                  • name
                  • symbol
                    • @@ -38,14 +38,14 @@ related: z-etc

                    Sort direction

                    -
                      +

                      Layout modes

                      -
                        +
                        • masonry
                        • fitRows
                        • cellsByRow
                          • diff --git a/_posts/tests/2011-03-27-flash01.html b/_posts/tests/2011-03-27-flash01.html index 7453fa8..0eebc30 100644 --- a/_posts/tests/2011-03-27-flash01.html +++ b/_posts/tests/2011-03-27-flash01.html @@ -29,7 +29,7 @@ category: tests

                          Filters

                          -
                            +
                            • show all
                            • link
                            • audio
                              • diff --git a/_posts/tests/2011-04-26-item-position-data01.html b/_posts/tests/2011-04-26-item-position-data01.html index 4e1094a..eeec37b 100644 --- a/_posts/tests/2011-04-26-item-position-data01.html +++ b/_posts/tests/2011-04-26-item-position-data01.html @@ -14,7 +14,7 @@ category: tests

                              Etc

                              -
                                + diff --git a/_posts/tests/2011-05-13-jquery-animation01.html b/_posts/tests/2011-05-13-jquery-animation01.html index 7f8d59f..7fba8fc 100644 --- a/_posts/tests/2011-05-13-jquery-animation01.html +++ b/_posts/tests/2011-05-13-jquery-animation01.html @@ -26,7 +26,7 @@ category: tests

                                Etc

                                -
                                  + diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index f33a9da..63e3c23 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -22,7 +22,7 @@ category: tests

                                  Etc

                                  -
                                    +
                                    • Toggle variable sizes
                                    • Insert new elements
                                      • diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html index 316d5b6..68e0a6e 100644 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ b/_posts/tests/2011-05-24-elements-complete-test.html @@ -18,7 +18,7 @@ category: tests

                                      Etc

                                      -
                                        +
                                        • Toggle variable sizes
                                        • Insert new elements
                                          • diff --git a/_posts/tests/2011-05-31-tiny-text.html b/_posts/tests/2011-05-31-tiny-text.html index fa01718..c6227c8 100644 --- a/_posts/tests/2011-05-31-tiny-text.html +++ b/_posts/tests/2011-05-31-tiny-text.html @@ -28,7 +28,7 @@ lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                          Filters

                                          -
                                            +
                                            • show all
                                            • red
                                            • blue
                                              • diff --git a/css/style.css b/css/style.css index fd18dbc..4952315 100644 --- a/css/style.css +++ b/css/style.css @@ -267,19 +267,19 @@ body { margin-left: 1.5em; } -#options .floated li { +#options li { float: left; + margin-bottom: 0.2em; } #options li a { - display: inline-block; + display: block; padding: 0.4em 0.5em; background-color: #DDD; color: #222; font-weight: bold; - margin-bottom: 0.2em; text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); - background-image: -moz-linear-gradient(-90deg, + background-image: -moz-linear-gradient( -90deg, hsla( 0, 0%, 100%, 0.5 ) , hsla( 0, 0%, 100%, 0.0 ) ); @@ -287,6 +287,10 @@ body { from( hsla( 0, 0%, 100%, 0.5 ) ), to( hsla( 0, 0%, 100%, 0.0 ) ) ); + background-image: -o-linear-gradient( -90deg, + hsla( 0, 0%, 100%, 0.5 ) , + hsla( 0, 0%, 100%, 0.0 ) + ); } #options li a:hover { @@ -301,21 +305,21 @@ body { box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); } -#options .floated li a { +#options li a { border-left: 1px solid hsla( 0, 0%, 100%, 0.3 ); border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); } -#options .floated li:first-child a { +#options li:first-child a { border-radius: 7px 0 0 7px; border-left: none; } -#options .floated li:last-child a { +#options li:last-child a { border-radius: 0 7px 7px 0; } -#options .option-set li a.selected { +#options li a.selected { background-color: #13F; text-shadow: none; color: white; diff --git a/index.html b/index.html index 1f8e4e0..a91c8b1 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@ features:

                                              Filter:

                                              -

                                              Sort:

                                              -

                                              Layout:

                                              -
                                                +
                                                • masonry
                                                • fitRows
                                                • straightDown
                                                  • From 3958eb370ee7e6f29092af7b1e0a8040a8a0d8b4 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 17:31:28 -0400 Subject: [PATCH 21/31] docs : add hash history with jQuery BBQ ten gallon hat tip @cowboy --- .../2011-06-16-hash-history-jquery-bbq.mdown | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 _posts/docs/2011-06-16-hash-history-jquery-bbq.mdown diff --git a/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown b/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown new file mode 100644 index 0000000..04375bd --- /dev/null +++ b/_posts/docs/2011-06-16-hash-history-jquery-bbq.mdown @@ -0,0 +1,86 @@ +--- + +title: Hash history with jQuery BBQ +category: docs +layout: default +toc: + - { title: Markup, anchor: markup } + - { title: jQuery script, anchor: jquery_script } + +--- + +As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman's [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) allows us to do just that. + +> jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. + +[**See Demo: Hash history**](../demos/hash-history.html) + +BBQ is a marvelous plugin that provides for a lot more functionality. The [hash history demo](../demos/hash-history.html) uses multiple options (`sortBy`, `sortAscending`, and `layoutMode` in addition to `filter`), the ability to use back-button history, and properly highlights selected links. + +Given BBQ's tremendous capabilities, the code can grow to be a bit complex. Be sure to read through [BBQ's docs](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html) and take look at [its examples](http://benalman.com/code/projects/jquery-bbq/examples/) before you dive in and code up your own solution. + +## Markup + +Instead of setting the option values and keys with `data` attributes, we can add the option in the `href` for each link. + +{% highlight html %} + + + +{% endhighlight %} + +The `href` value is a serialized string, suitable for a URL. These values can be created with [jQuery.param()](http://api.jquery.com/jQuery.param/). + +{% highlight javascript %} + +$.param({ filter: '.metal' }) +// >> "filter=.metal" +$.param({ filter: '.alkali, alkaline-earth' }) +// >> "filter=.alkali%2C+alkaline-earth" +$.param({ filter: ':not(.transition)' }) +// >> "#filter=%3Anot(.transition)" + +{% endhighlight %} + +## jQuery script + +These serialized `href` values can be converted into their proper jQuery object form when clicked using [jQuery.deparam()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam) from jQuery BBQ. + +{% highlight javascript %} + +$('.option-set a').click(function(){ + // get href attr, remove leading # + var href = $(this).attr('href').replace( /^#/, '' ), + // convert href into object + // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } + option = $.deparam( href, true ); + // set hash, triggers hashchange on window + $.bbq.pushState( option ); + return false; +}); + +{% endhighlight %} + +Calling [$.bbq.pushState()](http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState) will trigger the `hashchange` event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance. + +{% highlight javascript %} + +$(window).bind( 'hashchange', function( event ){ + // get options object from hash + var hashOptions = $.deparam.fragment(); + // apply options from hash + $container.isotope( hashOptions ); +}) + // trigger hashchange to capture any hash data on init + .trigger('hashchange'); + +{% endhighlight %} + +Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked. From 9ba800a2e4136016c7d44e6478b1137bd1e6f2bf Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 17:31:44 -0400 Subject: [PATCH 22/31] docs : homepage : mix up features --- index.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index a91c8b1..ce9eb67 100644 --- a/index.html +++ b/index.html @@ -7,34 +7,34 @@ features: symbol: Iso number: 1 category: alkali - - name: Reveal & hide items with filtering - symbol: Flt - number: 11 - category: alkaline-earth + - name: Dynamic, intelligent layouts + symbol: Dyn + number: 31 + category: actinoid - name: Re–order items with sorting symbol: Srt number: 27 category: lanthanoid - - name: Dynamic, intelligent layouts - symbol: Lao - number: 31 - category: actinoid + - name: Powerful methods, simple syntax + symbol: Pow + number: 61 + category: metalloid + - name: Reveal & hide items with filtering + symbol: Flt + number: 11 + category: alkaline-earth - name: Captivating animations symbol: Ani number: 41 category: transition + - name: Progressively enhanced for CSS3 transforms & transitions + symbol: Pro + number: 71 + category: halogen - name: Sort items by just about anything symbol: Any number: 51 category: post-transition - - name: Powerful methods, simple syntax - symbol: Pow - number: 61 - category: metalloid - - name: Progressively enhanced for CSS3 transforms & transitions - symbol: CS3 - number: 71 - category: halogen ---
                                                  From c15a0eef31b0935138298c8e3e7faf2b8e74d6f4 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 17:32:13 -0400 Subject: [PATCH 23/31] demos : hash-history : clean up; comments --- _posts/demos/2011-06-13-hash-history.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index b4f589b..0093c51 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -21,8 +21,8 @@ related: z-etc
                                                • nonmetal
                                                • inner-transition
                                                • alkali and alkaline-earth
                                                  • -
                                                • not transition
                                                  • -
                                                • metal but not transition
                                                  • +
                                                • not transition
                                                  • +
                                                • metal but not transition

                                                Sort

                                                @@ -142,7 +142,7 @@ $(function(){ // get href attr, remove leading # var href = $this.attr('href').replace( /^#/, '' ), // convert href into object - // i.e. 'filter=inner-transition' -> { filter: 'inner-transition' } + // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } option = $.deparam( href, true ); // apply new option to previous $.extend( isotopeOptions, option ); @@ -172,7 +172,7 @@ $(function(){ hrefObj = {}; hrefObj[ key ] = options[ key ]; // convert object into parameter string - // i.e. { filter: 'inner-transition' } -> 'filter=inner-transition' + // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition' hrefValue = $.param( hrefObj ); // get matching link $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]'); From 5c441487cf12de035c85a7830cd6a1136dd7dc4a Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 17:32:36 -0400 Subject: [PATCH 24/31] docs : css : homepage tweaks --- css/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 4952315..76b0923 100644 --- a/css/style.css +++ b/css/style.css @@ -89,7 +89,7 @@ h1, h2, h3, p, ul, ol, pre, dl { } h1, h2, #super-list, .element, .tagline, #index-list, -.super-list .feature, .super-list .link { +.super-list .link { font-family: 'Helvetica Neue', Arial, sans-serif; } @@ -613,6 +613,7 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ /**** Sites using Isotope ****/ #sites h2 { + display: none; padding: 0.4em; line-height: 32px; margin-bottom: 0.4em; @@ -674,6 +675,8 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ } .super-list .link { + float: left; + position: relative; font-size: 24px; line-height: 1.2em; font-weight: 300; From c80da7a91227f45dfc9a56602be35ea2ca8c4872 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 20:45:29 -0400 Subject: [PATCH 25/31] demos : relayout : add clearfix; use .click() --- _posts/demos/2010-12-31-relayout.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html index c79f9b9..0da7b0d 100644 --- a/_posts/demos/2010-12-31-relayout.html +++ b/_posts/demos/2010-12-31-relayout.html @@ -11,7 +11,7 @@ related: methods
                                              -
                                              @@ -40,7 +40,7 @@ related: methods }); // change size of clicked element - $container.find('.element').live('click', function(){ + $container.find('.element').click(function(){ $(this).toggleClass('large'); $container.isotope('reLayout'); }); From f2b26d2cb1716caf6f14085ed6e05add3a1b77fd Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 20:45:49 -0400 Subject: [PATCH 26/31] docs : revise acknowlegments --- _posts/docs/2010-12-01-introduction.mdown | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index 8c3b6b1..bbf2ebd 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -78,12 +78,13 @@ Isotope enables a wealth of functionality. But just because you can take advanta ## Acknowledgments -+ [**Faruk Ateş**](http://farukat.es) for [Modernizr](http://www.modernizr.com/) (partially used within Isotope) -+ [**Louis-Rémi Babé**](http://twitter.com/Louis_Remi) for [jQuery smartresize](https://github.com/louisremi/jquery-smartresize) (used within Isotope) and for [jQuery transform](https://github.com/louisremi/jquery.transform.js) which clued me in to using jQuery 1.4.3's CSS hooks ++ [**"Cowboy" Ben Alman**](http://benalman.com/) for [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) (included with docs) ++ [**Louis-Rémi Babé**](http://twitter.com/Louis_Remi) for [jQuery smartresize](https://github.com/louisremi/jquery-smartresize) (used within Isotope) and for [jQuery transform](https://github.com/louisremi/jquery.transform.js) which clued me in to using jQuery 1.4.3's CSS hooks + [**Jacek Galanciak**](http://razorjack.net/) for [jQuery Quicksand](http://razorjack.net/quicksand/), an early kernel of inspiration + [**Ralph Holzmann**](http://twitter.com/#!/ralphholzmann) for re-writing the [jQuery Plugins/Authoring tutorial](http://docs.jquery.com/Plugins/Authoring) and opened my eyes to [Plugin Methods](http://docs.jquery.com/Plugins/Authoring#Plugin_Methods) pattern + [**Eric Hynds**](http://www.erichynds.com/) for his article [Using $.widget.bridge Outside of the Widget Factory](http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/) which provided the architecture for Isotope -+ [**Paul Irish**](http://paul-irish.com) for [Infinite Scroll](http://infinite-scroll.com) (included with docs), the [imagesLoaded plugin](http://gist.github.com/268257) (included with Isotope), [Debounced resize() plugin](http://paulirish.com/demo/resize) (provided base for smartresize), and of course [Modernizr](http://www.modernizr.com/) -+ The [**jQuery UI Team**](http://jqueryui.com/about) for [$.widget.bridge](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L62-107) (used within Isotope) ++ [**Paul Irish**](http://paul-irish.com) for [Infinite Scroll](http://infinite-scroll.com) (included with docs), the [imagesLoaded plugin](http://gist.github.com/268257) (included with Isotope), and [Debounced resize() plugin](http://paulirish.com/demo/resize) (provided base for smartresize) ++ The [**jQuery UI Team**](http://jqueryui.com/about) for [$.widget.bridge](https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L113-155) (partially used within Isotope) ++ The Modernizr team for [Modernizr](http://www.modernizr.com/) (partially used within Isotope) + [**Juriy Zaytsev aka "kangax"**](http://perfectionkills.com) for [getStyleProperty](http://perfectionkills.com/feature-testing-css-properties/) (used within Isotope) From a295aabb517e43c1729b30843d39f6dbc9d86480 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 20:46:10 -0400 Subject: [PATCH 27/31] docs : license : revise link to license purchase --- _posts/docs/2011-12-20-license.mdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/docs/2011-12-20-license.mdown b/_posts/docs/2011-12-20-license.mdown index 66f5a56..b010cbb 100644 --- a/_posts/docs/2011-12-20-license.mdown +++ b/_posts/docs/2011-12-20-license.mdown @@ -11,7 +11,7 @@ toc: Isotope may be used in non-commercial and personal applications for free. -For commercial applications, you may license Isotope with the purchase of a one-time fee per developer seat (how many of you will be developing with Isotope) . Once purchased, you may use Isotope in all your future commercial applications. Commercial licenses may be purchased at [metafizzy.co](http://metafizzy.co). +For commercial applications, you may license Isotope with the purchase of a one-time fee per developer seat (how many of you will be developing with Isotope) . Once purchased, you may use Isotope in all your future commercial applications. [Commercial licenses may be purchased at metafizzy.co](http://metafizzy.co/#isotope-license). Copyright © 2011 David DeSandro / Metafizzy LLC From 4a52f9329d333337ca19a99a13ca76ff87c011bd Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 20:51:43 -0400 Subject: [PATCH 28/31] docs : remove related metadata --- _posts/demos/2010-12-12-basic.html | 1 - _posts/demos/2010-12-13-elements-complete.html | 1 - _posts/demos/2010-12-16-elements-partial.html | 1 - _posts/demos/2010-12-29-layout-modes.html | 1 - _posts/demos/2010-12-30-filtering.html | 1 - _posts/demos/2010-12-30-sorting.html | 1 - _posts/demos/2010-12-31-relayout.html | 1 - _posts/demos/2011-01-02-adding-items.html | 1 - _posts/demos/2011-01-02-infinite-scroll.html | 1 - _posts/demos/2011-01-11-images.html | 1 - _posts/demos/2011-03-29-combination-filters.html | 1 - _posts/demos/2011-05-22-category-rows.html | 1 - _posts/demos/2011-06-13-hash-history.html | 1 - _posts/docs/2010-12-01-introduction.mdown | 1 - _posts/docs/2010-12-03-options.mdown | 1 - _posts/docs/2010-12-04-methods.mdown | 1 - _posts/docs/2010-12-05-layout-modes.mdown | 1 - _posts/docs/2010-12-06-filtering.mdown | 1 - _posts/docs/2010-12-07-sorting.mdown | 1 - _posts/docs/2010-12-09-animating.mdown | 1 - _posts/docs/2010-12-10-adding-items.mdown | 1 - _posts/docs/2011-05-25-extending-isotope.mdown | 1 - _posts/docs/2011-12-11-help.mdown | 1 - _posts/docs/2011-12-20-license.mdown | 1 - 24 files changed, 24 deletions(-) diff --git a/_posts/demos/2010-12-12-basic.html b/_posts/demos/2010-12-12-basic.html index e2379df..829c2c1 100644 --- a/_posts/demos/2010-12-12-basic.html +++ b/_posts/demos/2010-12-12-basic.html @@ -2,7 +2,6 @@ title: Basic layout: default category: demos -related: a-intro ---
                                              diff --git a/_posts/demos/2010-12-13-elements-complete.html b/_posts/demos/2010-12-13-elements-complete.html index adea08d..9241f8f 100644 --- a/_posts/demos/2010-12-13-elements-complete.html +++ b/_posts/demos/2010-12-13-elements-complete.html @@ -2,7 +2,6 @@ title: Elements Complete layout: default category: demos -related: a-intro --- {% include elements-demo-head.html %} diff --git a/_posts/demos/2010-12-16-elements-partial.html b/_posts/demos/2010-12-16-elements-partial.html index 3da84f7..bbeb6d9 100644 --- a/_posts/demos/2010-12-16-elements-partial.html +++ b/_posts/demos/2010-12-16-elements-partial.html @@ -2,7 +2,6 @@ title: Elements Partial layout: default category: demos -related: a-intro --- {% include elements-demo-head.html %} diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index 426b22a..8c71191 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -2,7 +2,6 @@ title: Layout modes layout: default category: demos -related: layouts ---
                                              diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html index e3c4588..b277bf2 100644 --- a/_posts/demos/2010-12-30-filtering.html +++ b/_posts/demos/2010-12-30-filtering.html @@ -2,7 +2,6 @@ title: Filtering layout: default category: demos -related: filtering ---
                                              diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html index 452ce11..137ed65 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -2,7 +2,6 @@ title: Sorting layout: default category: demos -related: sorting ---
                                              diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html index 0da7b0d..f1aae6b 100644 --- a/_posts/demos/2010-12-31-relayout.html +++ b/_posts/demos/2010-12-31-relayout.html @@ -2,7 +2,6 @@ title: reLayout layout: default category: demos -related: methods ---
                                              diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html index 8127f4a..d21ef77 100644 --- a/_posts/demos/2011-01-02-adding-items.html +++ b/_posts/demos/2011-01-02-adding-items.html @@ -2,7 +2,6 @@ title: Adding items layout: default category: demos -related: methods ---
                                              diff --git a/_posts/demos/2011-01-02-infinite-scroll.html b/_posts/demos/2011-01-02-infinite-scroll.html index 9a974f5..f222301 100644 --- a/_posts/demos/2011-01-02-infinite-scroll.html +++ b/_posts/demos/2011-01-02-infinite-scroll.html @@ -2,7 +2,6 @@ title: Infinite Scroll layout: default category: demos -related: layout infinite_scroll: true --- diff --git a/_posts/demos/2011-01-11-images.html b/_posts/demos/2011-01-11-images.html index a578639..4df2174 100644 --- a/_posts/demos/2011-01-11-images.html +++ b/_posts/demos/2011-01-11-images.html @@ -2,7 +2,6 @@ title: Images layout: default category: demos -related: z-etc photos: - Stanley - Officer diff --git a/_posts/demos/2011-03-29-combination-filters.html b/_posts/demos/2011-03-29-combination-filters.html index 65e4b73..90fd04f 100644 --- a/_posts/demos/2011-03-29-combination-filters.html +++ b/_posts/demos/2011-03-29-combination-filters.html @@ -2,7 +2,6 @@ title: Combination filters layout: default category: demos -related: filtering schema: - name: color filters: [ red, blue, yellow ] diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index ae26205..5e09fe3 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -2,7 +2,6 @@ title: Category rows layout: default category: demos -related: layouts ---
                                              diff --git a/_posts/demos/2011-06-13-hash-history.html b/_posts/demos/2011-06-13-hash-history.html index 0093c51..5d559f8 100644 --- a/_posts/demos/2011-06-13-hash-history.html +++ b/_posts/demos/2011-06-13-hash-history.html @@ -2,7 +2,6 @@ title: Hash history layout: default category: demos -related: z-etc ---
                                              diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index bbf2ebd..030ad93 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -3,7 +3,6 @@ title: Introduction category: docs layout: default -related: a-intro toc: - { title: Features, anchor: features } - { title: Licensing, anchor: licensing } diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index a4f2736..e73fc99 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -4,7 +4,6 @@ title: Options category: docs layout: default body_class: option-def -related: a-intro toc: - { title: animationEngine, anchor: animationengine } - { title: animationOptions, anchor: animationoptions } diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown index 2f8abcc..05b0b70 100644 --- a/_posts/docs/2010-12-04-methods.mdown +++ b/_posts/docs/2010-12-04-methods.mdown @@ -3,7 +3,6 @@ title: Methods category: docs layout: default -related: methods toc: - { title: addItems, anchor: additems } - { title: appended, anchor: appended } diff --git a/_posts/docs/2010-12-05-layout-modes.mdown b/_posts/docs/2010-12-05-layout-modes.mdown index f54f215..23f5902 100644 --- a/_posts/docs/2010-12-05-layout-modes.mdown +++ b/_posts/docs/2010-12-05-layout-modes.mdown @@ -4,7 +4,6 @@ title: Layout modes category: docs layout: default body_class: option-def -related: layout toc: - { title: cellsByColumn, anchor: cellsbycolumn } - { title: cellsByRow, anchor: cellsbyrow } diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown index 2ca38a1..80964df 100644 --- a/_posts/docs/2010-12-06-filtering.mdown +++ b/_posts/docs/2010-12-06-filtering.mdown @@ -3,7 +3,6 @@ title: Filtering category: docs layout: default -related: filtering toc: - { title: Markup, anchor: markup } - { title: jQuery script, anchor: jquery_script } diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown index b98245b..79f91e0 100644 --- a/_posts/docs/2010-12-07-sorting.mdown +++ b/_posts/docs/2010-12-07-sorting.mdown @@ -3,7 +3,6 @@ title: Sorting category: docs layout: default -related: sorting toc: - { title: Markup, anchor: markup } - { title: getSortData option, anchor: getsortdata_option } diff --git a/_posts/docs/2010-12-09-animating.mdown b/_posts/docs/2010-12-09-animating.mdown index 1a46be4..bbbd850 100644 --- a/_posts/docs/2010-12-09-animating.mdown +++ b/_posts/docs/2010-12-09-animating.mdown @@ -3,7 +3,6 @@ title: Animating category: docs layout: default -related: animating toc: - { title: animationEngine option, anchor: animationengine_option } - { title: CSS transitions, anchor: css_transitions } diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown index a1e4419..622e949 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -3,7 +3,6 @@ title: Adding items category: docs layout: default -related: methods toc: - { title: addItems method, anchor: additems_method } - { title: insert method, anchor: insert_method } diff --git a/_posts/docs/2011-05-25-extending-isotope.mdown b/_posts/docs/2011-05-25-extending-isotope.mdown index e3ae232..56e77e1 100644 --- a/_posts/docs/2011-05-25-extending-isotope.mdown +++ b/_posts/docs/2011-05-25-extending-isotope.mdown @@ -3,7 +3,6 @@ title: Extending Isotope category: docs layout: default -related: z-etc toc: - { title: Custom layout modes, anchor: custom_layout_modes } diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index e7b90f5..dbdbf55 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -3,7 +3,6 @@ title: Help category: docs layout: default -related: z-etc toc: - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues } - { title: Support license, anchor: support_license } diff --git a/_posts/docs/2011-12-20-license.mdown b/_posts/docs/2011-12-20-license.mdown index b010cbb..2162f76 100644 --- a/_posts/docs/2011-12-20-license.mdown +++ b/_posts/docs/2011-12-20-license.mdown @@ -3,7 +3,6 @@ title: License category: docs layout: default -related: z-etc toc: - { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement } From 4d85293b4332111d57fa5a9bc0eb1b3026bd79d6 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 21:05:05 -0400 Subject: [PATCH 29/31] docs : intro & options : copy edits --- _posts/docs/2010-12-01-introduction.mdown | 4 ++-- _posts/docs/2010-12-03-options.mdown | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index 030ad93..3ab3fe0 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -27,7 +27,7 @@ toc: ## Licensing

                                              - Commercial use of Isotope 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. + Commercial use of Isotope 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. @@ -69,7 +69,7 @@ There are a number of [options](options.html) you can specify. Within the optio ## 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 download this entire project. +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. ## A word about moderation {: #moderation} diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index e73fc99..ef7d1c9 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -57,7 +57,7 @@ Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful f
                                              { queue: false, duration: 800 }
                                              -When jQuery is the animation engine, these options will be used in .animate(). See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details. +When jQuery is the animation engine (see above), these options will be used in .animate(). See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details. ### Example @@ -96,7 +96,11 @@ Setting a filter with show item elements that match the selector, and hide eleme ### Values {#filter-values} -+ `'*'` Shows all item elements + +
                                                +
                                              • '*' or '' (an empty string): Shows all item elements
                                                • +
                                              + ## getSortData @@ -279,7 +283,7 @@ If you do disable transforms, but still want to use [CSS transitions](animating. ### Disabling hiddenStyle scale -If you are using filtering, it's also a good idea to disable the scale transform with the [`hiddenStyle` option](#hiddenstyle) +If you are using filtering, it's also a good idea to disable the scale transform with the [`hiddenStyle` option](#hiddenstyle). {% highlight javascript %} From c7c26c1601f7f120ff0bcca05c86f27326857c85 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 21:05:30 -0400 Subject: [PATCH 30/31] docs : css : blockquote; #content headers --- css/style.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 76b0923..dde8561 100644 --- a/css/style.css +++ b/css/style.css @@ -131,6 +131,13 @@ a img { border: none; } em { font-style: italic; } strong { font-weight: bold; } +blockquote { + padding-left: 1.0em; + margin-left: 1.0em; + border-left: 1px solid #333; + font-style: italic; +} + /**** Isotope styles ****/ /* required for containers to inherit vertical size from window */ @@ -440,7 +447,7 @@ body { } #site-nav h2 { - font-size: 18px; + font-size: 17px; font-weight: normal; margin: 0 0 0.3em; border-top: none; @@ -478,18 +485,19 @@ body { /**** Doc content ****/ -.docs h2 { +.docs #content h2 { border-top: 1px solid #333; padding-top: 0.8em; + margin-bottom: 0.8em; } -.docs h2:target { +.docs #content h2:target { padding: 10px; background: white; color: #222; } -.docs h3 { +.docs #content h3 { color: #FEC; background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; @@ -497,7 +505,7 @@ body { font-size: 1.15em; } -.docs h4 { +.docs #content h4 { margin-bottom: 0.5em; font-size: 14px; } From 5a78d3fffa43dc3613fd891a538d4be032a75ee0 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 16 Jun 2011 21:09:53 -0400 Subject: [PATCH 31/31] docs : css : arrow transforms --- css/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index dde8561..6ac6afa 100644 --- a/css/style.css +++ b/css/style.css @@ -715,13 +715,20 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */ top: 30px; left: 5px; -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); } .super-list .link.away a:before { top: 25px; left: 0px; -webkit-transform: rotate(-45deg); - + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); } .super-list .link a:hover {