15th May 2018
Material Design
What is Material Design?
Material Design is a design language developed by Google in 2014. It brings a cleaner design and consistent look to mobile apps and Web pages across different platforms, using bold and colorful graphics.
It is a combination of the classic principles of good design with the addition and possibility of technology and science.
Other competitive design languages are metro design, flat design, realism design etc. It differs from them on the basics of color schemes, patterns, textures, shapes or layouts.
Materialize, MUI, Surface, Material Foundation, Material Design Lite and Material Components for the Web these all are the popular material design CSS frameworks.
In this tutorial, I will explain Materialize CSS Frameworks.
What is Materialize?
Materialize is a modern responsive front-end framework based on Material Design.
The difference between Materialize, Bootstrap, and Foundation is that Materialize is based on Google’s Material Design language whereas bootstrap and foundation are based on the mobile first design language and flat design language, respectively.
Setting up the basic Materialize Templates
You can download Materialize CSS and JS files from the here
After that, you create the index.html and css/style.css file and create an images folder.
CSS > materialize.min.css > style.cssJS >materialize.min.jsimages/In index.html I have import CSS and JS files. You can use the below code.
index.html
<html>
<head>
<title>Materialize CSS Framework Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- for Icons -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- custom css -->
</head>
<body>
<!-- jQuery is required by Materialize to function -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript">
//custom JS code
</script>
</body>
</html>
Now I will explain how to use materialize framework in websites.
1.Materialize Color
Materialize provides classes to provide those colors to font and background.
Example:
See the Pen odyJXg by Janki Gandhi (@jankiatyantik03) on CodePen.dark
For more classes of colors and background-colors you can refer the below link.
2. Materialize Grid
Materialize uses the standard 12 column fluid responsive grid system.
.s , .m and .l classes are used to define the width of columns for small, medium, and large screens.
Example:
<!DOCTYPE html>
<div class="row">
<div class="red lighten-1 col s12 m6 l3"> 1 </div>
<div class="red lighten-2 col s12 m6 l3"> 2 </div>
<div class="red lighten-3 col s12 m6 l3"> 3 </div>
<div class="red lighten-4 col s12 m6 l3"> 4 </div>
</div>
Result:
Large Device:
Medium-device:
Small-device:
3. Materialize Buttons
Here I explain different types of the buttons.
Raised Button: It is a standard button that signifies actions and seeks to give depth to a mostly flat page.
Large Buttons: .btn-large class is using in button has a larger height for buttons.
Small Buttons: .btn-small class is using in button has a smaller height for buttons.
Floating Button: It is a meant for very important functions.
Flat Button: It is usually used within elements that already have depth like cards or modals
Submit Button: When you use a button to submit a form, instead of using an input tag, use a button tag with a type submit
Disabled Buttons: A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.
Example:
See the Pen RyJEpo by Janki Gandhi (@jankiatyantik03) on CodePen.0
4.Cards
Here I explain different types of Cards.
1) Basic Card
Example:
See the Pen rvKobN by Janki Gandhi (@jankiatyantik03) on CodePen.dark
2) Images In Cards
In this example, I have explained an image card with a Floating Action Button.
Example:
See the Pen aGYzGW by Janki Gandhi (@jankiatyantik03) on CodePen.dark
3) Card Sticky
Here you can add a card that reveals more information once clicked. You can make your card-action always visible by adding the class to .sticky-action the overall card and the div .card-reveal with a span class .card-title inside to make this work. Add the class t0 .activator an element inside the card to allow it to open the card reveal.
Example:
See the Pen OZvPVw by Janki Gandhi (@jankiatyantik03) on CodePen.0
5.Forms
Here I explained different types of forms elements.
Checkbox And Radio-buttons
Example:
See the Pen JvZxdE by Janki Gandhi (@jankiatyantik03) on CodePen.0
Chips And Switches
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
Switches are special checkboxes used for binary states such as on / off.
Example:
See the Pen aGKXYw by Janki Gandhi (@jankiatyantik03) on CodePen.0
Text-input And Icon-prifix
Icon-prefix
You can add an icon prefix to make the form input label even more clear. Just add an icon to the class .prefix before the input and label.
Example:
See the Pen mLKvvv by Janki Gandhi (@jankiatyantik03) on CodePen.0
For more components, you can refer this site Materialized framework.