/Greeed

Another JS grid layout system

Primary LanguageJavaScriptMIT LicenseMIT

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