Package Exports

brique
brique/lib/index.esm.js
brique/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (brique) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Brique.js

Creating cascading layout grids like Pinterest. Use the power of CSS Grid Layout.

Install

$ npm i brique --save

Instantiate

TypeScript

import { Brique } from './node_modules/brique/lib';

const refGrid = document.getElementById('grid');
new Brique(refGrid);

JavaScript ES6

HTML script tag requires the type="module" attribute.

<script type="module" src="scripts/main.js"></script>

Create the grid in the JavaScript file (scripts/main.js) and import the esm version of the library (index.esm.js).

import { Brique } from './node_modules/brique/lib/index.esm.js';

const refGrid = document.getElementById('grid');
new Brique(refGrid);

HTML markup example

<div id="grid">
    <div>
        <h2>Box 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <h2>Box 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboret.</p>
    </div>
    <div>
        <h2>Box 3</h2>
    </div>
    <div>
        <h2>Box 4</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div>
        <h2>Box 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </div>
</div>

Parameter

Options (`BriqueOptions`)

Property	Type	Required	Description
columns	number	true	Number of columns
columnGap	string	false	Spacing between columns
rowGap	string	false	Spacing between row

Example

const refGrid = document.getElementById('grid');
const options = {
    columns: 4,
    rowGap: '24px',
    columnGap: '16px',
};

new Brique(refGrid, options);

Methods

watchResize()

Resize the grid items when the window is resized.

const refGrid = document.getElementById('grid');
const briqueGrid = new Brique(refGrid);

briqueGrid.watchResize();

stopWatchResize()

Stop resize the grid items when the window is resized.

briqueGrid.stopWatchResize();

getOptions()

Get current options parameter.

briqueGrid.getOptions(); // output: { columns: 3, rowGap: '32px', columnGap: '32px'}

setOptions()

Change options parameter.

briqueGrid.setOptions({
    columns: 5
});

Can be used to create a responsive grid.

update()

Update rendering on demand

briqueGrid.update();

Responsive grid

Update options parameter on media queries change

const refGrid = document.getElementById('grid');
const briqueGrid = new Brique(refGrid);
const mediaQueryMobile = window.matchMedia('(max-width: 767px)');

function setOptionsBrique() {
    briqueGrid.setOptions({
        ...briqueGrid.getOptions(),
        columns: mediaQueryMobile.matches ? 2 : 3
    });
}

setOptionsBrique();
briqueGrid.watchResize();
mediaQueryMobile.addEventListener('change', setOptionsBrique);

brique