├── images └── changeme.png ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg └── minicons-webalys │ ├── minicons-webalys.eot │ ├── minicons-webalys.ttf │ ├── minicons-webalys.woff │ └── minicons-webalys.svg ├── README.md ├── js ├── classie.js ├── grid.js ├── gridSelector.js └── modernizr.custom.js ├── css ├── default.css └── component.css ├── index.html ├── index2.html └── index3.html /images/changeme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/images/changeme.png -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/minicons-webalys/minicons-webalys.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/minicons-webalys/minicons-webalys.eot -------------------------------------------------------------------------------- /fonts/minicons-webalys/minicons-webalys.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/minicons-webalys/minicons-webalys.ttf -------------------------------------------------------------------------------- /fonts/minicons-webalys/minicons-webalys.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/DynamicGrid/HEAD/fonts/minicons-webalys/minicons-webalys.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | Dynamic Grid with Transitions 3 | ========= 4 | A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15468) 7 | 8 | [demo](http://tympanus.net/Development/DynamicGrid/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /fonts/minicons-webalys/minicons-webalys.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | This SVG font generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @charset "UTF-8"; 3 | @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300,700); 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0; height: 100%; } 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Merriweather Sans', sans-serif; 24 | color: #fff; 25 | background: #333; 26 | } 27 | 28 | a { 29 | color: #000; 30 | color: rgba(0,0,0,0.5); 31 | text-decoration: none; 32 | } 33 | 34 | a:hover, 35 | a:active { 36 | color: #fff; 37 | } 38 | 39 | .container { 40 | height: 100%; 41 | } 42 | 43 | /* To Navigation Style */ 44 | .codrops-top { 45 | text-transform: uppercase; 46 | font-weight: 700; 47 | font-size: 0.69em; 48 | position: absolute; 49 | bottom: 0; 50 | left: 0; 51 | } 52 | 53 | .codrops-top a { 54 | letter-spacing: 1px; 55 | display: block; 56 | padding: 0 1em 1em; 57 | } 58 | 59 | .codrops-icon:before { 60 | font-family: 'codropsicons'; 61 | margin: 0 4px; 62 | border: 2px solid rgba(0,0,0,0.5); 63 | display: inline-block; 64 | width: 20px; 65 | height: 20px; 66 | line-height: 17px; 67 | text-align: center; 68 | speak: none; 69 | font-style: normal; 70 | font-weight: normal; 71 | font-variant: normal; 72 | text-transform: none; 73 | -webkit-font-smoothing: antialiased; 74 | } 75 | .codrops-icon:hover:before { 76 | border-color: #fff; 77 | } 78 | 79 | .codrops-icon-drop:before { 80 | content: "\e001"; 81 | } 82 | 83 | .codrops-icon-prev:before { 84 | content: "\e004"; 85 | } 86 | 87 | /* Demo Buttons Style */ 88 | a.current-demo { 89 | color: rgba(0,0,0,0.3); 90 | } -------------------------------------------------------------------------------- /js/grid.js: -------------------------------------------------------------------------------- 1 | var Grid = (function() { 2 | 3 | function extend( a, b ) { 4 | for( var key in b ) { 5 | if( b.hasOwnProperty( key ) ) { 6 | a[key] = b[key]; 7 | } 8 | } 9 | return a; 10 | } 11 | 12 | var config = { 13 | items : Array.prototype.slice.call( document.querySelectorAll( '#gt-grid > div' ) ), 14 | gridSel : new gridSelector( document.getElementById( 'gt-grid-selector' ), { 15 | onClick : function() { initGrid(); } 16 | } ) 17 | }, 18 | defaults = { 19 | transition : false, 20 | speed : 300, 21 | delay : 0 22 | }; 23 | 24 | function init( options ) { 25 | config.options = extend( defaults, options ); 26 | initGrid(); 27 | if( config.options.transition ) { 28 | setTimeout( function() { 29 | config.items.forEach( function( el, i ) { 30 | el.style.WebkitTransition = 'all ' + config.options.speed + 'ms ' + ( i * config.options.delay ) + 'ms'; 31 | el.style.MozTransition = 'all ' + config.options.speed + 'ms ' + ( i * config.options.delay ) + 'ms'; 32 | el.style.transition = 'all ' + config.options.speed + 'ms ' + ( i * config.options.delay ) + 'ms'; 33 | } ); 34 | }, 25 ); 35 | } 36 | } 37 | 38 | function initGrid() { 39 | var rows = config.gridSel.rows, 40 | columns = config.gridSel.columns; 41 | 42 | config.items.forEach( function( el, i ) { 43 | el.style.position = 'absolute'; 44 | 45 | var elpos = config.items.indexOf( el ), 46 | current_row = Math.floor( elpos / config.gridSel.maxcolumns ), 47 | current_column = elpos - current_row * config.gridSel.maxcolumns, 48 | width = 100 / columns, 49 | height = 100 / rows; 50 | 51 | if( current_row < rows && current_column < columns ) { 52 | /* this seems to crash Safari 6 */ 53 | //if( Modernizr.csscalc ) { 54 | // el.style.width = '-webkit-calc(' + width + '% + 1px)'; 55 | // el.style.height = '-webkit-calc(' + height + '% + 1px)'; 56 | // el.style.width = '-moz-calc(' + width + '% + 1px)'; 57 | // el.style.height = '-moz-calc(' + height + '% + 1px)'; 58 | // el.style.width = 'calc(' + width + '% + 1px)'; 59 | // el.style.height = 'calc(' + height + '% + 1px)'; 60 | //} 61 | //else { 62 | el.style.width = width + .5 + '%'; 63 | el.style.height = height + .5 + '%'; 64 | //} 65 | 66 | el.style.left = width * ( current_column ) + '%'; 67 | el.style.top = height * ( current_row ) + '%'; 68 | 69 | classie.remove( el, 'gt-hidden' ); 70 | classie.add( el, 'gt-visible' ); 71 | } 72 | else { 73 | classie.remove( el, 'gt-visible' ); 74 | classie.add( el, 'gt-hidden' ); 75 | } 76 | } ); 77 | } 78 | 79 | return { init : init }; 80 | 81 | })(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dynamic Grid with Transitions | Demo 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

Dynamic Grid

30 |
31 |
32 | Previous Demo 33 | Codrops Article 34 |
35 |
36 |

wakame

37 |

lettuce water

38 |

turnip maize

39 |

Demo 1: No transitions

40 |

Demo 2: Grid transitions

41 |

Demo 3: Delayed transitions

42 |

bunya nuts

43 |

celery

44 |

greens lotus

45 |

arugula beet

46 |

desert raisin

47 |

mustard burdock

48 |

potato bush

49 |

catsear

50 |

water chestnut

51 |

bok choy

52 |

pea sprouts

53 |

gumbo parsley

54 |

bitterleaf

55 |

spinach rock

56 |

tigernut garlic

57 |

caulie

58 |

seakale

59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 69 | 70 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dynamic Grid with Transitions | Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

Dynamic Grid

30 |
31 |
32 | Previous Demo 33 | Codrops Article 34 |
35 |
36 |

wakame

37 |

lettuce water

38 |

turnip maize

39 |

Demo 1: No transitions

40 |

Demo 2: Grid transitions

41 |

Demo 3: Delayed transitions

42 |

bunya nuts

43 |

celery

44 |

greens lotus

45 |

arugula beet

46 |

desert raisin

47 |

mustard burdock

48 |

potato bush

49 |

catsear

50 |

water chestnut

51 |

bok choy

52 |

pea sprouts

53 |

gumbo parsley

54 |

bitterleaf

55 |

spinach rock

56 |

tigernut garlic

57 |

caulie

58 |

seakale

59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 71 | 72 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dynamic Grid with Transitions | Demo 3 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

Dynamic Grid

30 |
31 |
32 | Previous Demo 33 | Codrops Article 34 |
35 |
36 |

wakame

37 |

lettuce water

38 |

turnip maize

39 |

Demo 1: No transitions

40 |

Demo 2: Grid transitions

41 |

Demo 3: Delayed transitions

42 |

bunya nuts

43 |

celery

44 |

greens lotus

45 |

arugula beet

46 |

desert raisin

47 |

mustard burdock

48 |

potato bush

49 |

catsear

50 |

water chestnut

51 |

bok choy

52 |

pea sprouts

53 |

gumbo parsley

54 |

bitterleaf

55 |

spinach rock

56 |

tigernut garlic

57 |

caulie

58 |

seakale

59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | 73 | 74 | -------------------------------------------------------------------------------- /js/gridSelector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * gridSelector.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | function extend( a, b ) { 16 | for( var key in b ) { 17 | if( b.hasOwnProperty( key ) ) { 18 | a[key] = b[key]; 19 | } 20 | } 21 | return a; 22 | } 23 | 24 | function gridSelector( el, options ) { 25 | this.el = el; 26 | this.options = extend( this.defaults, options ); 27 | this._init(); 28 | } 29 | 30 | gridSelector.prototype = { 31 | defaults : { 32 | rows : 5, 33 | columns : 5, 34 | maxcolumns : 5, 35 | onClick : function() { return false; } 36 | }, 37 | _init : function() { 38 | this.trigger = this.el.querySelector( 'span.gt-grid-icon' ); 39 | this.gridItems = Array.prototype.slice.call( this.el.querySelectorAll( 'div.gt-grid-select > div' ) ); 40 | this._setRowsColumns( this.options.rows, this.options.columns ); 41 | this.maxcolumns = this.options.maxcolumns; 42 | this.gridItems.forEach( function( el, i ) { 43 | classie.add( el, 'gt-grid-selected' ); 44 | } ); 45 | this._initEvents(); 46 | }, 47 | _initEvents : function() { 48 | 49 | var self = this; 50 | 51 | if( Modernizr.touch ) { 52 | this.trigger.addEventListener( 'click', function( ev ) { classie.add( self.el, 'gt-grid-control-open' ); } ); 53 | } 54 | 55 | this.gridItems.forEach( function( el, i ) { 56 | el.addEventListener( 'mouseover', function(ev) { 57 | self._highlightGridItems( self.gridItems.indexOf( this ) ); 58 | } ); 59 | 60 | el.addEventListener( 'click', function(ev) { 61 | self._selectGridItems( self.gridItems.indexOf( this ) ); 62 | if( Modernizr.touch ) { 63 | classie.remove( self.el, 'gt-grid-control-open' ); 64 | } 65 | } ); 66 | } ); 67 | 68 | }, 69 | _highlightGridItems : function( pos ) { 70 | 71 | // item's row and column 72 | var self = this, 73 | itemRow = Math.floor( pos / this.options.maxcolumns ), 74 | itemColumn = pos - itemRow * this.options.maxcolumns; 75 | 76 | this.gridItems.forEach( function( el, i ) { 77 | // el's row and column 78 | var elpos = self.gridItems.indexOf( el ), 79 | elRow = Math.floor( elpos / self.options.maxcolumns ), 80 | elColumn = elpos - elRow * self.options.maxcolumns; 81 | 82 | if( elRow <= itemRow && elColumn <= itemColumn) { 83 | classie.add( el, 'gt-grid-hover' ); 84 | } 85 | else { 86 | classie.remove( el, 'gt-grid-hover' ); 87 | } 88 | } ); 89 | 90 | }, 91 | _selectGridItems : function( pos ) { 92 | var self = this; 93 | this.gridItems.forEach( function( el, i ) { 94 | if( classie.has( el, 'gt-grid-hover' ) ) { 95 | classie.add( el, 'gt-grid-selected' ); 96 | } 97 | else { 98 | classie.remove( el, 'gt-grid-selected' ); 99 | } 100 | } ); 101 | var r = this.rows = Math.floor( pos / this.options.maxcolumns ), 102 | c = this.columns = pos - this.rows * this.options.maxcolumns; 103 | 104 | this._setRowsColumns( r + 1, c + 1 ); 105 | this.options.onClick(); 106 | }, 107 | _setRowsColumns : function( rows, columns ) { 108 | this.rows = rows; 109 | this.columns = columns; 110 | } 111 | } 112 | 113 | // add to global namespace 114 | window.gridSelector = gridSelector; 115 | 116 | } )( window ); -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'minicons-webalys'; 3 | src:url('../fonts/minicons-webalys/minicons-webalys.eot'); 4 | src:url('../fonts/minicons-webalys/minicons-webalys.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/minicons-webalys/minicons-webalys.ttf') format('truetype'), 6 | url('../fonts/minicons-webalys/minicons-webalys.svg#minicons-webalys') format('svg'), 7 | url('../fonts/minicons-webalys/minicons-webalys.woff') format('woff'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* Grid style; make sure parent containers have full height */ 13 | .gt-grid { 14 | width: 100%; 15 | height: 100%; 16 | overflow: hidden; 17 | position: relative; 18 | -webkit-backface-visibility: hidden; 19 | } 20 | 21 | .gt-grid > div { 22 | width: 20%; 23 | height: 20%; 24 | float: left; 25 | background-color: #ddd; 26 | position: relative; 27 | opacity: 1; 28 | box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); 29 | } 30 | 31 | .gt-grid > div:hover:before, 32 | .gt-grid > div.special:before { 33 | content: ''; 34 | position: absolute; 35 | width: 100%; 36 | height: 100%; 37 | top: 0; 38 | left: 0; 39 | background: rgba(0,0,0,0.03); 40 | } 41 | 42 | .gt-grid > div:hover:before { 43 | background: rgba(0,0,0,0.05); 44 | } 45 | 46 | .gt-grid > div.gt-hidden { 47 | opacity: 0; 48 | visibility: hidden; 49 | } 50 | 51 | .gt-grid > div.gt-visible { 52 | z-index: 999; 53 | } 54 | 55 | /* Some content styles */ 56 | .gt-grid > div:first-child { 57 | background-image: url(../images/changeme.png); 58 | background-repeat: no-repeat; 59 | background-position: 45px 10px; 60 | } 61 | 62 | .gt-grid > div h1, 63 | .gt-grid > div h3 { 64 | position: absolute; 65 | bottom: 0; 66 | left: 0; 67 | margin: 0; 68 | cursor: default; 69 | } 70 | 71 | .gt-grid > div h1 { 72 | padding: 0.5em; 73 | line-height: 0.9; 74 | font-weight: 300; 75 | text-align: right; 76 | } 77 | 78 | .gt-grid > div h3 { 79 | font-size: 1.05em; 80 | padding: 1em; 81 | font-weight: 700; 82 | text-transform: uppercase; 83 | } 84 | 85 | /* The little grid to control the number of items */ 86 | .gt-grid-control { 87 | position: fixed; 88 | z-index: 1000; 89 | cursor: pointer; 90 | top: 10px; 91 | left: 10px; 92 | width: 30px; 93 | height: 30px; 94 | } 95 | 96 | .gt-grid-icon { 97 | margin: 5px; 98 | display: block; 99 | font-size: 23px; 100 | -webkit-transition: opacity 0.2s; 101 | transition: opacity 0.2s; 102 | } 103 | 104 | .gt-grid-icon:before { 105 | font-family: 'minicons-webalys'; 106 | font-style: normal; 107 | font-weight: normal; 108 | speak: none; 109 | line-height: 1; 110 | -webkit-font-smoothing: antialiased; 111 | text-shadow: 0 1px 0 rgba(0,0,0,0.1); 112 | content: '\e000'; 113 | color: #000; 114 | color: rgba(0,0,0,0.35); 115 | } 116 | 117 | .gt-grid-select { 118 | width: 112px; 119 | height: 112px; 120 | position: absolute; 121 | top: 0; 122 | left: 0; 123 | visibility: hidden; 124 | opacity: 0; 125 | -webkit-transition: all 0.2s; 126 | transition: all 0.2s; 127 | border: 1px solid rgba(0,0,0,0.3); 128 | } 129 | 130 | .gt-grid-select > div { 131 | width: 22px; 132 | height: 22px; 133 | background: rgba(0,0,0,0.3); 134 | float: left; 135 | border: 1px solid rgba(0,0,0,0.3); 136 | } 137 | 138 | .no-touch .gt-grid-control:hover .gt-grid-icon, 139 | .gt-grid-control.gt-grid-control-open .gt-grid-icon { 140 | opacity: 0; 141 | } 142 | 143 | .no-touch .gt-grid-control:hover .gt-grid-select, 144 | .gt-grid-control.gt-grid-control-open .gt-grid-select { 145 | visibility: visible; 146 | opacity: 1; 147 | } 148 | 149 | .gt-grid-select .gt-grid-selected { 150 | background: rgba(0,0,0,0.4); 151 | } 152 | 153 | .gt-grid-select .gt-grid-hover { 154 | box-shadow: inset 0 0 0 10px rgba(255,255,255,0.1); 155 | } 156 | 157 | /* Different colors and effects for demos */ 158 | /* Demo 1: No transition, no delays */ 159 | .demo-1 .gt-grid > div { 160 | background-color: #ed4e6e; 161 | } 162 | 163 | /* Demo 2: Transition, no delays */ 164 | .demo-2 .gt-grid > div { 165 | background-color: #fc654d; 166 | -webkit-transform: scale(1); 167 | -moz-transform: scale(1); 168 | transform: scale(1); 169 | } 170 | 171 | .demo-2 .gt-grid > div.gt-hidden { 172 | background-color: #fcdd4d; 173 | -webkit-transform: scale(.8); 174 | -moz-transform: scale(.8); 175 | transform: scale(.8); 176 | } 177 | 178 | /* Demo 3: Transition and delays */ 179 | .demo-3 .gt-grid > div { 180 | background-color: #1abc89; 181 | -webkit-transform: scale(1); 182 | -moz-transform: scale(1); 183 | transform: scale(1); 184 | } 185 | 186 | .demo-3 .gt-grid > div.gt-hidden { 187 | -webkit-transform: scale(.6) rotate(45deg); 188 | -moz-transform: scale(.6); 189 | transform: scale(.6); 190 | } 191 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-css_calc-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f