Components for Web

I’ve been having a lot of fun building this blog and have learned a lot. The site is wholly static and has no middleware layer at all. It’s all CSS, and javascript with a few supporting technologies to pull everything together. The design is entirely built with the components from material.io.

Having worked with mature CSS frameworks like Bootstrap and foundation for years, I found getting started with material.io a little unsettling. Out of the box, Material doesn’t proscribe an overall framework where you slot in your components. Instead, you assemble the components that you need and pull them into your project as required. If you need a grid for part of your site, you pull in the grid component and use it where needed. You don’t necessarily need to use it for your entire site, and this site doesn’t use the grid everywhere.

Material has some dependencies, most notably NPM and Webpack. It helps if you have a basic understanding of how those two things work, but even if you don’t have much experience with those, the material.io docs are great (although a bit scattered in places).

Get a component with npm

Let’s say you want to use the material button in your project. The material button makes use of two components, the button itself and an optional animation component called ripple. Ripple gets used by many components, but you only have to pull it into your project once.

To get the components, you’re going to use NPM in the root of your project (where NPM installed your package.json file) and run:

npm install @material/button @material/ripple --save-dev

This pulls both components into your node-modules directory and makes them available to Webpack for processing. They get saved to the development dependencies section of your package.json file because you don’t deploy them to your site. Webpack is going to use them to generate your javascript file(s) and CSS file(s) that you will ultimately deploy.

There is a whole bunch of fiddling around with Webpack to get it set up the way you want, but there are excellent instructions in the material quickstart to get you going.

Add some css

In your CSS entry point file (again, some Webpack learning required), you’ll import the sass/CSS files by adding a line like

@import "~@material/button/mdc-button";

to the top of your sass file. You don’t need to add the ripple component here because there are no CSS parts of that component.

update your javascript

While not required to use the button styling, we can add the ripple effect, which adds an informative animation on a button when it’s clicked.

At the top of your javascript entry point file (more Webpack), you’ll add a line like

import {MDCRipple} from "@material/ripple/index";

Webpack inserts the required javascript into the file(s) and spits out for you to add to your web page.

Right now, you can add a button to your HTML, but the ripple effect has not been told to what it needs to be added.

Here’s a neat little way with plain vanilla js to attach the ripple to any button in your site. Add some code like this in your javascript entry point file:

const btns = document.querySelectorAll('.mdc-button');
for (let e = 0; e < btns.length; e++)
{
    MDCRipple.attachTo(btns[e]);
}

Add a button

Now, in your HTML, you can add a button and use the material styling like this:

<button class="mdc-button">Button</button>

By adding the mdc-button class, your button will have all the sizing, colors, text transformations, and even the neat ripple animation.

Material classes

The material components have lots of CSS classes you can use to decorate your HTML. Unfortunately, they often have long names like mdc-layout-grid__cell–span-3. They have dashes, underscores, double dashes, and double underscores. At times, quite challenging to type and remember.

Use a good editor

Because of the complexity of the CSS class names, a good editor like VSCode or Webstorm can be a huge help. They both provide code insight for all of the CSS classes available while you work. When you find you are working with a component and some class you know should be available, but isn’t in the provided list, chances are you forgot to import the CSS for that component. Use the NPM import and set your files up. The classes should drop into place.

What’s missing

Material.io web is still a work in progress and has two components that are noticeably missing.

1. There is currently no date picker or built-in date validation. That might require some heavy lifting in the form of a javascript mask or something more robust like a pop-up dialog.
2. Data tables are not implemented yet and are not on the near-term roadmap. Required for data-heavy applications, so for now, you’re going to have to roll your own.

Other than those two, the components are solid. I particularly like floating-label text inputs. They provide great animation and constructive feedback for the user during data entry. I’ve tested them with all of the major browsers and the rendering is nearly identical. Overall, fun to work with and nice results, although, you’ll find yourself dipping into javascript more than you would with something like Bootstrap.