Discover the template that allows you to add a Material Design look.
Material Design Lite is a frontend website template that enables you to easily add a Material Design look and feel to your projects. MDL was designed for static websites, as we wanted it to be framework and toolset agnostic. However, this doesn't mean you can't customise it for your own website layout needs – MDL is just the starting point. In this tutorial we will be making a simple portfolio web site with a blog, About section and contact form.
Initial HTML setup
First, create a blank HTML page and in the <head> of the document, add <link> tags to the typeface Roboto, MDL CSS file and the MD icon font, starting with the typeface stylesheet.
Next, add the MDL CSS doc, which contains all the styles we will use.
The Material Design colour schemes are based on a primary colour and accent colours. These are specified in the CSS file name as follows: material.{primary}-{accent}.min.css. Our CDN hosts a number of combinations based on common Material Design shades. Here, we've used grey and pink:
This is the basic structure of the page, although the behaviour of the changes depending on where it is added
MDL has a number of different components, which can be used collectively or individually. The layout is considered a component that can be modified to suit your needs, and automatically adapts to different browsers, screen sizes and devices.
The basic structure of a page has a <div> with the CSS classes mdl-layout and mdl-js-layout. These classes contain all the data on the page. Inside the main container, add a <header> tag for navigation with a mdl-layout__header class. Finally, inside the <header>, write a <div> with a mdl-layout__header-row, which will contain the header content.
Next, add content to mdl-layout__header-row. Start by creating a div with a mdl-layout__title class and add the website title. Then add a nav tag with a mdl-navigation class and in here add a href tags for each of your links. Each link needs a mdl-navigation class.
Notice the navigation aligns to the left, next to the title. If you would like it to sit to the right, add a spacer <div> between the title and navigation.
<!-- Title -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
Finally, lets add the layout drawer. This will hold the slide-out content that appears on smaller screens and may be opened with the menu icon on any screen size. For this you pretty much replicate what we have in the navigation, except the spacer now needs to sit outside the <header> tag.
If you already have content on the page, you will notice that on mobile screens the drawer button is floating on top of the content. This is to enable developers to define how much margin/padding appears above the content. To push the content down, you need to tell MDL that the header needs to be fixed by adding the mdl-layout--fixed-header class to the initial <div> container.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Rest of the HTML page -->
</div>
To finish up the page you need to add a <main> tag that will house all the primary content. The basic structure should look like this:
Once you have set up our grid you can begin customising the design to suit your needs
The MDL grid has been designed to reduce the usual coding burden required to lay out content for multiple screen sizes. The grid is defined and enclosed in a container element with the CSS class mdl-grid. It has 12 columns for desktop, eight for tablet and four for mobile, each size having predefined margins and gutters.
To use the grid, add a <div> inside your content container, with the mdl-grid class attached.
The cells/columns will be defined inside the grid. There are two CSS classes to add here: the general cell class mdl-cell and the mdl-cell--COLUMNS-col class, where COLUMNS specifies the cell width.
In this example, the first row "Hello world!" is full-width (12 columns) and the second row has four cells (three columns). This second row will stay as a three-by-three column grid until it reaches less than 480px.
You can target devices with specific classes here by adding the mdl-cell--COLUMNS-col-DEVICE class. If you want your tablet layout to look similar to a desktop layout, you should add these classes to make the last two cells appear as two columns with a full-width one before it:
There are two types of footer: a mega and a mini. In this example we'll use a mini footer, which has a content structure made up of left and right sections, with CSS classes for each (mdl-mini-footer__left-section and mdl-mini-footer__right-section respectively). Inside, we have a <div> for our logo/title and a <div> for our link list, which appears as a row.
Where we add the footer in the markup depends on the desired effect. If we would like to have the footer fixed, we need to to add it after the <main> tag. If we want it to scroll and appear after our content, we add it inside the <main> tag.
The Grid contains all of the cells. Each cell width can be customised, though the defaults work well
You can customise the layout by hiding the mdl-layout__drawer on desktop. To do that, add the mdl-layout--small-screen-only class to the drawer container. Afterwards, remove the mdl-layout-spacer from the <header>. To centre the title and navigation, place the nav in its own mdl-layout__header-row and then write some custom CSS.
To hide the navigation when scrolling down the page, you can now apply a waterfall technique to the <header> by adding the class mdl-layout__header--waterfall to the <header>. This way users can focus solely on the content (remember, this will only work when there is enough content to scroll).
An example app layout with an open navigation drawer, along with a cross-section diagram of its component elevations along its z-axis
In this example, the portfolio page will feature each piece of design work via MDL cards. The card component is a virtual piece of paper that contains text, images and links.
The default grid for MDL is three cards in a row for desktop, two for tablet and one full-width for mobile. If this is the grid you're looking for, you won't need to add any mdl-cell--COLUMNS-col numbered classes. We can even add these column cell classes directly onto the cards without a separate <div> container.
To add a shadow for the card, use mdl-shadow--2dp class. The dp number in the class ranges from 2 to 24, and it controls the depth of the shadow.
To add a max-width to the grid, you need to include some more custom CSS. The cards are responsive by default, so you can add the class to the parent grid and they'll adjust automatically.
Nesting grids allow us to customise the layout further for more typographical sites
For the individual portfolio pages you can use the same card component as before, with full-width cells. In the code below, there's an additional grid for the copy and images, to break up each section, and a utility class no-padding to remove undesired space.
To add social share buttons to each post, use the tooltip component. The IDs should be unique, as they reference the container for each tooltip.
<div id="tt1" class="icon material-icons">share</div>
<div class="mdl-tooltip" for="tt1">
Share your content<br>via social media
</div>
The last page is the contact form. Let's look at the text field component, which is essentially an enhanced version of <input type="text"> and <input type="textarea">. There are some transitions you can apply to the text field (e.g. expanding the input when a button is pressed). You can also add a pattern attribute and value to the <input> and associated error message in a <span>.
The final component is a button for the form. There are many variations of this component, including raised, icon and flat buttons. Here we have a simple, raised submit button that shows a ripple effect when it's pressed. The different classes indicate the effects attached to the button.
Now your layout is complete, you can start adding specific design elements to it. Alternatively, you can sketch a new layout first and try to recreate it using the grid. On the MDL website there are a bunch of templates you can refer to. There are many utility classes on the getmdl.io website for each component, so check there first before you start writing your own custom CSS. Now get designing!
The author has created an exclusive screencast to go with this tutorial:
This article originally appeared in issue 277 of net magazine; subscribe here.
