Materialize: To 1.0 and Beyond

Materialize
4 min readNov 11, 2017

--

A few months ago, we announced we had started work on 1.0. And now, after hundreds of commits, hundreds of hours of hard work, and 30,000 line changes. 1.0 alpha is finally here. In this article, we explain our goals for 1.0, what’s new, and how you can try out the changes!

Materialize 1.0 alpha

A Materialize for everyone

Materialize has had it’s share of problems in the past, some at the lower bug level and others at the higher framework-architecture level.

When Materialize was initially created, it was intended to be as easy as possible to use for the for the entry-level, burgeoning web-developer. As a result, Materialize had a lot of pre-configured settings on its components. This created problems for the more seasoned web-developer, especially those working with Materialize in a Single Page App (SPA), who wanted more control over the framework and its components. Many also had problems when they tried to include Materialize in their SPA due to incompatibilities we had with various module loaders.

Moreover, when features got added over time through Pull Requests and Issue feature requests, our Components grew to be more and more inconsistent with each other with each minor release.

1.0 plans to fix these usability problems to provide a better experience for both the beginner and seasoned web-developers alike.

What’s new in 1.0?

Well, besides magic and unicorns, quite a lot actually. But equally as important is what is missing in 1.0.

We’re excited to announce that jQuery is no longer a dependency in 1.0!

Of course, we’ve taken care to ensure a seamless backwards compatibility experience for those who still want to use jQuery in their project.

Other Improvements:

  • Increased programmatic control over components. Components were rewritten to have standardized opened/closed/destroyed methods.
  • Improved and standardized documentation for components. The new methods and component properties are now all documented clearly.
  • Documentation has also been redesigned to be easier to read.
  • We’ve cut dependencies: jQuery (84kb), Hammer.Js (21kb), Roboto font
  • Improved compatibility with various module loaders and bundlers. Currently CommonJS, native ES6 imports, and Webpack are have been tested. Keep in mind this is still a work in progress, but we’re committed to fixing problems as they arise.
  • Fixed many longstanding bugs and improved reliability and ease of use with many of our plugins, especially the Select Plugin.

Other Notable Changes

  • Rewrote Datepicker and Timepicker, which used to be forks of the no longer maintained github projects: pickadate.js and clockpicker.
  • Removed features: ScrollFire, Transitions.js, and Dismissible Collections due to lack of use

How do I try it out?

You can download it from the new 1.0 alpha documentation site: next.materializecss.com

Or using npm:

npm install materialize-css@1.0.0-alpha.1

Follow the upgrade guide for steps on how to upgrade from 0.100.2 to 1.0.0

Keep in mind, this is an alpha release of 1.0 so it is still rough around the edges. Please help us improve it, by reporting bugs and documentation mistakes on GitHub.

Future

Our goal here is to keep Materialize up to date as the web evolves while still supporting a good handful of older browser versions. Here are two things to look for in the versions after 1.0 releases.

  • We’re planning on adding a flexbox-based grid system.
  • Components will switch to use an event based system instead of callbacks.

A word of thanks

Here’s what the documentation website looked like in it’s early days. Back then we had very few components and no real users.

A screenshot of a very early prototype of Materialize back in Oct 2014

Once we had a working prototype on GitHub, we had exactly 4 stars, exactly equal to the number of people working on the project. And that was exactly what we expected; we never expected it to become as popular as it did. Needless to say, we were wrong and have been overwhelmed with all the support from the community.

So from us, a big thank you to everyone who has given Materialize a try the past 3 years ❤. We hope you like the direction Materialize is moving in and continue to support us.

Patreon

We’ve just launched a Patreon page which we hope will allow us to focus more on improving Materialize. If want to support us through Patreon, it would mean a lot to the project as well as to us personally.

Without getting into too much detail here, Supporters can have their name shown on our backers page on our website, and at the Sponsor level can display their logo on our documentation page. Thanks again for all the support you’ve already given us as well as the donations we’ve received previously through PayPal.

— Alvin Wang + Alan Chang

--

--