Minigrid is a minimal 2kb zero dependency cascading grid layout.
## Install
npm install minigrid
Using Bower:
bower install minigrid
## Usage
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
var grid = require('minigrid');
grid('.grid', '.grid-item');
- containerSelector -
string
: required. The element selector where your grid items sit. - itemSelector -
string
: required. The grid item element selector. - gutter -
number
: optional. The space between items, the default is6
. - animate(element, x, y, index) -
function
: optional. - done(nodeList) -
function
: optional. Callback called after the grid is built. It returns the node list of grid items.
It returns a function with the element
,x
,y
and index
parameters for each grid item.
function animate(el, x, y, index) {
// Use your favourite library for animate the element
}
minigrid('.grid', '.grid-item', 6, animate);
minigrid is dead-simple and doesn't provide anything in-the-box but you can do:
window.addEventListener('resize', function(){
minigrid('.grid', '.grid-item');
});
## Animation
The simple solution is to add a CSS transition
in your grid item:
.grid-item {
transition: .3s ease-in-out;
}
Or take it to the next level by using your favourite library. The example bellow is using the awesome Dynamics.js library:
function animate(item, x, y, index) {
dynamics.animate(item, {
translateX: x,
translateY: y
}, {
type: dynamics.spring,
duration: 800,
frequency: 120,
delay: 100 + index * 30
});
}
minigrid('.grid', '.grid-item', 6, animate);
Plese see CONTRIBUTING.
MIT © 2015 Henrique Alves