desandro / colcade

Lightweight masonry layout
488 stars 21 forks source link

Colcade

Lightweight masonry layout

Colcade vs. Masonry

Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.

Same features

Better features

Worse features

OK                |  No
####  ####  ####  |  ##########  ####
####  ####  ####  |  ##########  ####
      ####        |
####        ####  |  ####  ##########
####  ####  ####  |  ####  ##########
####  ####  ####  |  ####
      ####        |

Install

Download: colcade.js

CDN:

<script src="https://unpkg.com/colcade@0/colcade.js"></script>

npm: npm install colcade

Bower: bower install colcade

Demos

Usage

Colcade works by moving item elements into column elements.

HTML

<div class="grid">
  <!-- columns -->
  <div class="grid-col grid-col--1"></div>
  <div class="grid-col grid-col--2"></div>
  <div class="grid-col grid-col--3"></div>
  <div class="grid-col grid-col--4"></div>
  <!-- items -->
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

Sizing of the columns is handled by your own CSS. Change the number of columns by hiding or showing them.

/* Using floats */
.grid-col {
  float: left;
  width: 50%;
}

/* 2 columns by default, hide columns 2 & 3 */
.grid-col--2, .grid-col--3 { display: none }

/* 3 columns at medium size */
@media ( min-width: 768px ) {
  .grid-col { width: 33.333%; }
  .grid-col--2 { display: block; } /* show column 2 */
}

/* 4 columns at large size */
@media ( min-width: 1080px ) {
  .grid-col { width: 25%; }
  .grid-col--3 { display: block; } /* show column 3 */
}

Edit float demo on CodePen

/* with flexbox */
.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.grid-col {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* 2 columns by default, hide columns 2 & 3 */
.grid-col--2, .grid-col--3 { display: none }

/* 3 columns at medium size */
@media ( min-width: 768px ) {
  .grid-col--2 { display: block; } /* show column 2 */
}

/* 4 columns at large size */
@media ( min-width: 1080px ) {
  .grid-col--3 { display: block; } /* show column 3 */
}

Edit flexbox demo on CodePen

Initialize Colcade

Set selectors for column and item elements in the options.

With jQuery. Edit jQuery demo on CodePen

$('.grid').colcade({
  columns: '.grid-col',
  items: '.grid-item'
})

With vanilla JS. Edit vanilla JS demo on CodePen

// element as first argument
var grid = document.querySelector('.grid');
var colc = new Colcade( grid, {
  columns: '.grid-col',
  items: '.grid-item'
});

// selector string as first argument
var colc = new Colcade( '.grid', {
  columns: '.grid-col',
  items: '.grid-item'
});

With HTML. Edit HTML demo on CodePen

<div class="grid" data-colcade="columns: .grid-col, items: .grid-item">
  ...
</div>

Methods

append

Add items to end of layout.

// jQuery
$grid.colcade( 'append', items )
// vanilla JS
colc.append( items )

prepend

Add items to beginning of layout.

// jQuery
$grid.colcade( 'prepend', items )
// vanilla JS
colc.prepend( items )

destroy

Remove Colcade behavior completely.

// jQuery
$grid.colcade('destroy')
// vanilla JS
colc.destroy()

By David DeSandro

MIT License. Have at it.