A modern responsive front-end framework based on Material Design
Materialize simplifies life for developers and the users they serve.
Speeds up development
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
Easy to work with
We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
Learn how to easily start using Materialize in your website.
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.
You can find all the versions of the CDN at cdnjs.
npm install materialize-css
bower install materialize
After downloading, extract the files into the directory where your website is located. Your directory will look something like this.
You’ll notice that there are two sets of the files. The
min means that the file is “compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.
MyWebsite/ |--css/ | |--materialize.css | |--fonts/ | |--roboto/ | |--js/ | |--materialize.js | |--index.html
One last thing to note is that you have to import jQuery before importing materialize.js!