Skip to content

CSS Framework Materialize

Jump to bottom Edit New page
Quincy Larson edited this page Aug 20, 2016 · 1 revision

CSS Framework Materialize

Materialize is a Responsive CSS framework based on Google's Material Design Language.

Getting Started

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Materialize Template</title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection"/>
  </head>
  <body>
    <h1>Hello World</h1>
    <!-- Add all HTML Code here -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  </body>
</html>

We have used a CDN in this example, but you can checkout other ways of installing Materialize here.

Learning Resources

  • The official documentation for Materialize is available here.
  • Checkout Materialize's open source GitHub repository here.
  • Here is a handy tutorial on using Materialize.

Learn to code and help nonprofits. Join our open source community in 15 seconds at http://freecodecamp.com

Follow our Medium blog
Follow Quincy on Quora
Follow us on Twitter
Like us on Facebook

And be sure to click the "Star" button in the upper right of this page.

New to Free Code Camp?

JS Concepts

JS Language Reference

Other Links

Clone this wiki locally