The Easy Way to Add Material Design to Your Meteor App


by Nick Wientge

Differential loves Google’s Material Design. We were one of—if not the—first teams to attempt to integrate Meteor with Google’s Polymer Project. We have several client projects in the works that make extensive use of Material Design. For a team that is made up almost exclusively of developers, Material Design has given us a tremendous boost in productivity and quality of work. Here are a few packages we’ve found that make adding Material Design to our Meteor apps a cinch.

What about Polymer?

Polymer is a very powerful tool that brings webcomponents to all modern browsers. It also happens to have a very nice set of Material Design components. Polymer, however, is still under active development and requires a bit of a learning curve. For this article, we’ll stick to the easy way.

materialize:materialize

Materialize.css

Materialize.css may be the most polished of all the Material Design CSS frameworks — but it gains extra points for not depending on Angular or React, and instead just including plain jQuery plugins that play nice with Meteor. Additionally, they have an official Meteor package!

useraccounts:materialize

Meteor User Accounts has a package for just about every UI framework in existence — and Materialize is no exception. With a single {{> atForm}} you can have a fully-functional, Material-Designed sign up flow:

useraccounts:materialize

gildaspk:autoform-materialize

One of my favorite combinations of packages for productivity are aldeed:simple-schema, aldeed:collection2 and aldeed:autoform . With these three packages you can consolidate all of your data model schemas and validations into a single place, and then expose these attributes as a functional, validatable, HTML form with a single call to {{> quickForm }}.

With the addition of gildaspk:autoform-materialize, that form can also be sport a slick Material Design theme:

gildaspk:autoform-materialize

Material Design Boilerplate

Want to see all of these package together in action? Check out the materialize branch of our meteor-boilerplate package or go to materialize-boilerplate.meteor.com.

Are there any Material Design Meteor packages you’d like to see us add to the Boilerplate? Let us know @BeDifferential!

Share Share on Twitter Share on Facebook Share on LinkedIn

How Can We Help?

Reaching out doesn’t mean you’re ready to start a project, but we’d love to learn more about the challenge you’re facing, answer any questions, and see if we might be a good fit for working together.

Contact Us