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.
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.
Now I will explain how to use materialize framework in websites.
Materialize provides classes to provide those colors to font and background.
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.
<!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>
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.
Here I explain different types of Cards.
1) Basic Card
2) Images In Cards
In this example, I have explained an image card with a Floating Action Button.
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.
Here I explained different types of forms elements.
Checkbox And Radio-buttons
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.
Text-input And Icon-prifix
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.
For more components, you can refer this site Materialized framework.
The fashion designer for mobile and web view