A lightweight masonry-like, responsive grid for AngularJS.
bower install --save angular-deckgrid
angular-deckgridin your HTML.
angular-deckgridmodule in your application.
The directive does not depend on the visual representation. All the responsiveness and beauty comes from your CSS file. But wait a second. Let's take a look how the directive will be integrated. An example:
Okay, we assume that you have a collection of photos and you want to display these in a deckgrid, where every photo provides a name and a source URL. The internal structure of this collection is completely up to you. You can use any collection structure you want. No restrictions at all.
source: The collection of objects that should be passed into your deckgrid (by reference. Object change will be reflected in the grid).
cardTemplate: The URL to the template which represents one single card in the deckgrid.
A complete example: Photogrid
Okay, you have your controller ready and your template is fine so far. The only thing what is missing is a flexible grid. Let's start!
Your possible data structure
Your possible card template (it is completely up to you)
That's all! Ehm, no. If you run your application now you will notice that there is only one column. What is missing? Well, we have to define the configuration for the visual representation. And what is the best place for something like this? Yes, for sure! Your CSS file(s).
The grid configuration
The grid items will be distributed by your configured CSS selectors. An example:
In order to support different grid representations for different screen sizes, you can define the respective media queries like:
This will define that for a device with a maximum screen width of 480px, only one column should be used. As I mentioned before. It is completely up to you how to define the column sizes. Go crazy.
Version 0.1.1 (20131122)
- [Feature] Added log message for the case when the CSS configuration is not available (#1)
Version 0.1.0 (20131121)
- Initial release. Functionality for rendering grids.
- AngularJS Needless to say. You know the beast. One of the best frontend frameworks in the world.
- Rolando Murillo and Giorgio Leveroni, the guys behind salvattore who inspired me to implement a similar solution for the AngularJS world.