Material Design Lite for Meteor

check out at my Github

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. - getmdl.io

Visit MDL's website to learn how to get started with MDL.

Build Status

Features

  • Theme color customization (See details below.)

  • Full access to SASS source code (See details below.)

  • Exports componentHandler globally (Client Only).

  • It auto-upgrades everything for you by default, so you can sit back and relax.

  • Exports MDl globally on the client for changing settings in runtime.

    • MDl.componentHandler mirrors componentHandler.

    • MDl.settings stores a copy of the loaded settings. You should not modify it. Treat this as readonly.

    • MDl.autoUpgrade stores the instance of the autoUpgrader. Read more about it below.

Install

$ meteor add zodiase:mdl

How to Use

After installing, create an empty settings file zodiase-mdl.json under the root of your app. Without it most functions will be disabled.

Other than that, there is nothing special to do. Enjoy! 😀

If you want to pick your own theme, like what the MDL team have here, here's how:

  1. First pick your theme colors from that page. You would have to pick both the primary color and the accent color.

  2. Note that on the lower part of that page, there's a link that basically tells you what colors you have picked.

    • The link is always composed by material.{primary}-{accent}.min.css. I picked deep_orange and blue for example, and that link looks like material.deep_orange-blue.min.css.
  3. Now create a zodiase-mdl.json file under the root of your app if you haven't already. This file stores the settings.

  4. In that setting file, compose a JSON document that looks similar to this:

    {
      "theme": {
        "primary": "deep_orange",
        "accent": "blue"
      }
    }
    
  5. This will tell the package to load the corresponding theme file.

If you want more than pre-built themes:

You can load up the SASS source code and define your own colors!

  1. First you'd need to tell the package not to load any theme file.

    {
      "theme": false
    }
    
  2. Define your own theme colors and load MDL's SASS code.

    // mdl-theme.scss
    $color-primary: "0,0,0";
    $color-accent: "255,255,255";
    @import '{zodiase:mdl}/theme';
    
  3. There you go!

  4. There's a full range of variables you can customize. Check out MDL's variables to learn more.

If you want to import SASS files from MDL's source code:

They are all under {zodiase:mdl-assets}/src so have fun!

Auto Upgrade

One big thing this package does for you is auto-upgrading everything.

This feature is enabled by default. You can disable it within the settings file:

{
  "patches": {
    "autoUpgrade": false
  }
}

Doing so would turn off the entire auto-upgrader to save memory. However, this also means that you can NOT use it later in runtime. When auto-upgrader is turned off, MDl.autoUpgrade === null.

Aside from false, autoUpgrade can take one of the three other values: ["fullUpgrade"|"mutationOnly"|"none"], with "fullUpgrade" being the default.

  • "fullUpgrade" uses componentHandler.upgradeAllRegistered() when any mutation is observed.

  • "mutationOnly" uses componentHandler.upgradeElements(mutation.target) on mutations when any mutation is observed.

  • "none" does nothing. However the observer still stays in the memory.

While at runtime and the auto-upgrader is not turned off in the settings, MDl.autoUpgrade is the instance of the auto-upgrader with the following interfaces:

  • MDl.autoUpgrade.getUpgradeStyle() returns the current auto-upgrading style.

  • MDl.autoUpgrade.setUpgradeStyle("fullUpgrade" | "mutationOnly" | "none") sets the auto-upgrade style.

Note that at this point in runtime it is impossible to turn off auto-upgrader any more. So false is not an acceptable value for .setUpgradeStyle().

Known Issues

  • Do not use MDL components at the top level of any templates or template event handlers may not work correctly.

  • Understand how MDL upgrades components and do not separate the necessary elements of a component into different templates unless you want to turn off auto-upgrading and do it manually.

Versioning

The version of this package matches MDL's version to make it easy to perceive what version of MDL it contains. In addition, it has a fourth version number indicating revisions not related to MDL.

License

(MDL source is owned by Google and licensed under an Apache-2 license.)

© Xingchen Hong, 2016. Licensed under an Apache-2 license.

2 replies on “Material Design Lite for Meteor”

Hi Xingchen,

Given that Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository, is there any plan to adapt or create a new package for MDC-web and would that be available anytime soon?

– SK

I’m testing out MDC. Using the core distribution files (js and css) should be easy as the developers say.

However, using source files/modules seems to be really complicated with Meteor.

MDC is using Webpack with custom import paths so its modules can import with @material/component/component.js and @material/component/component.sass. This causes problems with Meteor. For example, suppose we are using MDC as a npm package. Importing /node_modules/@material/checkbox/index.js in file /client/main.js would then import @material/animation, which gets resolved as /client/@material/animation, which doesn’t exist. I tried symlinks and that doesn’t help since @material/component will always be treated as relative path, unless there is custom import path configurations. I don’t think Meteor has that, nor does fourseven:scss have that, either. It’s looking pretty bad. I think the webpack:webpack Meteor package is no longer supported, while I have very little experience with Webpack so I don’t know if it’s gonna work.

Now that’s all about trying to make the Meteor framework work with what MDC has, without touching MDC code as that would increase the cost of maintenance. However as it seems very difficult on the Meteor side, maybe I could try a global find & replace to make all @material/ into {zodiase:mdc-assets} for example. That way I think at least it would work. But on the other hand, that would require all the component assets to be in one single package. I think MDC eventually is going to break into smaller packages, one for each component, not sure how that’s gonna work.

Let me know your thoughts.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.