Pinterest style layout with Bricky
One of my recent clients wanted to use this trendy kind of layout well known by Tumblr or Pinterest users. I did a quick search but I haven’t found any plugin that fits my needs (something that was responsive, lightweight and free of dependencies). All the resources that I found were huge, required a jQuery dependency or provide tons of options that I don’t need. Instead of going deeper with my research I decided to code it by myself. Bricky (thanks to my good friend Kim for this name) is a very lightweight (≈ 1.5KB minified) and dependency-free script with a minimal number of options. It is open-source and you can download it from Github or from npm. It did the job on my project so maybe you will find it useful as well. Have a look at the CodePen demo.
How does it work
Whenever I create a project like this, I start with a blank JavaScript file that is full of commented out instructions needed to accomplish the task. My initial plan to create this plugin looked similar to the list below and it’s pretty much all of what this script is doing.
- Store all the articles in an array and remove them from the DOM.
- Create a flex wrapper inside of the element defined in settings.
- Dependent on the screen resolution, create columns inside the previously created wrapper (breakpoints and columns are configurable).
- Loop through the articles inside the array and append them one by one to the column with the least space taken.
- When the screen is resized, clear the container and repeat the process again. Debouncing the browser-intensive
resizeevent improved the script’s performance dramatically.
How to use it
You can inject the script into your document markup manually or use a module bundler all the cool kids are using like Browserify or Webpack to use the node-style required('bricky') way. Configuration is dead simple - only two settings are required (parent & elements) and two are optionally configurable (gutter & breakpoints).
Options
All that I needed and nothing else…
var pref = {
parent: '.bricky',
elements: 'article',
gutter: '12px',
breakpoints: [
[600, 2],
[900, 3],
[1200, 4]
]
};
parent- (required) string with the selector where bricky should be placedelements- (required) string with the “bricks” selectorgutter- gutter width in relative or absolute unitsbreakpoints- this array is a collection of nested arrays. Each of them is constructed as[pxValueOfbreakpoint, howManycolumns]. You can pass as many breakpoints as you want.
Node style
In the command line…
npm i -S bricky
In the script file…
// Assign the 'bricky' module to Bricky variable
var Bricky = require('bricky');
// store the object with settings in the variable 'pref'
var pref = {
parent: '.bricky',
elements: 'article',
gutter: '12px',
breakpoints: [
[600, 2],
[900, 3],
[1200, 4]
]
};
// Instantiate new Bricky & invoke it
var mySuperLayout = new Bricky(pref);
mySuperLayout.start();
Browser oldschool style
In the document markup…
<script src="../js/bricky.min.js"></script>
<script>
// store object with setting in perf variable
var pref = {
parent: '.bricky',
elements: 'article',
gutter: '12px',
breakpoints: [
[600, 2],
[900, 3],
[1200, 4]
]
};
// Instantiate new Bricky & invoke it
var mySuperLayout = new Bricky(pref);
mySuperLayout.start();
</script>
Feedback
Hopefully you’ll find Bricky useful. If you decide to use it on your project, please send me a link - I’ll be ultra proud and happy. Please report bugs and share your suggestions. Bye :*
of course, it's up, but what about Masonry and Isotope?