Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.
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!
We have created some starter templates so you can easily start designing your website with minimal setup up time. Browse through our collection and download your best fit.
Starter TemplateThis is the simplest starter page with a Header, Call-to-Action, and Icon Features. View Demo Download
Parallax TemplateThis is the simplest starter page with a Header, Call-to-Action, and Icon Features. View Demo Download
There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date.
See here for documentation on this gem.
meteor add materialize:materialize
# install via npm $ npm install ember-cli-materialize --save-dev # make ember-cli fetch internal dependencies $ ember g ember-cli-materialize
This section is only relevant if you chose to download the Sass version of Materialize.
Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.
MyWebsite/ |--css/ | |--materialize.css <-- compiled from scss/materialize.scss | |--fonts/ | |--roboto/ | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html