Materialize CSS – Framework based on Material Design
Materialize CSS is the visual web language in the form of a framework that uses Google’s material design to create a meaningful and beautiful user experience.
Since Google created and released Material Design, designers and developers started exploring and using it. Material design can characterized as a design language which combines the classic principles of design with innovation. The main idea is to develop a unified design that will work great across all Google products on any platform.
Principles of Material Design
– Material is the metaphor
The material metaphor is characterized by the correlation between space and motion. The material itself is inspired by the study of paper and ink and it is used to promote innovation, creativity and imagination. Surfaces and edges of the material enhance user experience. The flexibility of the material creates usability and visual clues. The key fundamentals of light, surface and motion convey the interaction, movement and existance of the objects in space and their relation with each other.
– Bold, graphic, intentional
The basic principles and elements of graphic (print-based) design such as grid, space, colour, typography, scale are used to guide visual treatments. All the elements are used to provide meaning by creating hierarchy and focus. Deliberate choices in typography, colour and imagery create a graphic interface that engages user in the experience.
– Motion provides meaning
Motion is meaningful, it is used to create focus to the user without interruptions as the continuity and progression of the experience is the key factor. Transitions are efficient and the feedback is subtle.
About Materialize CSS
It was a matter of time a Material Design Framework to be created. Materialize CSS is such framework created by a team of four students from Carnegie Mellon University. A passion for design, usability and user experience has driven these young people to create a material design structure to work with.
How to use it
Materialize comes in two different forms – standard and SASS. You can select the one you would like to use depending on your experise.
Sass version – This version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option.
Click here for more information about the setup.
There are two templates to help you get started without the need to setup anything. You can download them to give it a try.
A standard 12 column fluid responsive grid system is used. The grid will help you out to create an ordered layout. The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content.
Click here for more information about the grid
Materialize CSS is probably the first framework that has that extensive colour options. All the colors, shades and tints from the Material Design palette are included with the corresponding classes so it is very easy to select and use the desired one.
All the components from Google Material design are here – forms, buttons, cards, badges, icons, preloaders, navbars etc. Have a look to see what this framework can offer.
If you are curious about what can be done with Materialize CSS, check out the showcase.