Skip to content

Instantly share code, notes, and snippets.

@IanSmith89

IanSmith89/index.html

Last active October 28, 2019 16:10
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save IanSmith89/85c0daf464545cfa44c1cfa67f5d094a to your computer and use it in GitHub Desktop.
Save IanSmith89/85c0daf464545cfa44c1cfa67f5d094a to your computer and use it in GitHub Desktop.
Download ZIP
Materialize Cheatsheet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Materialize It!</title>
// Google Material Icons
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
// Google Material CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<h1>Materialize Cheatsheet</h1>
<div class="divider"></div>
<h3>Grid System</h3>
<div class="row">
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
<div class="col s1 red lighten-1 grey-text text-lighten-5">1/12</div>
</div>
<div class="row">
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
</div>
<div class="row">
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
</div>
<div class="row">
<div class="col s4 indigo lighten-1 grey-text text-lighten-5">1/3</div>
<div class="col s4 indigo lighten-1 grey-text text-lighten-5">1/3</div>
<div class="col s4 indigo lighten-1 grey-text text-lighten-5">1/3</div>
</div>
<div class="row">
<div class="col s6 light-blue lighten-1 grey-text text-lighten-5">1/2</div>
<div class="col s6 light-blue lighten-1 grey-text text-lighten-5">1/2</div>
</div>
<div class="row">
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
<div class="col s9 teal lighten-1 grey-text text-lighten-5">3/4</div>
</div>
<div class="row">
<div class="col s8 light-green lighten-1 grey-text text-lighten-5">2/3</div>
<div class="col s4 indigo lighten-1 grey-text text-lighten-5">1/3</div>
</div>
<div class="row">
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
<div class="col s6 light-blue lighten-1 grey-text text-lighten-5">1/2</div>
<div class="col s3 purple lighten-1 grey-text text-lighten-5">1/4</div>
</div>
<div class="row">
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
<div class="col s8 light-green lighten-1 grey-text text-lighten-5">2/3</div>
<div class="col s2 pink lighten-1 grey-text text-lighten-5">1/6</div>
</div>
<div class="divider"></div>
<h3>Responsive Grids</h3>
<div class="row">
<div class="col s12"><p>s12</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
<div class="col s12 m4 l8"><p>s12 m4</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
</div>
<div class="row">
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
<div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
</div>
<div class="divider"></div>
<div class="valign-wrapper">
<h5 class="valign center-align">This should be vertically aligned</h5>
</div>
<div class="card-panel hoverable"> Hoverable Card Panel</div>
<div class="divider"></div>
<table class="striped centered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<div class="divider"></div>
<ul class="collection">
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
</ul>
<div class="divider"></div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</div>
<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>
// jQuery
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
// Google Material js
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
</body>
</html>
Raw
style.css
.col {
text-align: center;
border: 1px solid white;
height: 50px;
}
.valign-wrapper {
height: 400px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment