Using angular material design as a design framework without AngularJS

Question

Can I use only angular material like how I use bootstrap as a design framework?

*not really want to use AngularJS for current stage.

What's your advice or is that recommendable?

Answer 1

If you want a CSS framework like Bootstrap but with material design, then try http://materializecss.com/ which is a Responsive CSS Framework based on Material Design.

Answer 2

Yes, you can use Angular Material like bootstrap; however, their documentation is not as good as bootstrap's is. I've used it on several projects, but you have to get used to how they want you to include directives and CSS classes into your code. For example, you have to get used to using md-theme to include custom themes, and you have to get familiar with how their directives look inside the HTML itself. For example, their insert tag is md-text-float, which changes into md-input-group inside the HTML. So if you wanted to do any CSS customization, you'd have to know about this change.

As for bootstrap's grid, Angular Material doesn't use one like it. They use a flex grid, which takes a little time to get used to if you have been using bootstrap or Bourbon Neat. Using the flex system, Angular Material uses attributes like layout and layout-align in addition to their directives md-toolbar and md-content.

It definitely takes awhile to get used to, but it gets easier as you get to know how they structure the HTML and use directives. If you know Angular and how directives work, it's easier to work out. However, if you really want to know how it works, just look at the code inside angular-material.js, which comes with it when you download from Bower.

Answer 3

Probably not, since angular material has angular-aria, angular-animate, and hammer.js as dependencies. And you probably already know that these require AngularJS.

You'll see that angular material works like custom directives in AngularJS.

If you really want to use angular material, I would just go ahead and include all the required javascripts, but angular material is really meant to be used as temporary examples and demos as of now (although Google recently started distributing it through its own CDN).

Answer 4

If you don't want to use AngularJS, I recommend you to use Polymer Project. It is a general implementation of Material Design specification.

Answer 5

Angular Material is useful if you already have experience or have decided on using AngularJS for your project, mostly all of the components are specified as directives and it assumes you're using the usual AngularJS toolchain.

If you don't necessarily need, like or plan on using Angular as a front-end framework, then you're better of using MDL (Material Design Lite) which is more similar to Bootstrap.

Angular Material is just one of the Material Design implementations from Google.

1. The MD specification was made for Android application UIs.

2. It was then implemented in Polymer as Paper Elements. (https://elements.polymer-project.org/browse?package=paper-elements)

3. Angular Material came next;

4. More recently, Google released Material Design Lite

Each of these implementations targets a different type of project. The original MD specification was for Android apps, Paper Elements are web components for the Polymer Project, Angular Material is a design library for AngularJS apps (an alternative to AngularUI's Bootstrap implementation, really) and Material Design Lite seems like it's made for more general websites like Bootstrap is currently used.

tl;dr

If you don't want or need the AngularJS functionality, you're better off using Material Design Lite (http://www.getmdl.io/) or some of the other non-Google implementation like Materialize that is light and easy to embed in your curent workflow.