loftierthoughts / material

Material design for Angular

Material Design for AngularJS Apps

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

This project is still in early preview. It is a complementary effort to the Polymer project's paper elements collection.

Demo Site

You can see these components in action at http://material.angularjs.org

Development

This project is in early development via a small core team of Ionic Framework and AngularJS developers. We don't have guidelines yet for broader community involvement, although we hope to have some soon.

For issues, including progress on accessibility support for these UI elements, see the Issue Tracker

Usage

In its current early state, use AngularJS Material Design at your own risk. APIs are changing rapidly.

When v0.0.1 is released, the project will be more usable. But everything is subject to rapid change until beta is ready.

Nevertheless, if you wish to use AngularJS Material Design, here are the steps (note that what the dependencies are and how to use them will change soon):

1. npm install
2. bower install
3. gulp build
4. Include jquery.js
5. Include angular.js
6. Include angular-animate.js
7. Include config/lib/angular-animate-sequence/angular-animate-sequence.js
8. Include config/lib/angular-animate-sequence/angular-animate-stylers.js
9. Include dist/material-design.js
10. Include dist/material-design.css

File Structure

• Components belong in src/components/{componentName}
• Component modules must be named material.components.{componentName}
• Templates for directives are declared inline
• Gulp builds files to dist folder, which is not version controlled (read below)

Commit Conventions

• http://github.com/ajoslin/conventional-changelog
• git pre-commit hook available here. Place it in .git/hooks/pre-commit, and run chmod +x .git/hooks/pre-commit. It will validate your commit messages for you.

Development

• npm install for gulp deps
• bower install for angular deps
• gulp build (alias gulp) to build, add --release flag to uglify & strip console.log.
• gulp watch to build & rebuild on changes
• gulp validate to test and jshint
• gulp jshint to run jshint
• gulp karma to test once
• gulp karma-watch to test & watch for changes
• gulp docs to build docs into dist/docs

Documentation

• See docs/README.md.