AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

angular-bricklayer

AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library

npm version Bower version

Demos

Image

Installation

  1. Install via either bower, npm or downloaded files:

    1. via bower: bower install --save angular-bricklayer
    2. via npm: npm install --save angular-bricklayer
    3. via CDN (jsDelivr)
    4. via downloaded files
  2. Include dependencies and angular-bricklayer in your HTML.

    1. When using bower
    <link rel="stylesheet" href="bower_components/bricklayer/dist/bricklayer.min.css">
    <script src="bower_components/bricklayer/dist/bricklayer.min.js"></script>
    <script src="bower_components/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
    1. When using npm
    <link rel="stylesheet" href="node_modules/bricklayer/dist/bricklayer.min.css">
    <script src="node_modules/bricklayer/dist/bricklayer.min.js"></script>
    <script src="node_modules/angular-bricklayer/dist/angular-bricklayer.min.js"></script>
    1. When using CDN
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.3/bricklayer.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/angular-bricklayer@1.1.0/dist/angular-bricklayer.min.js"></script>
    1. When using downloaded files
    <link rel="stylesheet" href="YOUR_PATH/bricklayer.min.css">
    <script src="YOUR_PATH/bricklayer.min.js"></script>
    <script src="YOUR_PATH/angular-bricklayer.min.js"></script>
  3. Add jtt_bricklayer to your application's module dependencies, like this:

    angular.module('app', ['jtt_bricklayer']);

Usage

Create a simple list and set the css class bricklayer like this

<div class="bricklayer" ng-cloak>
    <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>

Define bricklayer column size:

@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%;
  }
}

Add bricks dynamically

Use bricklayer-append or bricklayer-prepend as attribute, class or element name inside of your bricklayer instance

<div class="bricklayer" ng-cloak>
    <!-- append -->
    <div bricklayer-append ng-repeat="item in appendData" ng-cloak></div>

    <!-- prepend -->
    <div bricklayer-prepend ng-repeat="item in prependData" ng-cloak></div>
</div>

Images

Since v1.1.0 the grid gets redrawn when images have been loaded, by including and using desandro's imagesloaded

License

MIT