Bricky

A simple plugin to create Masonry / Pinterest style layout. A demo is inside 'demo' directory, or you can check it here on CodePen.

How to use

You can use Bricky by directly injecting script into your document markup or via npm if you use any module bundler like the popular Browserify or powerful Webpack. It takes an object with some settings as the only parameter. Take a look at the example provided below.

Options

{
  parent: '.bricky',
  elements: 'article',
  gutter: '12px',
  breakpoints: [
    [600, 2],
    [900, 3],
    [1200, 4]
  ]
}

parent (required) - string, jQuery style query where grid should be placed
elements (required) - string, query with elements that should be added to Bricky layout
gutter (optional) - string, gutter width in relative or absolute units
breakpoints (optional) - array, this array is a collection of nested arrays. Each of them is constructed as [breakpoint, columns]. You can pass as many breakpoints as you want.

Node style

In command line...

npm i -S bricky

In script file...

var Bricky = require('bricky');

var pref = {
  parent: '.bricky',
  elements: 'article',
  gutter: '12px',
  breakpoints: [
    [600, 2],
    [900, 3],
    [1200, 4]
  ]
};

var test = new Bricky(pref);
test.start();

Browser oldschool style

In document markup...

<script src="../js/bricky.min.js"></script>
<script>
  var pref = {
    parent: '.bricky',
    elements: 'article',
    gutter: '12px',
    breakpoints: [
      [600, 2],
      [900, 3],
      [1200, 4]
    ]
  };

  var test = new Bricky(pref);
  test.start();
</script>

Browser support

Bricky is using Flexible Box Layout Module. Accordingly to Can I use stats it has 94.04% of global support. Script is written in old-school ES5 way. Wherever the Flexbox is supported, Bricky will work fine.