npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

minigrid

1.4.0 • Public • Published

minigrid

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(containerSelector, itemSelector, gutter, animate, done)

  • 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 is 6.
  • animate - function: optional.
  • done - function: optional. Callback called after the grid was updated.

animate

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

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

License

MIT © 2015 Henrique Alves

install

npm i minigrid

Downloadsweekly downloads

224

version

1.4.0

license

MIT

homepage

alves.im

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability