Getting Started - Materialize PDF

Uploaded by

Rira Zulkhisti

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

253 views1 page

Getting Started - Materialize PDF

Uploaded by

Rira Zulkhisti

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 1

Getting Started

1.0.0

Learn how to easily start using Limited time offer: Get 10

Materialize in your website.

free Adobe Stock images.
Search  ads via Carbon

About

Getting Started

CSS Thanks for Downloading!

Components Download
We hope you find Materialize useful in your next project. We would appreciate if
Setup
JavaScript you helped us spread the word about Materialize on our Social Media. Also if
Templates
you want to support the development, you can donate to us.
Forms Third-party Options
Star 35,514 Follow @Materialize
DONATE NOW Sass
Mobile

Showcase

Themes updated

Setup
Project Structure
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.

language-markup

HTML Setup
Next you just have to make sure you link the files properly in your webpage.
Generally it is wise to import javascript files at the end of the body to reduce
page load time. Follow the example below on how to import Materialize into
your webpage.

language-markup

<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/icon?family=Material+

<link type="text/css" rel="stylesheet" href="css/materialize.m

<body>

Templates
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 Template Parallax Template

This is the simplest starter page with a This is the simplest starter page with a
Header, Call-to-Action, and Icon Header, Call-to-Action, and Icon
Features. Features.

DEMO  DOWNLOAD  DEMO  DOWNLOAD 

Third-party Options
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.

Ruby Gem
See here for documentation on this gem.

language-bash

gem 'materialize-sass'

Meteor Package
language-bash

meteor add materialize:materialize

Ember Package
language-bash

# install via npm

$ npm install ember-cli-materialize --save-dev
# make ember-cli fetch internal dependencies
$ ember g ember-cli-materialize

Sass Setup
This section is only relevant if you chose to download the Sass version of
Materialize.

Compiling Sass
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.

language-markup

Help Materialize Grow Join the Discussion Connect

We hope you have enjoyed using We have a Gitter chat room set up where Star 35,514
Materialize and if you feel like it has helped you can talk directly with us. Come in and
Follow @MaterializeCSS 13.5K followers
you out and want to support the team you discuss new features, future goals, general
can help us by donating or backing us on problems or questions, or anything else
Patreon. Any amount would help support you can think of.
and continue development on this project
and is greatly appreciated. CHAT

SUPPORT US

Patreon Sponsors