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 -
function
: optional. - done -
function
: optional. Callback called after the grid was updated.
It returns a function with the element
,x
,y
and index
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);
Bare in mind that minigrid's main concept is simplicity. The API should be always under 2kb. Bug fixes are more than welcome! For any new feature please Submit an issue first before send any pull request.
Thank you everyone for the help so far! 🍺
MIT © 2015 Henrique Alves