marcelaraujo / minigrid Goto Github PK

Minigrid is a minimal 2kb zero dependency cascading grid layout.

Demo

## 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');

API

minigrid(gridContainer, itemSelector, gutter, animate, done)

• gridContainer - string|node: required. The element selector or element where your grid items sit.
• itemSelector - string: required. The grid item element selector.
• gutter - number: optional. The space between items, the default is 6.
• 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.

animate

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);

Responsiveness

minigrid is dead-simple and doesn't provide anything in-the-box but you can do:

window.addEventListener('resize', function(){
  minigrid('.grid', '.grid-item');
});

Demo

## Animation

The simple solution is to add a CSS transition in your grid item:

.grid-item {
  transition: .3s ease-in-out;
}

Demo

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);

Demo

Limitations

Minigrid won't fit all cases. It was done having in mind "cards" with same width and different heights. It won't work if your grid item has different width sizes.

If you need more control I'd recommend Isotope.

Built with Minigrid

Please let me know where are you using Minigrid.

Contributing

Plese see CONTRIBUTING.

License

MIT © 2015 Henrique Alves