https://github.com/johnnythetank/angular-bricklayer

AngularJS module for ademilter's bricklayer, a lightweight & independent cascading grid layout library
https://github.com/johnnythetank/angular-bricklayer

angular angular-grid bricklayer grid layout mansonry

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/johnnythetank/angular-bricklayer
• Owner: JohnnyTheTank
• License: mit
• Created: 2016-04-22T16:01:23.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-13T13:59:07.000Z (over 7 years ago)
• Last Synced: 2024-11-17T04:51:39.643Z (about 2 months ago)
• Topics: angular, angular-grid, bricklayer, grid, layout, mansonry
• Language: JavaScript
• Homepage: http://plnkr.co/edit/mo3G36
• Size: 29.3 KB
• Stars: 43
• Watchers: 3
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# angular-bricklayer

AngularJS module for [ademilter's bricklayer](https://github.com/ademilter/bricklayer), a lightweight & independent cascading grid layout library

[![npm version](https://badge.fury.io/js/angular-bricklayer.svg)](https://badge.fury.io/js/angular-bricklayer)

[![Bower version](https://badge.fury.io/bo/angular-bricklayer.svg)](https://badge.fury.io/bo/angular-bricklayer)

## Demos

- [Simple demo on GitHub](https://rawgit.com/JohnnyTheTank/angular-bricklayer/master/demo/index.html)

- [Simple demo on Plnkr](http://plnkr.co/edit/mo3G36) 

- [Demo with images from flickr](https://rawgit.com/JohnnyTheTank/apiNG-design-bricklayer/master/demo/index.html) (made with [apiNG](https://github.com/JohnnyTheTank/apiNG))

[![Image](https://rawgit.com/ademilter/bricklayer/master/assets/screenshot.gif)](http://ademilter.github.io/bricklayer)

## Installation

1. Install via either [bower](http://bower.io/), [npm](https://www.npmjs.com/) 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](https://github.com/JohnnyTheTank/angular-bricklayer/zipball/master)

2. Include dependencies and angular-bricklayer in your HTML.

    1. When using bower

    ```html

    

    

    

    ```

    2. When using npm

    ```html

    

    

    

    ```

    3. When using CDN

    ```html

    

    

    

    ```

    4. When using downloaded files

    ```html

    

    

    

    ```

3. Add **`jtt_bricklayer`** to your application's module dependencies, like this:

    ```javascript

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

    ```

## Usage

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

```html



    
Your item

    
Your another item

    
Your another but long item

    
Your another but very short item

    
Your one more item

    
Your smallest item



```


Define **bricklayer column size**:

```css

@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

```html



    

    


    

    




```


## Images

Since `v1.1.0` the grid gets redrawn when images have been loaded, by including and using [desandro's imagesloaded](https://github.com/desandro/imagesloaded)

# License

MIT