Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 23 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
# Material Design for AngularJS Apps [![Build Status](https://travis-ci.org/angular/material.svg)](https://travis-ci.org/angular/material)

[![Join the chat at https://gitter.im/apat183/material](https://badges.gitter.im/apat183/material.svg)](https://gitter.im/apat183/material?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[Material Design](https://www.google.com/design/spec/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 specification for use in Angular single-page applications (SPAs).

![venn diagram](https://cloud.githubusercontent.com/assets/210413/5077572/30dfc2f0-6e6a-11e4-9723-07c918128f4f.png)

This project is in early pre-release. Angular Material is both a reference implementation of
Material Design and a complementary effort to the [Polymer](https://www.polymer-project.org/)
project's [Paper Elements](https://www.polymer-project.org/docs/elements/paper-elements.html)
collection.
For developers using AngularJS, Angular Material is the reference implementation of Google's Material Design Specification. This project implements version 1.x of Angular Material and includes a rich set of reusable, well-tested, and accessible UI components.

Quick Links:

Expand All @@ -26,7 +25,7 @@ Material is targeted for all browsers with versions n-1; where n is the current
## <a name="demos"></a> Online Documentation (and Demos)

<div style="border: 1px solid #ccc">
<img src="https://cloud.githubusercontent.com/assets/1045233/6678772/12afad78-cbfc-11e4-8c9f-a13e336fb6a6.png" alt="Angular Material docs website" style="display:block;">
<img src="https://cloud.githubusercontent.com/assets/11819543/10056006/4aee3b68-6207-11e5-8497-a0656f85902a.PNG" alt="Angular Material docs website" style="display:block;">
</div>

- Visit [Material.AngularJS.org](https://material.angularjs.org/) online to review the API, see the
Expand All @@ -38,8 +37,8 @@ Material is targeted for all browsers with versions n-1; where n is the current

Developers interested in contributing should read the following guidelines:

- [Issue Guidelines](docs/guides/CONTRIBUTING.md#submit)
- [Contributing Guidelines](docs/guides/CONTRIBUTING.md)
- [Issue Guidelines](CONTRIBUTING.md#submit)
- [Contributing Guidelines](CONTRIBUTING.md)
- [Coding Guidelines](docs/guides/CODING.md)
- [ChangeLog](CHANGELOG.md)

Expand Down Expand Up @@ -107,7 +106,7 @@ project.
#### CDN

CDN versions of Angular Material are now available at
[Google Hosted Libraries](https://developers.google.com/speed/libraries/devguide#angularmaterial).
[Google Hosted Libraries](https://developers.google.com/speed/libraries/#angular-material).

With the Google CDN, you will not need to download local copies of the distribution files. Instead
simply reference the CDN urls to easily use those remote library files. This is especially useful
Expand All @@ -117,8 +116,8 @@ when using online tools such as [CodePen](http://codepen.io/), [Plunkr](http://p
```html
<head>

<!-- Angulars Material CSS now available via Google CDN; version 0.8 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<!-- Angular Material CSS now available via Google CDN; version 0.11.2 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

</head>
<body>
Expand All @@ -129,22 +128,22 @@ when using online tools such as [CodePen](http://codepen.io/), [Plunkr](http://p
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


<!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
</body>
```

> Note that the above sample references the 0.8.3 CDN release. Your version will change based on the latest stable release version.
> Note that the above sample references the 0.10.0 CDN release. Your version will change based on the latest stable release version.

Developers seeking the latest, most-current build versions can use [RawGit.com](//rawgit.com) to
Developers seeking the latest, most-current build versions can use [GitCDN.xyz](//gitcdn.xyz) to
pull directly from the distribution GitHub
[Bower-Material](https://github.com/angular/bower-material) repository:

```html
<head>

<!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
<link rel="stylesheet" href="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.css">

</head>
<body>
Expand All @@ -154,11 +153,15 @@ pull directly from the distribution GitHub
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>

<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
<script src="https://gitcdn.xyz/repo/angular/bower-material/master/angular-material.js"></script>

</body>
```

> Please note that the above RawGit access is intended **ONLY** for development purposes or sharing
low-traffic, temporary examples or demos with small numbers of people.
Once you have all the necessary assets installed, add `ngMaterial` as a dependency for your app:

```javascript
angular.module('myApp', ['ngMaterial']);
```