Lightweight masonry layout
HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
desandro Merge pull request #12 from jyoonsong/patch-1
Demo URL typo in Readme.md
Latest commit 8a5c9fe Jan 17, 2018

README.md

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

  • Masonry grid layout
  • Works as a jQuery plugin or with vanilla JS
  • Initialize in HTML

Better features

  • Much smaller. 1/8 the size of Masonry
  • Better fluid/responsive layout, using native browser positioning
  • One file, no dependencies, no package dist built file
  • Does not require imagesLoaded when using images

Worse features

  • No multi-column-spanning items
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.