This repository has been archived by the owner on Apr 9, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
setup.html
131 lines (94 loc) · 5.33 KB
/
setup.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html>
<head>
<title>Material Design</title>
<link rel="shortcut icon" type="image/png" href="assets/img/icon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1a73e8">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="google-site-verification" content="RztsuMYH3TliyEUwDzRIHY75KoIKGc1dqRQ0gVTSiFo" />
<meta name="description" content="Material '18 - Setup">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/material.min.css" />
<link rel="stylesheet" href="assets/css/waves.min.css" />
<script src="assets/js/waves.min.js"></script>
<script src="assets/js/material.min.js"></script>
</head>
<body>
<nav>
<a id="menuTrigger" class="waves-effect waves-blue menu-trigger"><i class="material-icons menu">menu</i><i class="material-icons close">close</i></a>
<h1><img src="assets/img/icon.png" /> Material '18</h1>
</nav>
<div id="sidenav" class="sidenav waves-white">
<a href="index.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">home</i></span><span>Home</span></a>
<a href="setup.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">build</i></span><span>Setup the library</span></a>
<a href="buttons.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">dashboard</i></span><span>Buttons</span></a>
<a href="text-inputs.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">text_format</i></span><span>Text inputs</span></a>
<a href="other-inputs.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">adjust</i></span><span>Other inputs</span></a>
<a href="modals.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">computer</i></span><span>Modals</span></a>
<a href="headers.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">vertical_align_top</i></span><span>Headers</span></a>
<a href="toasts.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">info</i></span><span>Toasts</span></a>
<a href="icons.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">extension</i></span><span>Icons</span></a>
<a href="loaders.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">cached</i></span><span>Loaders</span></a>
<a href="cards.html" class="waves-effect waves-light-blue"><span class="sidenav-icon"><i class="material-icons">check_box_outline_blank</i></span><span>Cards</span></a>
</div>
<div id="main" class="main">
<div class="qna">
<h1 class="title">Setup material design</h1>
<p>
Go through the steps of installing Material '18 library.
<ol>
<li>To set up Material '18, you first have to download the library, from <a href="https://github.com/MartonDev/Material-Design-18/releases" target="_blank">here</a>. Keep in mind, we only support the latest release of Material '18!</li>
<li>After you downloaded it, extract it to your project folder. The project structure will look like this: <br /><textarea class="code" style="height: 300px" readonly>MyProject/
|--assets/
| |--css/
| | |--fonts/
| | | |--ProductSans.css
| | | |--ProductSans.woff2
| | |
| | |--material.min.css
| | |--waves.min.css
| |
| |--img/
| | |--icon.png
| |
| |--js/
| |--material.min.js
| |--waves.min.js
|
|--index.html
|--setup.html
|--buttons.html
|--text-inputs.html
|--other-inputs.html
|--modals.html
|--headers.html
|--toasts.html
|--icons.html
|--loaders.html
|--collapsing-header-demo.html
|--cards.html
|--LICENSE
|--README.md</textarea></li>
<li>Now you have Material '18 installed. You can now use it 2 ways. You can use the default layout (used by the index.html file) or you can create a brand new file and include the css and js libraries.</li>
</ol>
</p>
<h1 class="title">Credits</h1>
<p>Libraries used:
<ul>
<li>Waves.js (<a href="http://fian.my.id/Waves/" target="_blank">official site</a>)</li>
<li>jQuery (<a href="https://jquery.com/" target="_blank">official site</a>)</li>
<li>Material Icons (<a href="https://fonts.google.com/" target="_blank">official site</a>)</li>
<li>Google Fonts (<a href="https://fonts.google.com/" target="_blank">official site</a>)</li>
</ul>
</p>
</div>
<footer>
<h1 class="title">Material '18</h1>
<h1>A library for the Material Design 2018 edition</h1>
<iframe src="https://ghbtns.com/github-btn.html?user=MartonDev&repo=Material-Design-18&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<h1 class="author">Made with ♥ by <a href="https://martondev.github.io" target="_blank">Marton</a></h1>
</footer>
</div>
</body>
</html>