Since Google released their Material Design specification for Android phones, a number of new CSS frameworks have been introduced to implement it, including Google's own Material Design Lite (MDL) CSS framework. Wijmo 5's library was designed to be CSS-agnostic, and we're happy to announce that Wijmo 5 now fully supports MDL. This support falls into three categories:
- New Wijmo themes for Material Design
- Integration between Wijmo Controls and Material Design components
- Documentation and Samples
- See our sample >>
A Short History of Wijmo, CSS, and Material Design Lite
The Wijmo 5 library provides controls and services to HTML applications. It was designed to be CSS-agnostic in order to work with the CSS framework of your choice. Whatever look you select for your site, Wijmo controls should fit in seamlessly. In our samples, we've been using the Bootstrap CSS framework, probably the most popular available today. It provides a clean and simple adaptive layout system and a nice set of pre-defined elements that are attractive and consistent. But Bootstrap isn't the only CSS framework available. There are many alternatives, and among these is Google’s own Material Design Lite (MDL) CSS framework. MDL is visually appealing and works very well on mobile devices (the Material Design specification was created for use on Android devices). It provides a clean look with bold solid colors, plenty of margins and padding between elements, engaging animations, and subtle shadows. If you haven’t seen it yet, check it out at the MDL site: https://www.getmdl.io/ You may also be interested in this comparison between Bootstrap and MDL. When we first looked at MDL, we loved it! And Wijmo worked OK with MDL, but we wanted better than just “OK”. So we went to work on this, and are happy to announce that the Wijmo V1/2016 fully supports MDL.
New Wijmo themes for Material Design
Wijmo includes over 20 themes; each is a CSS file that you include after the master “wijmo.css” file. One of the themes is called “wijmo.theme.material.css," and it provides a Material-like look and feel to apps with custom colors, borders, and paddings. But MDL allows designers to pick themes based on two colors (primary and accent) picked from a palette with 19 values. The total number of valid color combinations is 288 (because some colors may not be used as accent). 
A look at the "Customize" page on the MDL site. Developers can use the color wheel to pick the primary and accent colors, preview the theme, and, once they're happy, download or copy the CDN link. There are 19 colors on the wheel, but you can’t use the same color for primary and accent, and three of the colors cannot be used for accent, so the total number of valid color combinations is 288. We created 288 new Wijmo Material CSS files to each MDL theme, and created a sample page that looks a lot like the one in the picture. The differences are:
- In our version, the preview includes Wijmo controls, and
- There are download links to the MDL and Wijmo CSS files:
Wijmo's Material Design sample You can run the sample, browse the source code, and download it from the Wijmo site.
You may include these URLs in your applications to load the CSS directly from CDN, or you may download the files and include local copies with your applications.
Integration between Wijmo controls and MDL components
Once we had the themes ready, the next step was to improve the integration between Wijmo controls and MDL components. Specifically, we wanted to allow developers to use Wijmo controls within MDL tabs without writing any code, and in MDL’s super-cool “Text Fields.” We packaged this functionality in a small “wijmo.material.js” file that is part of the “MaterialDesign” sample: The code in this file executes automatically when the page loads, and it allows you to use Wijmo controls in MDL Tab and Text Field components.
Wijmo controls and MDL Tab components
Most tab components work by switching the visibility of “page” elements when users click the tabs. Unfortunately, elements that become visible don’t receive any notifications from the page. As a result, some Wijmo controls fail to update their layout and don’t display correctly. This is an HTML limitation that also occurs in Bootstrap tabs and other layout frameworks. Fortunately, this is easy to fix: you can listen to “click” events in MDL “tab bar” elements and call Wijmo’s Control.invalidate method to notify all Wijmo controls that they should update their layout.
Wijmo controls and MDL Text Field components
MDL’s Text Field is one of my favorite MDL components. The Text Field contains a label and an input element. When the input element is empty and unfocused, the label appears over the input area, like a regular placeholder. When the input element gains focus, the label shrinks and moves to the upper left corner of the component, and an underline bar appears under the element. And if the input element fails validation, an error message appears below the input.
The Text Field component makes it easy to create compact, perfectly laid-out, user-friendly forms.
The image below shows an MDL Text Field in different states: 
MDL Text Field makes creating intuitive forms easy I really like this component because it makes it easy to create forms that are compact, perfectly laid out, and very easy to use. We wanted to make the Text Field component work with Wijmo Input controls such as InputNumber, InputDate, ComboBox, etc. This is also easy to do: you can query the document for Wijmo controls contained in Text Field elements, and attach event handlers that update the Text Field with the current state (by toggling the class names is-focused, is-invalid, and is-dirty). Once you do this, you can use Wijmo input controls within MDL Text Field components. The image below shows the InputDate, InputTime, and InputNumber controls in MDL Text Fields: 
Integrate MDL and Wijmo's HTML5 Input Controls
Material Design in Documentation and Samples
As we developed the new themes and integration script, we started using MDL in some of our new Wijmo samples. The “MaterialDesign” sample mentioned above is our first and main MDL sample, and allows you to experiment with themes and preview their effect on several Wijmo controls. We've also used MDL in our new “OLAPIntro” samples (Angular and PlainJS versions), with excellent results. We plan to use MDL in more samples in the future. If you have any requests related to MDL support, including themes and components, please visit our forums and let us know! View Wijmo's MDL Sample >>
MESCIUS inc.