Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Google Material Design Lite

This article shows the new framework of components: Google Material Design Lite, a ML shed for Android, but focused on web universe.

Imagine the following scenario: each time a new system needs to be created, the team is divided into steps such as defining the initial architecture (client and server side), database selection, servers (network, file, database, FTP, etc.), among others. But perhaps one of the steps that always generate a certain headache is the definition of the layout/system design. Depending on the company/project/team that we're working, it can be given in several ways:

  • The designer (who do not necessarily need to have knowledge of jQuery, JavaScript, or frameworks components, such as Bootstrap, for example) needs to do all the work creating static screens to customer's initial approval as well as HTML/CSS to offer to developers;
  • Developers fall into this task and work closely with the designer to "marry" the settings;
  • The team even makes use of the designer (except for images, the basics) and treats itself to use some library ready for this purpose.

This is a very flexible process, and indeed, it better be. This ensures that the union of several opinions and experiences define what is best for the final design. However, suppose you are creating your own design, or your team is very small and does not have the resources to hire a designer. What is the first step you would take to the definition of a design that meets the increasingly demanding expectations of its users (responsive design, living components, beautiful design, easy to use, etc.)? Some probably think of copying the design of a foreign page, or perhaps hire a freelance to do just the design. Among the various options at hand, the most appropriate to the present day is undoubtedly the use of some library of ready components.

A framework of this type already has everything we need: a number of ready-made components ranging from buttons, navigation bars, menus, forms, lists, tables, even entire pages and templates as the contact page of a site, or even a shopping cart.

Variables such as online learning, simplicity, file size, amount of available resources, and supported browsers and especially price, are listed in that step of the layout lifecycle. Starting from a more realistic point of view, we could use Bootstrap. It is flexible, meets all the requirements we've just read, is free, has a huge and excellent support from the community, is open source and is owned by none other than Twitter. Yes, Bootstrap is a great option. However, recently, we had the launch of a new component framework that promises to innovate the web market, mainly because it is a standard adopted by another giant of Silicon Valley, Google. This is Google Material Design, we use to define good design practices in layouts for mobile applications on Android. The success with this new platform was so great that Google redesigned to adapt to all kinds of existing device, from smartphones, tablets, TVs, watches and smart glasses, and now even to the web.

The originaland finalspecification was launched in mid-2014, with the goal of providing all the instructions for a good and beautiful design for all devices, regardless of manufacturer. For versions that make use of simple HTML, CSS and JavaScript, we call Material Design Lite (MDL), a more appropriate terminology considering the environments where they will perform. Among the many advantages of it, there is its lightness (lite) with a maximum size of 27KB (on gzip mode) of source code, in addition to his few external dependencies. In Links section we find the URL for the official project page.

In this article we will try to present the main features of this new framework, with some practical examples close to the reality of web applications (involving an encoding apparatus, not only design).

Architecture details

If we take a closer look at the framework we see that, in fact, it is a complementary implementation of Paper elements project, a subproject of Polymer framework that already makes use of the MaterialDesignconcepts for building rich web interfaces, with interactive elements, transitions, effects, etc. This means that we can integrate MDL with Polymer easily and take advantage of its components to create designs quickly and responsively.

Most of the components we use in other platforms is available on MDL also from tooltips, many form fields, spinners, to aresponsivegrid characteristic of this type of layout.

In addition to being supported by all the latest browsers (Chrome, Firefox, Opera, Edge, etc.), MDL sources are written in Sass using BEM (contraction for Block, Element, Modifier), it is a methodology that aims to increase speed and productivity in the development in general. Their acronyms mean:

  • Block: an independent logical and functional component, the equivalent of a component on the famous Web Components. A blockencapsulates behavior (via JavaScript), templates, styles (CSS) and other implementing technologies. The concept of independence is used to facilitate the reuse of structures, as well as facilitate the development of the project and the support process to it. In Figure 1 we see a simple model of how these blocks are adjusted relative to each other; for example, a header block (head) may have a logo included, a search form and anauthorizationinternal block (user login);
  • Element: is a constituent part of a block which can not be used outside of the same. For example, a menu item can not be used outside the context of a menu, so it is an element.
  • Modifier: BEM is an entity that defines the appearance and behavior of a block or element. They are similar to HTML attributes, in essence. The same block looks different in relation to another when you use a modifier.

Figure 1. Example of blocks structure in BEM.

Get to work

As we have seen, there is not much to discuss about the internal architecture of the framework. Everything was done to simplify our work. The easiest way to work with MDL is to reference the dependency files via CDN (Content Delivery Network), but we can also download the files physically via project on GitHub (see Links section) or import via npm (Node.js dependency manager) or even with Bower. There is also the option to build our own template using the Theme Customizer tool, which pre-built CSS and provides it compressed into a zip. Let's see how to use each of the following options.

Let us begin by Theme Customizer, which does not require any dependencies at installer level. Access your URL via Links section and, on the page that opens, we will see a palette with some colors, two numbers around them and a download button in the middle, as shown in Figure 2. The themes generated are represented by two base colors: the number 1 represents the primary color of the template, it will appear in most of the components; number 2 represents the secondary color that will appear on items such as suspended buttons, tooltips, etc. Beside the palette we found a simple sample page that changes as we select different colors. In addition, the palette is also prepared to disallow many contrasting colors that could be wrongly selected, so this way you will always have matching templates. Take a test: after selecting the two colors you will see the preview of theme changing, just as we have in Figure 3.

Figure 2. Colors palette of Theme Customizer.

Figure 3. Example of preview screen with theme changed by the palette.

When finished customizing, just click the center button of download and a file of name material.min.css will be generated with the appropriate settings. Or if you prefer, you can import the file directly from Google CDN, since they keep a reference to each crossing of possible colors that are selected. For our example, the code would be as follows:

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.brown-pink.min.css" />

Now that we learnt how to use the Palette, we will do the same import from a build environment. For this, we need to have Node.js installed on the machine, because from it and the npm we can make the necessary downloads. We will not show the steps for it here to not lose focus, but on the official Node.js website you can find the download link as well as the instructions to install it.

Create a folder on a path of your own in order to save the project files. Open the cmd (or the equivalent in the operating system you are using) and navigate to this directory:

cd D:\tests\materials-design-mrbool

Then, run the following command via npm:

npm install material-design-lite --save

We obtain in response the MDL version installed (1.0.5) and a new folder will be created: node_modules, where we will have the subdirectory "material-design-lite" created too. In it we find multiple files, in which the only ones that interest us are those contained in the subfolder dist (distribution). Furthermore, we find the normal and minified versions (we will use the min in the end of the filename because the content is reduced and, thus, more performatory for web pages). If you have installed Bower (you can install via npm too), just run the following command:

bower install material-design-lite --save

The same procedure will be done, except for the name of the folder (bower_components) and the generated subfolders. To simplify the use of such files, do the following: create two new folders in the root of the project, css and js, to save the CSS and JavaScript files, respectively. Then, copy the material.min.css and material.min.js files to them as they will be the ones we need to work with MDL.

After that, also create a new index.html file and add the contents of Listing 1 to it. We will look then.

Listing 1. Contents of index.html file: Hello World MDL.

<html>
  <head>
   <meta charset="utf-8">
    <link rel="stylesheet" href="css/material.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>Hello World MDL!</title>
  </head>
  <body style='padding: 40px'>
    <!-- Accent-colored raised button with ripple -->
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
      A Button
    </button>
   <br><br>
    <!-- Colored FAB button -->
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
      <i class="material-icons">add</i>
    </button>
  </body>
  <script src="js/material.min.js"></script>
</html>

At the beginning of the list, we realize that we are using the <meta> tag, depending on whether it is a page in English, so this setting is necessary for not having encoding problem on it. In line 4, we import the CSS file of MDL, and then (line 6) we import the Material Icons font, this is important for us to display the icons without the need for images. This is another one of the benefits of MDL, we do not need to manage that lot of icons, or create a single image and map out locations to display them. The icons in the Material Design are actually letters in a font created especially for this. For example, on line 17 we create an Add button, those used to create a new task or add something new in a mobile form. The term "add" is what matches the + symbol to the font in question, linked to their CSS classes, of course.

We also created a button at the beginning of the implementation to show how this structure looks in the framework. To test, save the file and open it in the browser, as shown in Figure 4.

Figure 4. Hello World with MDL.

Clicking on the first button you can note that a clicked effect is applied to it. This is possible through the CSS class "mdl-js-ripple-effect" that set this feature to the elements. And the class "mdl-button--raised", for example, is responsible for giving the background color of the button, if you remove it you will see only the text. The same goes for "mdl-button--colored" in the second button which in turn remove the color, but will keep the default color: the silvery white. Do the tests and see for yourself.

MDL also makes use of a specific text font for the designs, it is the Roboto, it's it who gives the closest characteristics of Android apps. To add in our example, add the following line of code within the head tag:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>

Now go to the browser and reload the page. The result will be the same as in Figure 5.

Figure 5.Screen representation with Roboto font.

If you want to use the theme that we customized above, just replace the CSS file and configure the switch to what we have below:

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

The MDL Grid

The object layout in MDL is one of the most important because that is where we define the main navigation, footer, and the main Grid. This feature makes use of Flexbox, a feature of CSS3 that allows to have the screen components rearranged in order to embrace the different types of screen in which it appears. This is very handy, particularly by no longer need to make extensive use of float to the elements float next to each other, and allow them to align freely in the scope in which they are inserted.

In the end, the Grid component is nothing but columns, specifically 12 columns to the "desktop"mode, 8 columns to the "tablet" mode (<= 800px) and 4 columns to the "smartphone" mode (< = 500px).

To create it, we start with an empty div, and two appropriate CSS classes:

<div class="content-grid mdl-grid">
   <!-- grid aqui -->
</div>

The "mdl-grid" class works as a row (line), as we have in Bootstrap, for example. However, it frees us of standard sizes, letting us more flexible to specify not the size, but the maximum size of this structure. Then, create a style tag within head of our page and add the following content:

.content-grid {
       max-width: 950px; 
}

This will not be enough to display anything different of what we already have visually, because we need to create the columns of the content. For this, add new divs of "mdl-cell" class with some content inside. Modify the content of the main div as we see in Listing 2.

Listing 2. Content of the MDL Grid.

<div class="content-grid mdl-grid">
  <div class="mdl-cell">
      Content 1... Content 1... Content 1... Content 1... Content 1... Content 1...
  </div>
  <div class="mdl-cell">
     Content 2... Content 2... Content 2... Content 2... Content 2... Content 2...
  </div>
  <div class="mdl-cell">
     Content 3... Content 3... Content 3... Content 3... Content 3... Content 3... 
  </div>
  <button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">A Button</button>
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
       <i class="material-icons">add</i>
  </button>
</div>

Note that we included in addition to the column divs, other two button components to see how MDL associates any framework structures as likely to be aligned in columns. The result can be seen in Figure 6.

Figure 6. Example of basic grid: three columns.

If you wish, you can also set up their grids based on the size of each column. Simply add to the same div a second CSS class with the md-cell-{number}-colformat, where number must be a value between 1 and 12. See inListing 3the code we need for this and in Figure 7 the result thereof. See that we put different values on each one for us to see the end result.

Listing 3. Code for divs with fixed sizes in the Grid.

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">
      Content 1... Content 1... Content 1... Content 1... Content 1... Content 1...
  </div>
  <div class="mdl-cell mdl-cell--4-col">
     Content 2... Content 2... Content 2... Content 2... Content 2... Content 2...
  </div>
  <div class="mdl-cell mdl-cell--2-col">
     Content 3... Content 3... Content 3... Content 3... Content 3... Content 3... 
  </div>
  <button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">A Button</button>
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
       <i class="material-icons">add</i>
  </button>
</div>

Figure 7. Example of basic grid with three columns and preset sizes.

You can also set these properties for the three basic environments of Grid: desktop, tablet and phone. Just remember the maximum dimensions of columns that each one take and apply the CSS class. See in Listing 4how our example would look like in a tablet. The result can be seen in Figure 8.

Listing 4. Sample Grid for tablet.

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--1-col-tablet">
      Content 1... Content 1... Content 1... Content 1... Content 1... Content 1...
  </div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">
     Content 2... Content 2... Content 2... Content 2... Content 2... Content 2...
  </div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--5-col-tablet">
     Content 3... Content 3... Content 3... Content 3... Content 3... Content 3... 
  </div>
  <button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">A Button</button>
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
       <i class="material-icons">add</i>
  </button>
</div>

Figure 8. Example of basic grid of three columns with predefined sizes for tablet.

To test in your browser, simply reduce the screen size up to the standard tablet size. The same can be done for mobile devices, simply add the class "mdl-cell-{number}-col-phone" to the div where number is the number of columns in a total of four.

MDL also offers a number of CSS classes that we can use to utility functions, like to hide the div when it is displayed on a particular screen size, or to align some elements differently:

  • mdl-cell--hide-desktop: hide the column in the desktop display mode (> 840px);
  • mdl-cell--hide-tablet: hide in tablet mode (> 480px and <= 840px);
  • mdl-cell--hide-phone: hide in phone mode (<480px);
  • mdl-cell--stretch: extends the column to fill all the parent element, in this case, the mdl-grid;
  • mdl-cell--top: aligns the column in the parent element top;
  • mdl-cell--bottom: aligns the column in the parent element base.

The bar/menu navigation

Like most web applications today, create a navigation header common to all other pages is essential. For this, we need to learn some other CSS classes of the framework that we will see later. Let's also create a new HTML page to avoid mixing with the previous one, so to finish the header we can include new elements in the body of it.

Therefore, create a new page called header.html and add the contents of Listing 5 to it.

Listing 5.Header page for navigation and menus.

<html>
  <head>
     <meta charset="utf-8">
    <link rel="stylesheet" href="css/material.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
     <title>Header MDL</title>
  </head>
  <body>
     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
       <header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
             <div class="mdl-layout__header-row">
                    <span class="mdl-layout-title">MDL MrBool</span>
                    <div class="mdl-layout-spacer"></div>
                    <nav class="mdl-navigation mdl-layout--large-screen-only">
                           <a class="mdl-navigation__link" href="">About</a>
                           <a class="mdl-navigation__link" href="">Clients</a>
                           <a class="mdl-navigation__link" href="">Blog</a>
                           <a class="mdl-navigation__link" href="">Contact</a>
                    </nav>
             </div>
       </header>
       <div class="mdl-layout__drawer">
             <span class="mdl-layout-title">Menu</span>
             <nav class="mdl-navigation">
                    <a class="mdl-navigation__link" href="">About</a>
                    <a class="mdl-navigation__link" href="">Clients</a>
                    <a class="mdl-navigation__link" href="">Blog</a>
                    <a class="mdl-navigation__link" href="">Contact</a>
             </nav>
       </div>
       <main class="mdl-layout__content">
             <div class="page-content">
                    <!-- Content Here -->
             </div>
       </main>
     </div>
  </body>
  <script src="js/material.min.js"></script>
</html>

Note that there are two main elements in this list: the first is the navigation bar, represented by the component <header> that will result in the fixed and responsive bar at the top of the page with the menu options represented by a <nav> element of "mdl-navigation" class and having each menu item as a link of "mdl-navigation__link " class; the second element is the side panel that will float on the left page and is automatically opened by MFL when a click is made on the header button. The class "mdl-layout__drawer" provides this feature as this is the name commonly given to this type of structure: Navigation Drawer. Finally, we also have the div class "mdl-layout__content" which will contain the page body content.

Before testing, we also need to override some CSS properties, since the naked and raw template is not very elegant visually. So to exalt the power of the framework, do the modifications to get as close to the site of MrBool, with the colors it uses there. Create a new file header.css in css folder and add the contents of Listing 6 to it. Most attributes are overwritten to change the colors to the new format, and we can feel free to our own ones. The result can be seen in Figure 9.

Listing 6.File with CSS in the MrBool website model.

html>body {
	font-family: 'Roboto','Helvetica','Arial',sans-serif!important
}
.mdl-layout__drawer-button {
	height: 38px;
	margin: 20px 12px;
}
@media screen and (max-width: 1024px) {
	.mdl-layout__header .mdl-layout__drawer-button {
		margin: 15px;
	}
}
header.custom-header {
  background: #e54d26;
}
.mdl-layout__header-row span.mdl-layout-title {
  color: white;
  text-transform: uppercase;
}
.custom-header .material-icons {
  color: #fff;
}
.custom-header a.mdl-navigation__link {
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}
.custom-header a.mdl-navigation__link:hover {
  color: #302F31;
}
.mdl-layout__drawer span.mdl-layout-title {
  background: #302F31;
  color: white;
}
.mdl-layout__drawer a.mdl-navigation__link {
  color: #eee;
  font-weight: 700;
  font-size: 14px;
}
.mdl-layout__drawer a.mdl-navigation__link:hover {
  color: #000;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  color: white;
}
.mdl-layout__drawer {
  background: #302F31;
}


/* Classes dos menus de seção*/
.demo-menu.demo-menu__top-right .container {
	position: relative;
	width: 100%;
}
.demo-menu.demo-menu__top-right .bar {
	box-sizing: border-box;
	position: relative;
	background: #e54d26;
	color: white;
	height: 64px;
	width: 100%;
	padding: 16px;
}
.demo-menu.demo-menu__top-right .wrapper {
	box-sizing: border-box;
	position: absolute;
	right: 16px;
}


.mdl-layout__content {
	margin: 0 auto;
}


.page-content {
	padding: 20px;
}

Figure 9. Final result of the navigation header.

In MDL there is also another type of menu we can use for faster actions and specific to certain pages, such as context menus. In the mobile world they are known to appear after the click in a round button with three vertical dots or when we press for a time certain component. On Android, they appear in ActionBars on the left top as conventional menus.

To implement it on our website, we will draw them on the basis, evicting them to occupy the upper space that already belongs to the header. To this, add the lines of code present in Listing 7 after the <main> tag and before closing the body.

Listing 7. HTML referring to the context menu.

<div class="snippet-demo">
  <div class="snippet-demo-container demo-menu demo-menu__top-right">
	<div class="container mdl-shadow--2dp">
	  <div class="bar">
		<div class="wrapper">
			<!-- Right aligned menu on top of button  -->
			<button id="opcoes_extra" class="mdl-button mdl-js-button mdl-button--icon">
			  <i class="material-icons">more_vert</i>
			</button>


			<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" for="opcoes_extra">
			  <li class="mdl-menu__item">Last Messages</li>
			  <li class="mdl-menu__item">Filter</li>
			  <li disabled class="mdl-menu__item">Remove Account</li>
			  <li class="mdl-menu__item">Logout</li>
			</ul>
		</div>
	  </div>
	</div>
  </div>
</div>

Note that the first divs and their classes serve only to create a fixed bar at the base of the page, as we did with the top. Inside the "wrapper" class div is where the magic happens: just create a component <button> of "mdl-button - icon" class and add the icon inside, in case for the three vertical dots, we use the word "more_vert" (if you want the same horizontally, substitute for "more_horiz"). This same button also needs an id so that we can associate it to the attribute forof the list that we'll create immediately afterwards. This is how MDL knows who owns that menu. The rest of the construction of the menu does not bring anything new.

Before testing, also add the CSS lines in Listing 8 at the end of the header.css file so that the menu style fits what we are creating. The result can be seen in Figure 10.

Listing 8. CSS to adapt context footer.

.demo-menu.demo-menu__top-right .container {
	position: relative;
	width: 100%;
}
.demo-menu.demo-menu__top-right .bar {
	box-sizing: border-box;
	position: relative;
	background: #e54d26;
	color: white;
	height: 64px;
	width: 100%;
	padding: 16px;
}
.demo-menu.demo-menu__top-right .wrapper {
	box-sizing: border-box;
	position: absolute;
	right: 16px;
}


.mdl-layout__content {
	margin: 0 auto;
}


.page-content {
	padding: 20px;
}

Figure 10.Template page with context menu inserted (phone mode).

See that one element appears disabled, this because we marked it with the HTML attribute disabled, which automatically provides this feature.

And to finish our template, let's add the famous research box at the top of the template. Simply include the code in Listing 9 after the first <nav> header.

Listing 9. Code to include research box next to the menu.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
	<label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
					  <i class="material-icons">search</i>
					</label>
	<div class="mdl-textfield__expandable-holder">
		<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp" />
	</div>
</div>

This will be enough to create the icon, display it in a responsive manner, that is, when in phone mode does not hide the same, and when we click it, a text box opens with an effect, pushing other components for the side (Figure 11).

Figure 11. Inclusion of research box.

Once the template is ready (header + footer), now we need to put something on our page body and see how it behaves. Then we will work with two new components that have not quoted here: forms and tables. By default, the form fields in MDL are align next to each other. For this reason it is interesting that the reader always bear in mind that the framework will not do 100% of the work, which means they often have to put their hands dirty and overwrite/create some CSS. Let's start with HTML then add the content in Listing 10inside the div of "page-content".

Listing 10. MDL Table example.

<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
	<input class="mdl-textfield__input" type="text" id="name" />
	<label class="mdl-textfield__label" for="name">Name...</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield">
	<input class="mdl-textfield__input" type="text" id="phone" />
	<label class="mdl-textfield__label" for="phone">Phone...</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield">
	<input class="mdl-textfield__input" type="text" id="address" />
	<label class="mdl-textfield__label" for="address">Address...</label>
  </div>
</form>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Send</button>
<br><br>
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style='width: 100%'>
  <thead>
	<tr>
	  <th class="mdl-data-table__cell--non-numeric">Name</th>
	  <th>Phone</th>
	  <th class="mdl-data-table__cell--non-numeric">Address</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td class="mdl-data-table__cell--non-numeric">Mary</td>
	  <td>89898989</td>
	  <td class="mdl-data-table__cell--non-numeric">Test Street</td>
	</tr>
	<tr>
	  <td class="mdl-data-table__cell--non-numeric">Mary</td>
	  <td>89898989</td>
	  <td class="mdl-data-table__cell--non-numeric">Test Street</td>
	</tr>
	<tr>
	  <td class="mdl-data-table__cell--non-numeric">Mary</td>
	  <td>89898989</td>
	  <td class="mdl-data-table__cell--non-numeric">Test Street</td>
	</tr>
  </tbody>
</table>

To create form components simply use the usual HTML tags for this by adding the respective CSS classes of MDL. Note that for each field, we also create a label that will act actually as a placeholder of the same, with the attribute forset to the id of each field.

Next, we create a common field (as we have seen) and, soon after, a table to display the results. The same works with th/tr scope for header and lines, respectively. Note that we need to stipulate whether each column is numeric type or not, that because such a definition influences the alignment of values within the table. This is possible through class "mdl-data-table__cell - non-numeric" if nothing is specified, the column is taken as numerical automatically. See also that we set a fixed style width with 100% of value in the table so that it fills the space available on the width of the parent page, otherwise we would have it rather small, occupying only the space required.

We also need to include some CSS rules only to align the fields in the center of the page. To this, add the lines in Listing 11 at the end of header.css file. See the results in Figure 12.

Listing 11. CSS to align fields in the center of the page.

.mdl-layout__content {
   margin: 0 auto; 
}
.page-content { 
   padding: 20px; 
}

Figure 12. Example of body with form and table.

Conclusion

These were only some of the possibilities of using this framework. As we have seen, it is very easy to use components and cross them with each other or integrate them into the external libraries. Throughout the article we made use of jQuery, Bootstrap and many others can be added.

It is also important to note that MDL is not a complete solution, meaning that for the purposes of the project it can not adapt better compared to others, since the project is still fairly recent and some components are missing, mainly related to the forms. Until then keep testing and analyzing them. Good studies!

Links

Official website of the CDM

http://getmdl.io/

Theme Customizer page

http://www.getmdl.io/customize/index.html

CDM project on GitHub

https://github.com/google/material-design-lite



Fabrí­cio Galdino is a software expert and has worked with IT analysis and business development for more than five years. It has extensive experience with testing, back and front-end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login