A responsive grid/portlet directive that does all kinds of fancy stuff.
This is a fork of the excellent Manifest Web Designs angular-gridster directive. I needed some features that required breaking some backwards compatibility.
##Demo
See Live Demo
##Installation
bower install ez-gridster
Then, import the following in your HTML alongside jQuery
and angular
:
<link rel="stylesheet" href="dist/ez-gridster.min.css" />
<script src="dist/ez-gridster.min.js"></script>
<script src="dist/ez-gridster-tpl.min.js"></script>
##Usage
In your view
<div ez-gridster="items">
<img ng-src="{{ item.src }}"/>
<div>{{ item.name }}</div>
</div>
In your controller:
$scope.items = [
{
name: 'Item 1',
desktop: {
col: 1,
row: 1,
sizeX: 3,
sizeY: 4
},
tablet: {
col: 1,
row: 1,
sizeX: 3,
sizeY: 4
}
mobile: {
col: 1,
row: 1,
sizeX: 3,
sizeY: 4
}
}
//... more items
];
##Configuration
See GridsterConfig constant.
##Contributing
####Style Guide Please respect the formatting specified in .editorconfig
####Grunt Tasks
grunt default
Runs jshint & compiles project
grunt dev
Opens demo page, starts karma test runner, runs unit tests on src & test folder changes
grunt dev_e2e
Watch src folder and run e2e tests on changes
grunt test
Runs the unit & e2e tests