SKJ Blog

Menu

Categories

css Javascript
.
back to css articles

Getting Started with Materialize CSS

• Shallom Kyle Jacinto

April 21st 2021 • 1 minute read

In this article, we will setup our website with materialize css, a material design based on google material guidelines.

HTML Setup

Create a file and open it in your favorite IDE, create your own structure of html codes or you can copy this html codes below.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

  </body>
</html>

Materialize CDN

To install materialize to our website, copy this cdn links. For css, put it inside on the head tag, and for js put it before the body tag end.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

For icon, we use google material icons, put it inside your head tag...

<!--Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Note! If you use a component like side nav or with js related, then you need to use jquery.js as it is required by materialize css.

For navigation bar you can go here for more. You can copy my demo codes below.

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">My material design web</a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li"><a href="home.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
</nav>

For adding an active link, just type a class of active.

<li class="active"><a href="home.html">Home</a></li>

And we should get like this ...

Content

So i just added a card inside our content, copy the codes below or you can create with your own base on material docs.

<div class="container"> 
  <div class="card">
    <div class="card-content">
      <span class="card-title">Card Title</span>
      <p>I am a very simple card. I am good at containing small bits of information.
      I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-action">
      <a href="#">Read more</a>
    </div>
  </div>
</div>

For creating a footer content, go here and follow the guide.

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
    © 2014 Copyright Text
    <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

For more documentation and materialize components, click this link

css materialize
 
Previous page Designing a Form with Tailwind CSS