Implementing Material Design for the Web on My New Demo Website

My most recent project has been creating a new Material Design 2.0 demo website, used for hosting any small coding projects I may have (e.g. for Computer Science lessons). The idea came about last Thursday, after I was given a Computer Science assignment to replicate the Luhn Algorithm. I was already keen to experiment with Material Design 2.0 (what with it being released only a few months ago), and I enjoy developing websites - so a natural step was to create a Material Design web app.
Firstly, you may be wondering what on earth is the Luhn Algorithm? It is a checksum algorithm used for credit cards and the like - it checks that the card number entered is valid, using a rather simple process: it reverses the digits, then each digit in an odd indexed position (based on zero-indexing) is doubled. If this comes to more than 9 (i.e. more than one digit), it subtracts 9 (the same as adding the digits). Finally, if the sum of all of the digits (replacing those at odd-indexed positions with the new ones) modulo 10 is zero, the number is valid. This is algorithm is commonly used internationally.

The first part of the coding process involved working out how to implement the Material Design library on a GitHub Pages site (I'm using GitHub to host my demo site - see mgrove36/demo-code). Rather unhelpfully, all of the implementation examples on the Material Design website involve using the command

Which I can't do (as far as I know) on GitHub Pages. This meant I had to find an alternative implementation method. Eventually, I found a rather useful post on medium.com with what I wanted - instructions on how to implement Material Design on a small, static website.
This allowed me to initiate the Material Design libraries, and to understand how a basic button works:

Firstly, include the Material Design JavaScript and CSS libraries by including the following code in your <head> tag. I have also included the material icons font (yes, it's a font - more on this to come), as I will utilise the icons later, but it is optional:

Then, I used the Material Design page for buttons to include the relevant HTML for a button. This was one of the easiest steps, as it just involved copying the code directly from the website and altering the content of the button. All that is involved is a <button> tag and the class "mdc-button" - for reference, MDC stands for Material Design Components; it is the Material Design library:

After doing some research into set-up methods for the button ripple animation (something that you've almost certainly already come across, as it is used all over the web), I concluded that it would be easiest to use the built-in mdc.autoInit() function - one that only needs to be run once on each page, and takes the content of the data-mdc-auto-init attribute for each HTML element and applies the relevant animations. For example, I used the following code for the buttons:

So, when using the mdc-data-auto-init attribute, ensure you include the following code in the JS for the page:
This should make all of the desired animations work perfectly.
The coding got a lot easier from here on in, as I had a much better understanding of the library.
I then decided to change the button styling to an outlined button, as opposed to the default one. Luckily, this involved only a small change in the code - adding an extra class to the <button> tag:

Finally, I had a Material Design button working. Next, I wanted a text input field, and chose the outlined style again on the text input field demo Material Design page. Therefore, I added the following code (copied from the text input field page at material.io, with one small edit):

If you only want the default text field, use:

Rather importantly, I have put the code from the material.io website into an extra <div>. This is due to a bug which means the input field is wider than the viewport, rather annoyingly enabling horizontal scrolling. The fix also involves applying the following styling to the container div. I used the class "mdc-text-field-container" for it, but it can be whatever you want:

The margin-top style is to ensure the text that moves to the top of the input field when it is selected is always visible, as otherwise it can be cut off by the container. Also notice that I used the mdc-data-auto-init attribute again, but this time to specify the text field animation. The final thing to take note of is the <label> just after the input field (<input>) - this is the text field helper text: the text that becomes visible as a hint when the text field is selected. It is also possible to make it persistent, by adding the class mdc-text-field-helper-text--persistent.
The next element to be added was a top app bar - the title bar you see at the top of Material Design apps. This was, again, rather simple, as it just involved copying from the material.io website. This top app bar has a menu button too, for activating a drawer (I'll cover them later). This icon is one of the Material Icons mentioned briefly earlier; material icons just need an element which has the class "material-icons" and the content of the name of the icon desired - so in this example, the name of the icon is menu, and the content of the element (in this case an <a> tag) is "menu":

Note that the top app bar is initiated manually in JS though - not via autoInit():

The first line initiates the top app bar, and the second specifies where the main content is. This means that the main content of the webpage needs to be in a container with the id "main-content' . I recommend that this is a <main> tag.

The drawer I decided upon (for navigation) was the modal drawer. This is one that is opened by clicking the menu button on the top app bar and closed by clicking the dimmed area to the right of it. This requires two things: the drawer and an empty div with the class "mdc-scrim". This is used to dim the main content; the modal drawer doesn't work without it.
With this drawer, the top app bar and main content go in a div together (using the class name "mdc-drawer-app-content"), so the code is:

The JavaScript is as follows (the only additions are the initiation of the drawer and the code for the drawer to be toggled:

So there we have it: a Material Design webpage. I also added a few extra tags in the <head>, in order to make it into a web app that can be added to the home screen on various devices:

The penultimate step was to code the Luhn Algorithm itself, taking data from an input field, verifying the number when a "check" button is pressed (or when the enter key is pressed, no matter what is selected on the page) and displaying a verification message. I also wanted the verification message to disappear when the number's edited.

The code for the algorithm itself was rather simple, only taking around 15 minutes to write. It is as follows:

Finally, I decided to dynamically insert the top app bar, drawer and "view in GitHub" link that I add to every page. This simply involved using the jQuery load() method and putting the subsequent JS in the function that runs on completion, to ensure that all of the required elements are in the DOM. The completed code is:

I hope this post has helped you to understand the Material Design library better; please do leave a comment or contact me if you need any help.

Please check out my GitHub, @mgrove36, and GitLab, @mgrove36; if you have any ideas for projects I could do, please leave them here.

Comments

Post a Comment

Popular Posts

Infographic: The Archerfish