An open-sourced, modern, responsive front-end framework based on Material Design
materializecss
Its official website materializecss.com describes it as:
A modern responsive front-end framework based on Material Design.
This is an open-source framework under the MIT license. Its official git repository is hosted on Github.
The framework is maintained by a team of four students from Carnegie Mellon University. For more about them, visit http://materializecss.com/about.html#team.
The site has a beautiful section named Showcase where various websites/apps, which use this as a frontend framework, are listed which caters for other developers with a real-world example and inspiration.
Getting started guide
Getting Started is basically a learning guide - how to easily start using Materialize in one's website.
Inbuilt JavaScript plugins
- Collapsible
- Dialogs
- Dropdown
- Media
- Modals
- Parallax
- Pushpin
- ScrollFire
- ScrollSPy
- SideNav
- Tabs
- Transitions
- Waves
How can I compile my Sass
This section is only relevant if you work with the Sass version of Materialize.
First, you need to install Sass in your working directory:
gem install sass
When you have Sass installed on your project and you want to update your output .css file, you need to use the following command:
sass sass/materialize.scss public/style.css
NOTE: the second parameter sass/materialize.scss is the path to your .scss file, and the last parameter sass/style.css is the path to your output folder when the file .css file is located.
If you want to avoid this command every time when you do a change, you can run a watch command:
sass --watch sass/sass:public/stylesheets
NOTE: this command watches all Sass files in the SCSS directory for changes and then update the style file into our public directory.
Social Links
What is Material Design
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.
Principles of Material Design
Material is the metaphor - The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.
Bold, graphic, intentional - Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users.
Motion provides meaning - Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.
