Material Design

Material Design

Material Design (https://material.google.com/) is a design language or philosophy that was developed by Google in 2014.   Its purpose was to create a visual language that utilizes classic principles of good design and incorporates technology and science. It allows users to have a unified experience regardless of the size of the device and treats all input methods like touch, voice, mouse and keyboard as first class citizens.  Material Design is also a three-dimensional environment that contains light, material and cast shadows.  The use of all three dimensions, bright colors, larger images and animation that imitates the natural world really separates this design language from others. 

Core Principles of Material Design

Material is the metaphor Unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink.
Bold, graphic, intentional Based on print design principles, the use of imagery guide visuals, do more than just please the eye.  They create hierarchy, meaning and focus.
Motion provides meaning

Motion respects and reinforces the user as the prime mover.  Primary user actions are inflection points that initiate motion, transforming the whole design.

 

 

 

 

 

 

 

 

Using Material Design guidelines in web projects is extremely easy.  By using these guidelines, you will create uniformity throughout your site, which will lead to a much better user experience.  Creating sites that are both aesthetically pleasing and intuitive for the user is always the goal of any web project and with Material Design this becomes natural.   Also, this technology is being pushed aggressively from Google.  It is implementing the design principles to all Android applications and hopes this becomes a standard throughout the web.  Using Material Design principles, will help your website appear more modern and in-line with current trends.

Material Design

Design guidelines for creating modern, responsive websites.

Material Design Lite Implementation of material design philosophy.
BEM (Block, Element and Modifier) Naming convention used in Material Design lite.

 

 

 

 

 

Material Design Lite or MDL lets you implement Material Design principles and does not rely on any JavaScript frameworks. Getting started is easy, you can either download the files from (https://getmdl.io/started/index.html)  or use the files hosted on their CDN.  Here is an example:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.light_blue-green.min.css">

<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>

 

You can also pick a color scheme for your site.  You will notice on the second line the CSS file is called  /material.light_blue-green.min.css.  You can pick a primary (light_blue) color and accent (green) color that will be used throughout the site.  MDL allows you to customize the color scheme by going to https://getmdl.io/customize/index.html and previewing the different schemes.

 

Now that the files are downloaded we can look at an example of a button.  Buttons have several different display types like flat (default), raised, fab (floating action button), mini-fab and icon. Material Design Lite loosely uses the naming convention set by the BEM principles to construct components, this can apply to almost any HTML element.  There are examples where MDL does not follow all of the BEM suggestions.  We will get into more detail about BEM (Block, Element, Modifier Naming Convention) soon.  When constructing a button, you use the standard HTML button tag (<button>), but add one or more MDL classes to the class attribute.  These classes are separated by spaces.  You start with the basic mdl-button class, then add additional classes to get the effect you are looking for.    

Here’s an example of a HTML button tag:

<button class="mdl-button   mdl-js-button   mdl-button--raised   mdl-js-ripple-effect mdl-button--accent">Button</button>

Here is the result:

 

 

Breakdown of some of the class attributes:

Attributes

 
mdl-button Attribute included with all buttons   *Required
mdl-js-button Assigns basic MDL behavior to button   *Required
mdl-button-raised Adds shadows to buttons edges
mdl-js-ripple-effect Displays ripple effect when button is clicked
mdl-button-primary Added primary color to button
mdl-button-accent Adds accent color to button
mdl-button-fab Fab effect
mdl-button-icon Rounded icon

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BEM Methodology

The BEM (https://en.bem.info/methodology/) methodology which stands for Block, Element, Modifier was developed by Yandex to help develop websites faster and in a way to that promotes reuse through naming conventions.  It’s based on creating components for the user interface that are extendable, reusable and easy to determine their functionality, by their names.

 

Block

The BEM methodology begins with Blocks that are an independent page components that are reusable.  They are defined by their class name or block name which should describe their purpose like “page-header” or “menu-options”.  Blocks should be self-contained and not affect any surrounding elements, but they can be nested to allow for more complex components.  HTML tags like <form> and <div> are generally used for block components, since they can contain other elements.

<div class=”page-header” > </div>

 

Element

An element is a composite part of a block that cannot be used separately from its block.  The elements name should describe its purpose like text or input.  Its full name should follow the format of “block-name”__”element-name”, this includes a double underscore between the block and element names.  Elements can be nested inside each other, but it is always part of a block not another element.  It’s important to remember that elements are dependent on their block, not other elements.

<div class = ”page-header” >

   <label class = ”page-header__label” />

 </div>

 

Modifier

An entity that defines the appearance, state, or behavior of a block or element.  A modifier’s name should describe its appearance like “_large” or “_small”, or it’s state like “_disabled” or “_hidden”, or it’s behavior like “_legend”.  The modifiers name is separated from the block or element by a single underscore.  You can also add the value of the modifier to its name, when that is important.  For example, class = “block_button_disabled” or class = “block_input_visible”.

Here is an example:

<!—filter-items is a block and has 2 modifiers: one that describes size and the other that describes focus   -->

<div class = ”filter-items   filter-items_size-large  filter-items_focused>

 

<!--  Element within block, don’t forget the double underscore  -->

<input class = “filter-items__input” />

 

<!—Another element within a block that also has a modifier   -->

<button class = “filter-items__button     filter-items__button_visible”> Filter </button>

</div>

 

Using the BEM Methodology, can be extremely useful since it allows users to reuse code throughout a project.  It reduces complexity since you build upon small blocks of code and it allows you to reduce copying and pasting since they are shared throughout a project.  Also, by following the naming conversion of the classes, you self-document the blocks, elements and modifiers.  It also allows new team members to quickly get up to speed since the naming conversion is logical.

Throughout the next few months we will be continuing our exploration of Material Design.  Here are some of the topics we plan to cover.

  • Setting up the layout of a site using navigation, grids, tabs and footers.
  • Building forms with buttons, text fields and toggles.
  • Building a content page with cards, badges, lists and tables.

ITS Email Newsletter Archive

© 2018 IT Solutions Consulting, Inc. All rights reserved. Privacy Statement
IT Solutions
Top