Another JS grid layout system
JavaScript HTML
Latest commit 8934524 Feb 11, 2016 @iamvdo 1.1.3
Permalink
Failed to load latest commit information.
LICENSE Initial commit Feb 28, 2014
README.md Add new options Mar 12, 2014
bower.json 1.1.3 Feb 11, 2016
greeed.js 1.1.3 Feb 11, 2016
test.html Fix: Better child placement between columns Feb 11, 2016

README.md

Greeed

Greeed is a minimalist (only 2.9K minified), responsive JS-based grid layout. The goal is to display items on columns (based on media-queries), where items are presented from top to bottom, regardless of the number of columns.

No CSS layout can do that, even Flexbox! :(

See it in action using Heeere, CSS3D Transforms and transitions in my personal website

Usage

You need to bind greeed, with 2 parameters:

  • A DOM selector targeting the parent containing items (The Greeed)
  • Options
// Bind
greeed.bind('.Greeed', {
    breakpoints: [34,48,65,88,110,140]
    }
);

Options:

  • breakpoints (required): an array with all breakpoints. Each breakpoints must be in em unit and represent how many columns you want between 2 breakpoints. In the example above, there will be 1 column from 0 to 34em, then 2 columns from 34em to 48em, and so on...
  • elementColumn: the DOM element type for each column created. Default li.
  • elementColumnInner: the DOM element type for each inner column created. Default ul. Set to false if you don't want inner elements. Useful for nested lists.
  • classColumn: the class added to each column created. Default .Greeed-column.
  • classColumnInner: the class added to each inner column created (ul elements). Default .Greeed-column-inner.
  • classItem: the class added to each elements of the Greeed (li elements). Default .Greeed-item.
  • classFakeItem: the class added to each fake elements created. Fake elements make each columns the same height. Default .Greeed-item--fake. Set to false if you don't want fake items.
  • layout: set the CSS layout you want to use. Table layout (table) or float (float). Default table.
  • units: set units for float layout. Percentages (fluid) or pixels (fixed). Default fluid.
  • afterInit: a callback function called after first initialization
  • afterLayout: a callback function called after every new layout calculation (browser's window resize, new orientation, etc.)