angular-bricklayer

    1.1.0 • Public • Published

    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.1/bricklayer.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.1/bricklayer.min.js"></script>
      <script src="//cdn.jsdelivr.net/angular.bricklayer/1.1.0/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:
    <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>
    • 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">
        <!-- append -->
        <div bricklayer-append ng-repeat="item in appendData"></div>
     
        <!-- prepend -->
        <div bricklayer-prepend ng-repeat="item in prependData"></div>
    </div>

    License

    MIT

    Install

    npm i angular-bricklayer

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • johnnythetank