bricky v0.0.1

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.

• IE >= 10
• Edge >= 12
• Firefox >= 2
• Chrome >= 4
• Safari >= 3.1
• Opera >= 12.1
• iOS Safari >= 3.2
• Opera Mini >= 8
• Android Browser >= 2.1
• Blackberry Browser >= 7
• Opera Mobile >= 12.1
• Chrome for Android >= 50
• Firefox for Android >= 46
• IE Mobile >= 10
• UC Browser for Android >= 9.9