Materialize - An Introduction to the CSS Framework

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>
      <!--Import Google Icon Font-->
      <link href="" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <h1>Hello World!</h1>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src=""></script>
      <script src=""></script>

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.