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 placedelements
(required) - string, query with elements that should be added to Bricky layoutgutter
(optional) - string, gutter width in relative or absolute unitsbreakpoints
(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