Material Design Lite

help
1

Hello Astronauts!

Today I discovered the original Lite version of Material Design in pure HTML/CSS/JS. I think it’s quite good, so I want to include it into my project. I moved all the files into my project and got HTML/CSS working, but JavaScript isn’t working. Even after moving it into the client/compatibility folder, nothing happens.

If someone could have a Look into it, here’s the link: http://www.getmdl.io/

6 Likes
2

This is pretty nifty! I hope somebody can create a package for simple integration with a Meteor app.

3

To get it working I started with Welcome to Meteor app,
added a . bowerrc file: {“directory”:“public/components/”} then

bower install material-design-lite --save

then add…

test06

done. tks for pointing me here. just what i need.

note that /public/components, rather than /components, does not work.

4 
<title>xxx</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<script src="/components/material-design-lite/material.js"></script>
<link  href="/components/material-design-lite/material.css" rel="stylesheet" type="text/css">
5

@neurobe thank you so much.

I wrote simple tutorial that is to add MDL to Meteor. But it wrote in Korean and also English, you can read the code of it. it is not difficult.

6

and also CDN for deployed use http://www.getmdl.io/started/index.html

7

I think this would still require the components be activated since they are not in the dom when mdl gets loaded. MDL does have a helper for that, though:

http://www.getmdl.io/started/index.html#dynamic

8

I’ve done everything as described but dropdowns and other JS related components still won’t work properly… I even tried to put the JS in the layout.rendered function, with no result.

I feel a little powerless right now :frowning:

9

Hi,

by pulling it into /public by bower and including js in default project html in header part and still not working?

Than copy paste here how you are including that JS etc. Or Meteorpad/github link

10

After creating a new project and doing the same, it finally worked. But after adding a master template, it’s broken again and that’s the problem… How do I make a Layout without putting the head and body code into a template?

11

Update:
Install my package linked in the comment below and forget about calling upgradeAllRegistered() ever. I added patches around material.js to automate this for you.

Old Post Content:

I managed to make it work by calling

componentHandler.upgradeAllRegistered();

after the template is rendered.

Basically, do something like this:

Template.myTemplate.onRendered(function () {
	componentHandler.upgradeAllRegistered();
});

If you are using iron router and have a layout, add this to the layout because templates inside the layout are rendered first and the layout is the last one.

12

Damn this community is fast! https://github.com/krazyeom/Material-Design-Lite-package-for-Meteor/

There ya go @janjnd, no more headaches.

13

For those following this thread
Action is in progress at Google to iron out some registration bugs…
https://github.com/google/material-design-lite/pull/890 quote…
"I don’t think it’s ripple’s fault, it’s just that componentHandler.upgradeElement() doesn’t work like you might expect. It only applies a single component to an element, ignoring the element’s class names altogether. So if you want to dynamically create a button with ripple, you have to componentHandler.upgradeElement(el, ‘MaterialButton’) then componentHandler.upgradeElement(el, ‘MaterialRipple’). The individual components do sometimes look at class names though, so you can get a weird state where the ripple is set up by a component (as seen in MaterialButton) but the ripple component is never applied.

So, since components do look at class names to determine their behaviour, I think componentHandler.upgradeElement() should simply take an element and determine the appropriate components to apply based on class names alone. I’ve pushed a (backwards compatible) fix here: google/material-design-lite#890 "

14

I’m actively developing my own MDL wrapper here:

I’m adding fixes to the package for stuff the MDL team not willing to put into their core JS.
(See this pull request https://github.com/google/material-design-lite/pull/896)

Currently I managed to make auto-upgrading work on modern browsers with somewhat good efficiency. So you don’t need to worry about calling “componentHandler.upgradeElement” I hope. And I intend to improve the efficiency as far as I can until MDL team do their job on this part.

See the issues section of my repo for things I’m trying to fix to make MDL usable with Meteor (and other common Meteor packages such as Iron:Router). To my knowledge none of the other wrappers have any solution.

2 Likes
15

Why do you choose MDL over http://materializecss.com?

MDL seems to be in an very early stage (features, bugs).

16

Interested to hear why people would favour MDL over Materailize.

In your opinion, which framework has the best future?

17

Material Design is a design standard proposed by Google. It’s not CSS but a set of rules on how things should look and feel.

So you got the Materialize team building out a CSS framework based on those rules.

Then you have Google building out a CSS framework based on those rules.

Since Google wrote the rules, it makes sense to use Google’s implementation of material design. It’s going to be long supported and straight from the horses mouth.

18

That is a basic point of view. The more I think about the question, the more i realise that it will all depend on the level of support over time. IMO, MDL is too early to adopt. Materialize has an established community with non core devs committing a steady stream of PRs. I’m going to wait a month and monitor the git pulse. If MDL can establish the same support over the next month or so then i think Materialize will soon be obsolete.

19

I agree with @dcworldwide. That would mean a lot of devs would also have to re-develop some packages that will use mdl instead of materialize, that would include such things as useraccounts:materialize and autoform:materialize, which i use. (but it might get away their unstylized versions, but i havent tried) Besides, as i see it, mdl based its idea of non-jquery usage, so that you can use it without having a jquery package… But meteor heavily uses jquery and has it as part of its standard package… So using bootstrap (as the standard defacto css framework design in all tutorials) and its material design counterpart materialize makes sense. It took awhile for materialize to gain some ground in the community… Might took some time as well for mdl (once it has a very stable and semi-official package to offer)

20

@zodiase You rock! man.

Adding the following piece makes it work with iron router.

Template.myTemplate.onRendered(function () {
componentHandler.upgradeAllRegistered();
});

meteor add zodiase:mdl :slight_smile: