Hi Friends, Today i will tell you about learn responsive material design basics for creating website. This is a new google design css which includes some classes to create your website very easily.
What is Material Design ?
Material Design is a design language which is developed by google for creating light weight user friendly website. Material Design CSS is following grid-based layouts, responsive animations and transitions, margins, colors. padding and depth effects with lighting and shadows.
For More information about Website Design you can click below:
Pure CSS Button With Lightening Glowing and Shining Effect
Create Expand Collapse Sliding Menu Using jQuery
Background Color Change Automatically Using Jquery
How to add smart slider Facebook Like Box Pop-up
Learn Ajax For Beginners In Hindi
33 New Awesome Features in CSS3 and CSS4
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners
How to use material Design classes in your website?
You have to add two lines in the head section and your webpage is ready for using material design css and js.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
Why Material Design is best for our new website?
Some useful facts about material design
1) Colors: For colors you have to use name of the color and lighten or darken class (ranges 1-5)
<div class="red lighten-3"></div> <div class="blue darken-5"></div>
2) Grid System: You have to use col (column) class and device friendly classes (s12 m6 l6). You can create maximum 12 columns
<div class="row"> <div class="col s12 m8 l8"> Your content </div> <div class="col s12 m4 l4"> Your content </div> </div>
3) Helper Classes: For aligning the content you can use helper classes like.hide, .hide-on-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up, .hide-on-large-only.valign-wrapper, .left-align, .right-align and .center-align
4) Media: For responsive image and video you can use .responsive-img or .responsive-video classes.
5) Shadow: You can use shadow classes like z-depth-1 or z-depth-5 (ranges 1-5)
6) Table: Better user interface of table with responsive design. you can use the class like .bordered, .striped, .highlight, .centered, .responsive-table etc.
7) Typography: Material design is using Roboto 2.0 font but you can use any font as per your website. For better seeing the text you can use .flow-text class
8) Badges: Use the .badge or .new-badge class for using the badge in the material design
9) Buttons: Create a button with a wave effect (.waves-effect) and enhance the website user experience.
10) Cards: You can create different types of cards for designing your website. You have to uses .cards, .card-content, .card-title, .card-action, .card-image, .card-panel classes for making a cards in your website.
11) Form validation: For form input fields validation you can simply use the .validate class.
12) Icons: You can use 740 Material Design icons in your website very easily. For this you have to add some code in your website.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
After that you have to use
<i class="large material-icons">contacts</i>
13) Menu bar: You have to use .nav-wrapper , .navbar-fixed, .dropdown-content, .brand-logo classes for making a menu bar in a simple way.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design