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.

$3

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

$3

+ 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

$3

+ No multi-column-spanning items

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

+ No built-in item transitions for layout, appending, prepending, or removing
+ No stamps
+ No fitWidth centering

Install

Download: colcade.js

CDN:

` html

`

npm: npm install colcade

Bower: bower install colcade

Demos

+ Basic, HTML init
+ jQuery
+ Vanilla JS
+ Images

Usage

Colcade works by moving item elements into column elements.

$3

` html


` css
/ 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

` css
/ 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

$3

Set selectors for column and item elements in the options.

With jQuery. Edit jQuery demo on CodePen

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

With vanilla JS. Edit vanilla JS demo on CodePen

` js
// 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

` html


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

$3

Add items to beginning of layout.

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

$3

Remove Colcade behavior completely.

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

---

By David DeSandro

MIT License. Have at it.