Showing posts with label Materialize Tutorial. Show all posts

Tuesday, March 7, 2017

Materialize - Overview

What is Materialize?

Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

How to Use Materialize?

There are two ways to use Materialize:

Local Installation - You can download the materialize.min.css and materialize.min.js files on your local machine and include it in your HTML code.
CDN Based Version - You can include the materialize.min.css and materialize.min.js files into your HTML code directly from the Content Delivery Network (CDN).

Materialize - Colors

Materialize supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.

red
pink
purple
deep-purple
indigo

Materialize - Grids

Materialize provides a 12 column fluid responsive grid.
It uses the row and col style classes to define rows and columns respectively.

S.N.	Class Name & Description
1	row Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.

Materialize - Helpers

Materialize has several utility classes which are very useful for day-to-day designing needs.

Color utility classes - Examples: .red, .green, .grey and so on
Alignment utility classes - Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right

Materialize - Media

Materialize has several classes to make images and video responsive to different sizes.

responsive-img - It makes an image to resize itself based on screen size.
video-container - For responsive container having embedded videos
responsive-video - To make HTML5 videos responsive.

Materialize - Shadows

Materialize has several special classes to display containers as paper-like cards with shadow.

S.N.	Class Name & Description
1	z-depth-0 Remove the shadow of elements having z-depth by default.
2	z-depth-1 Styles a container for any HTML content with 1px bordered shadow. Adds z-depth of 1.

Materialize - Tables

Materialize can be used to display different types of tables using various styles over table.

S.N.	Class Name & Description
1	None Represents a basic table without any border.
2	stripped Displays a stripped table.
3	bordered

Materialize - Typography

Materialize uses Roboto 2.0 as standard font. It can be overriden using following CSS style:

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Following are the examples of headings, blockquotes and free-flow but responsive text.

Example

materialize_typography.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
      <h2>Typography Demo</h2>
   <hr/>
   <h3>Headings</h3>
      <div class="card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>
   <h3>Block Quotes</h3>
      <div class="card-panel">
         <blockquote>
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </blockquote>
      </div>
   <h3>Responsive free-flow text</h3>
      <div class="card-panel">
          <p class="flow-text">
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </p>
      </div>    
   </body>
</html>

Result

Verify the result.

Typography Demo

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Quotes

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Responsive free-flow text

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Materialize - Badges

An Materialize badge component is a onscreen notification which can be a number or icon. It is generally used to emphasize the number of items.

S.N.	Class Name & Description
1	badge Identifies element as an MDL badge component. Required for span element.
2	new Adding a "new" class to a badge component gives it a background.

Following are the examples of using badges in different ways.

Materialize - Buttons

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the buttons. The below table mentions the available classes and their effects.

Materialize - BreadCrumb

The Materialize provides various CSS classes to create a nice breadcrumb in easy way. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	nav-wrapper Set the nav component as breadcrumb/nav bar wrapper.

Materialize - Cards

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of cards. The below table mentions the available classes and their effects.

Materialize - Chips

The Materialize provides a special component called Chip which can be used to represent small set of information for example, a contact, tags etc.

S.N.	Class Name & Description
1	chip Set the div container as chip.

Materialize - Collections

The Materialize provides a special classes to represent various types of collections where a collection represents group of related information items.

S.N.	Class Name & Description
1	collection Set the div or ul container as collection.
2	collection-item

Materialize - Footer