-
Notifications
You must be signed in to change notification settings - Fork 2
/
Materialize.html
85 lines (66 loc) · 3.14 KB
/
Materialize.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- MATERIALIZE CSS - Front-End Framework - by Beumsk -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Materialize CSS</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!-- Google icon font -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"><!-- Latest compiled and minified CSS -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!--provides a responsive fixed width container-->
<h1>Container</h1>
</div>
<div class="container">
<h4>Grid System</h4>
<div class="row"><!--sum of row must always be equal to 12-->
<div class="col s12 m4">s12 m4</div><!--size = s (phone<=600px) < m (tablet>600px) < l (desktop>=992px) < xl (large desktop) -->
<div class="col s12 m4">s12 m4</div>
<div class="col s12 m4">s12 m4</div>
</div>
<div class="row">
<div class="col s12 ">s12</div>
<div class="col s6 offset-s6">offset 6 and s6</div><!--offset creates a gap col before actual col-->
</div>
<div class="row">
<div class="col s7 push-s5">col s7 push-s5</div><!-- push and pull to change order -->
<div class="col s5 pull-s7">col s5 pull-s7</div>
</div>
<div class="hide"></div><!-- div hidden; hide-on-large-only -->
<div class="show-on-small"></div><!-- div only shown for small; show-on-medium-and-down -->
<div class="valign-wrapper"><h1>Vertically aligned h1</h1></div>
<div class="right"></div><!-- quick float; left works too -->
<h4>Typography</h4>
<p class="left-align">left align</p><!-- also right-align; .center-align -->
<p class="flow-text">fully responsive text</p><!-- the font-size will adapt to the device and the container -->
<p class="truncate">too long text you want to truncate because your container is too short for it</p>
<blockquote>quotation with dedicated deisgn</blockquote>
<h4>Colors</h4>
<div class="teal lighten-2"><!-- background color of lighten teal -->
<p class="blue-grey-text text-lighten-5"></p><!-- text color of lighten blue grey -->
</div>
<h4>Shadows</h4>
<p class="z-depth-0"></p><!-- no shadow -->
<p class="z-depth-5"></p><!-- biggest shadow -->
<p class="hoverable"></p><!-- adds shadows on hover -->
<h4>Table</h4>
<table class="striped highlight bordered centered responsive-table">
<tr>
<td>1</td>
<td>4</td>
<td>9</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--jQuery library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script><!--Latest compiled JavaScript-->
</body>
</html>