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/elements-demo-foot.html b/_includes/elements-demo-foot.html new file mode 100644 index 0000000..4a1821c --- /dev/null +++ b/_includes/elements-demo-foot.html @@ -0,0 +1,73 @@ + + + + \ 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..6d911ad --- /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/_includes/filter-buttons.html b/_includes/filter-buttons.html new file mode 100644 index 0000000..1e95eb3 --- /dev/null +++ b/_includes/filter-buttons.html @@ -0,0 +1,14 @@ + +

Filters

+ + 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 0425809..0000000 --- a/_includes/html-foot.html +++ /dev/null @@ -1,10 +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 6735943..0000000 --- a/_includes/html-head.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - {{ page.title }} · {{ site.name }} {% if page.category == 'docs' %}Docs{% elsif page.category == 'demos' %}Demo{% endif %} - - - - - - - - - - - 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/_includes/layout-change.js b/_includes/layout-change.js index 21c2cc8..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 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..e806a91 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 new file mode 100644 index 0000000..0b63054 --- /dev/null +++ b/_includes/option-set-buttons.js @@ -0,0 +1,31 @@ + + 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 false; + } + 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; + if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { + // 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.html b/_includes/sort-buttons.html index 328f5b9..0f3893c 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/_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/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..54a4e0e --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,67 @@ + + + + {% 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 %} + + + + + + + + + + + + +
+ {% if page.category != 'homepage' %} +

{{ page.title }}

+ {% endif %} + + {{ content }} + + + +
+ + + + \ 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 fd3072f..0000000 --- a/_layouts/elements.html +++ /dev/null @@ -1,141 +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.

-
- -
- -

Filters

- - - - {% 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 }}

- - - - {% 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/demos/2010-01-01-index.yml b/_posts/demos/2010-01-01-index.yml deleted file mode 100644 index cd6b18e..0000000 --- a/_posts/demos/2010-01-01-index.yml +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Demos -layout: index-page -category: demos -body_class: doc ---- - diff --git a/_posts/demos/2010-12-12-basic.html b/_posts/demos/2010-12-12-basic.html index d3e87af..829c2c1 100644 --- a/_posts/demos/2010-12-12-basic.html +++ b/_posts/demos/2010-12-12-basic.html @@ -1,8 +1,7 @@ --- 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..9241f8f 100644 --- a/_posts/demos/2010-12-13-elements-complete.html +++ b/_posts/demos/2010-12-13-elements-complete.html @@ -1,10 +1,11 @@ --- 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 +13,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..bbeb6d9 100644 --- a/_posts/demos/2010-12-16-elements-partial.html +++ b/_posts/demos/2010-12-16-elements-partial.html @@ -1,10 +1,11 @@ --- 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 +13,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 c8f47e2..8c71191 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -1,8 +1,7 @@ --- title: Layout modes -layout: demo +layout: default category: demos -related: layouts ---
@@ -30,11 +29,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 +48,12 @@ related: layouts } }); + {% include layout-change.js %} + + {% include option-set-buttons.js %} + + + }); diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html index cec188d..b277bf2 100644 --- a/_posts/demos/2010-12-30-filtering.html +++ b/_posts/demos/2010-12-30-filtering.html @@ -1,8 +1,7 @@ --- title: Filtering -layout: demo +layout: default category: demos -related: filtering ---
@@ -13,19 +12,7 @@ related: filtering
-

Filters

- - + {% include filter-buttons.html %}
@@ -43,19 +30,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..137ed65 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -1,8 +1,7 @@ --- title: Sorting -layout: demo +layout: default category: demos -related: sorting ---
@@ -29,10 +28,6 @@ related: sorting $(function(){ var $container = $('#container'); - - {% include sort-buttons.js %} - - {% include option-buttons.js %} $container.isotope({ itemSelector : '.element', @@ -55,5 +50,7 @@ related: sorting } }); + {% include option-set-buttons.js %} + }); diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html index 923421d..f1aae6b 100644 --- a/_posts/demos/2010-12-31-relayout.html +++ b/_posts/demos/2010-12-31-relayout.html @@ -1,8 +1,7 @@ --- title: reLayout -layout: demo +layout: default category: demos -related: methods ---
@@ -11,7 +10,7 @@ related: methods
-
@@ -40,7 +39,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'); }); diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html index 34776dd..d21ef77 100644 --- a/_posts/demos/2011-01-02-adding-items.html +++ b/_posts/demos/2011-01-02-adding-items.html @@ -1,8 +1,7 @@ --- title: Adding items -layout: demo +layout: default category: demos -related: methods ---
@@ -13,7 +12,7 @@ related: methods
-
    +
    • Insert new elements
    • Append new elements
    • Prepend
      • diff --git a/_posts/demos/2011-01-02-infinite-scroll.html b/_posts/demos/2011-01-02-infinite-scroll.html index 3c8bfc3..f222301 100644 --- a/_posts/demos/2011-01-02-infinite-scroll.html +++ b/_posts/demos/2011-01-02-infinite-scroll.html @@ -1,8 +1,7 @@ --- 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..4df2174 100644 --- a/_posts/demos/2011-01-11-images.html +++ b/_posts/demos/2011-01-11-images.html @@ -1,8 +1,7 @@ --- title: Images -layout: demo +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 9e0ff90..90fd04f 100644 --- a/_posts/demos/2011-03-29-combination-filters.html +++ b/_posts/demos/2011-03-29-combination-filters.html @@ -1,8 +1,7 @@ --- title: Combination filters -layout: demo +layout: default category: demos -related: filtering schema: - name: color filters: [ red, blue, yellow ] @@ -23,7 +22,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 4a9499c..5e09fe3 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -1,8 +1,7 @@ --- title: Category rows -layout: demo +layout: default category: demos -related: layouts ---
          @@ -11,28 +10,11 @@ related: layouts
          -

          Filters

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

          Etc

          -
            + @@ -109,27 +91,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 +110,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; + }); + + + + + }); 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..5d559f8 --- /dev/null +++ b/_posts/demos/2011-06-13-hash-history.html @@ -0,0 +1,190 @@ +--- +title: Hash history +layout: default +category: demos +--- + +
            +

            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.

            +
            + +
            + +

            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/_posts/docs/2010-01-01-index.yml b/_posts/docs/2010-01-01-index.yml deleted file mode 100644 index 09fdca6..0000000 --- a/_posts/docs/2010-01-01-index.yml +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Docs -layout: index-page -category: docs ---- diff --git a/_posts/docs/2010-12-01-introduction.mdown b/_posts/docs/2010-12-01-introduction.mdown index dc48968..3ab3fe0 100644 --- a/_posts/docs/2010-12-01-introduction.mdown +++ b/_posts/docs/2010-12-01-introduction.mdown @@ -2,8 +2,7 @@ title: Introduction category: docs -layout: doc -related: a-intro +layout: default toc: - { title: Features, anchor: features } - { title: Licensing, anchor: licensing } @@ -28,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. @@ -70,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} @@ -78,12 +77,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) diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index 4c9963f..ef7d1c9 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -2,9 +2,8 @@ title: Options category: docs -layout: doc +layout: default body_class: option-def -related: a-intro toc: - { title: animationEngine, anchor: animationengine } - { title: animationOptions, anchor: animationoptions } @@ -58,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 @@ -97,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 @@ -280,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 %} diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown index 89718c8..05b0b70 100644 --- a/_posts/docs/2010-12-04-methods.mdown +++ b/_posts/docs/2010-12-04-methods.mdown @@ -2,8 +2,7 @@ title: Methods category: docs -layout: doc -related: methods +layout: default 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 4b436c1..23f5902 100644 --- a/_posts/docs/2010-12-05-layout-modes.mdown +++ b/_posts/docs/2010-12-05-layout-modes.mdown @@ -2,9 +2,8 @@ title: Layout modes category: docs -layout: doc +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 fcbf53d..80964df 100644 --- a/_posts/docs/2010-12-06-filtering.mdown +++ b/_posts/docs/2010-12-06-filtering.mdown @@ -2,8 +2,7 @@ title: Filtering category: docs -layout: doc -related: filtering +layout: default 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 2c84694..79f91e0 100644 --- a/_posts/docs/2010-12-07-sorting.mdown +++ b/_posts/docs/2010-12-07-sorting.mdown @@ -2,8 +2,7 @@ title: Sorting category: docs -layout: doc -related: sorting +layout: default 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 9960c01..bbbd850 100644 --- a/_posts/docs/2010-12-09-animating.mdown +++ b/_posts/docs/2010-12-09-animating.mdown @@ -2,8 +2,7 @@ title: Animating category: docs -layout: doc -related: animating +layout: default 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 91f7304..622e949 100644 --- a/_posts/docs/2010-12-10-adding-items.mdown +++ b/_posts/docs/2010-12-10-adding-items.mdown @@ -2,8 +2,7 @@ title: Adding items category: docs -layout: doc -related: methods +layout: default 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 11a562c..56e77e1 100644 --- a/_posts/docs/2011-05-25-extending-isotope.mdown +++ b/_posts/docs/2011-05-25-extending-isotope.mdown @@ -2,8 +2,7 @@ title: Extending Isotope category: docs -layout: doc -related: z-etc +layout: default toc: - { title: Custom layout modes, anchor: custom_layout_modes } 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. diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index 7eb085b..dbdbf55 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -2,8 +2,7 @@ title: Help category: docs -layout: doc -related: z-etc +layout: default 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 006ca5d..2162f76 100644 --- a/_posts/docs/2011-12-20-license.mdown +++ b/_posts/docs/2011-12-20-license.mdown @@ -2,8 +2,7 @@ title: License category: docs -layout: doc -related: z-etc +layout: default toc: - { title: Isotope Commercial License Agreement, anchor: isotope_commercial_license_agreement } @@ -11,7 +10,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 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 diff --git a/_posts/tests/2010-01-01-index.html b/_posts/tests/2010-01-01-index.html new file mode 100644 index 0000000..9e06779 --- /dev/null +++ b/_posts/tests/2010-01-01-index.html @@ -0,0 +1,14 @@ +--- +title: Tests Index +layout: default +category: tests +body_class: doc +--- + +
              + {% for post in site.categories[page.category] reversed %} + {% if post.layout != 'index-page' %} +
            • {{ post.title }}
              • + {% endif %} + {% endfor %} +
            \ No newline at end of file diff --git a/_posts/tests/2010-01-01-index.yml b/_posts/tests/2010-01-01-index.yml deleted file mode 100644 index 6a965a0..0000000 --- a/_posts/tests/2010-01-01-index.yml +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Tests -layout: index-page -category: tests -body_class: doc ---- 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 3011aab..0eebc30 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 --- @@ -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-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 da9fbc0..eeec37b 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 --- @@ -14,7 +14,7 @@ category: tests

          Etc

          -
            + @@ -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..7fba8fc 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 --- @@ -19,30 +19,14 @@ category: tests
            -

            Filters

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

            Etc

            -
              + @@ -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..63e3c23 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 --- @@ -16,30 +16,13 @@ category: tests
              -

              Filters

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

              Etc

              -
                +
                • Toggle variable sizes
                • Insert new elements
                  • @@ -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..68e0a6e 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 --- @@ -10,24 +10,7 @@ category: tests
                  -

                  Filters

                  - - + {% include filter-buttons.html %} {% include sort-buttons.html %} @@ -35,7 +18,7 @@ category: tests

                  Etc

                  -
                    +
                    • Toggle variable sizes
                    • Insert new elements
                      • @@ -57,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..c6227c8 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. --- @@ -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 diff --git a/css/style.css b/css/style.css index d3e3545..6ac6afa 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 .link { font-family: 'Helvetica Neue', Arial, sans-serif; } @@ -130,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 */ @@ -266,19 +274,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 ) ); @@ -286,6 +294,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 { @@ -300,21 +312,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; @@ -395,93 +407,77 @@ body { width: 100%; } +#content { + margin-left: 210px; +} + +.demos #content { + height: 100%; +} + /**** Docs ****/ -body.doc { +.docs #content { max-width: 640px; } -.doc a:hover { +.docs #content a:hover { border-bottom: 1px dotted; } +/**** Doc page nav ****/ -body.doc { - margin-left: 220px; -} -.doc nav { - width: 210px; - position: fixed; + +#site-nav { + width: 200px; + position: absolute; left: 10px; top: 0px; padding-top: 20px; - height: 100%; - overflow: auto; -} - -.doc 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; - } - + font-size: 12px; } -/**** Doc page nav ****/ - -#docs-nav h1, -#demo-nav { - font-size: 19px; +#site-nav h1 { + font-size: 24px; margin-bottom: 0.5em; + margin-top: 0; font-weight: bold; font-family: 'Helvetica Neue', Arial, sans-serif; } -#docs-nav h1 a, -#demo-nav a { color: #4FB; } -#docs-nav h1 a:hover, -#demo-nav a:hover { color: #4BF; } - -#demo-nav { - padding-bottom: 0.5em; - border-bottom: 1px solid #333; +#site-nav h2 { + font-size: 17px; + font-weight: normal; + margin: 0 0 0.3em; + border-top: none; } -#docs-nav ul { +#site-nav h1 a { color: #4FB; } +#site-nav h1 a:hover { color: #4BF; } + +#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; @@ -489,18 +485,19 @@ body.doc { /**** Doc content ****/ -.doc h2 { +.docs #content h2 { border-top: 1px solid #333; padding-top: 0.8em; + margin-bottom: 0.8em; } -.doc h2:target { +.docs #content h2:target { padding: 10px; background: white; color: #222; } -.doc h3 { +.docs #content h3 { color: #FEC; background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; @@ -508,7 +505,7 @@ body.doc { font-size: 1.15em; } -.doc h4 { +.docs #content h4 { margin-bottom: 0.5em; font-size: 14px; } @@ -531,11 +528,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; } @@ -569,27 +566,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 ****/ @@ -620,52 +617,11 @@ 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.doc a { background: #3CF; } -#super-list li.demo 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 ****/ #sites h2 { + display: none; padding: 0.4em; line-height: 32px; margin-bottom: 0.4em; @@ -695,44 +651,97 @@ 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 { + float: left; + position: relative; + font-size: 24px; + line-height: 1.2em; + font-weight: 300; + margin: 5px; +} -/**** Index pages ****/ +.super-list .link { + width: 230px; + height: 110px; +} -#index-list { - font-weight: 300; - font-size: 28px; - line-height: 1.4em; - list-style: none; - margin-left: 0; +.super-list .link a { + display: block; + padding: 10px; + padding-left: 65px; + height: 90px; + 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); + -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 { + background: #E58; + color: white; +} + +.super-list .feature .name { + bottom: auto; + top: 140px; + left: 18px; + font-size: 20px; +} /**** Infinite Scroll ****/ @@ -754,10 +763,7 @@ 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; } - - diff --git a/index.html b/index.html index 7232267..ce9eb67 100644 --- a/index.html +++ b/index.html @@ -1,133 +1,125 @@ --- -title: Index -layout: nil +title: Isotope +layout: default +category: homepage +features: + - name: An exquisite jQuery plugin for magical layouts + symbol: Iso + number: 1 + category: alkali + - name: Dynamic, intelligent layouts + symbol: Dyn + number: 31 + category: actinoid + - name: Re–order items with sorting + symbol: Srt + number: 27 + category: lanthanoid + - 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 --- - - - - - {{ 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 %} + {% for feature in page.features %} +
                    +

                    {{ feature.number }}

                    +

                    {{ feature.symbol }}

                    +

                    {{ feature.name }}

                    +
                    {% endfor %} -
                  • Download jquery.isotope.min.js
                    • -
                  • Download this project
                    • -
                  • Isotope on GitHub
                    • -
                  - +
                  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 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