Trusted answers to developer questions
What is material design in CSS?
According to the official website; “Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.”
Google created with these design guidelines to ensure that all its products have a consistent user interface, and to share its knowledge in the domain of user experience design.
Principles of material design
- Using realistic shadows and lighting to convey the hierarchy of elements on the screen.
- Using bold colors to make elements more appealing.
- Incorporating feedback. For instance, animating a button to convey that it was pressed, and including a confirmation message to show that an action was performed.
Materialize CSS is a framework based on Google’s material design.
Setting up materialize:
In order to set up materialize, the following code can be copy and pasted into your application.
<!DOCTYPE html><html><head><!--Import Google Icon Font--><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!--Import materialize.css--><!-- Compiled and minified CSS from a content delivery network --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><!--Let browser know website is optimized for mobile--><meta name="viewport" content="width=device-width, initial-scale=1.0"/></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script></body></html>
Using materialize
The following code shows how easy it is to style elements using materialize:
RELATED TAGS
css
material design
Copyright ©2024 Educative, Inc. All rights reserved
TRENDING TOPICS
Did you find this helpful?