Quick Start

1. Install Bricklayer

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.2/bricklayer.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.2/bricklayer.min.js"></script>

Please see NPM and Bower instructions if you do not prefer using CDN.

2. Create a Simple List

Bricklayer needs a list with bricklayer class name. First level elements are the bricks.

<div class="bricklayer">
  <div>Your item</div>
  <div>Your another item</div>
  <div>Your another but long item</div>
  <div>Your another but very short item</div>
  <div>Your one more item</div>
  <div>Your smallest item</div>
</div>

3. Define Bricklayer Column Size

.bricklayer-column-sizer is a virtual element that you don't see in the screen. It's being used to decide column size using media queries.

@media screen and (min-width: 1200px) {
  .bricklayer-column-sizer {
    /* divide by 3. */
    width: 33.3%;
  }
}

@media screen and (min-width: 768px) {
  .bricklayer-column-sizer {
    /* divide by 2. */
    width: 50%;
  }
}

bricklayer-column-sizer is the base idea of Bricklayer. Read more about bricklayer-column-sizer how to use it.

4. Make Them Bricks Using Bricklayer Class

You should build Bricklayer with a container element.

var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

bricklayer instance has some methods ⇢ and emits some events ⇢ which are useful for your interfaces' lifecycle.