-
Notifications
You must be signed in to change notification settings - Fork 10
/
get-started.html
144 lines (116 loc) · 5.17 KB
/
get-started.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
132
133
134
135
136
137
138
139
140
141
142
143
144
styles/min/main.min.css<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Framaterial - Get started</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#03a9f4"/>
<link rel="stylesheet" href="styles/main.min.css">
<link rel="stylesheet" href="styles/prism.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="material-design-layout">
<div class="material-navigation-left-lightblue-fixed">
<div class="navigation-inner">
<div class="navigation-content">
<a href="#" class="icon-menu" data-toggle="sidebar"><span class="m-icon md-navigation-menu"></span></a>
<a href="index.html" class="brand-logo">Framaterial</a>
</div>
<ul class="navigation-side">
<li><span class="m-tooltip-bottom" data-tooltip-content="Only 100Kb"><a href="#" class="material-btn-float-red-master" id="download" ><span class="m-icon md-file-file-download"></span></a></span></li>
</ul>
</div>
</div>
<nav class="material-sidebar-left-out-lightblue" data-state="open">
<header data-image-url="images/header.png">
</header>
<ul>
<li><a href="get-started.html" class="material-btn-flat-white"> Get started</a></li>
<li><a href="components.html" class="material-btn-flat-white"> Components</a></li>
<li><a href="javascript.html" class="material-btn-flat-white"> Javascript</a></li>
<li><a href="#about" data-btn-type="toggle" class="material-btn-flat-white"> About</a></li>
</ul>
<span class="divider"></span>
<ul>
<li><a href="examples/index.html" class="material-btn-flat-white"> <span class="m-icon md-image-collections left"></span> Examples</a></li>
<li><a href="templates.html" class="material-btn-flat-white"> <span class="m-icon md-av-web left"></span> templates</a></li>
<li><a href="https://github.com/Framaterial/framaterial" class="material-btn-flat-white"> <span class="m-icon md-hardware-keyboard left"></span> source code</a></li>
<li><a href="http://twitter.com/framaterial" class="material-btn-flat-white"> <span class="m-icon md-social-share left"></span> Follow</a></li>
</ul>
</nav>
<div class="material-container">
<div class="panel bit-1">
<div class="panel-body">
<h2>Getting Started</h2>
<section>
<p>Learn how to easily install and use Framaterial in your projects.</p>
</section>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<h3>Download</h3>
<div>
<p>Start to download the .ZIP archive of the project</p>
<a href="framaterial.zip" class="material-btn-lightblue"><span class="icon-download"></span> Framaterial.zip</a>
<p>Once you've downloaded the file, uncompress it, you'll see what a Framaterial project looks like : </p>
<pre><code class="language-css">MyFramaterialProject/
|
|_ scripts/
| |
| |framaterial.js
| |framaterial.min.js
|
|_styles/
| |
| |framaterial.css
| |framaterial.min.css
|
index.html</code></pre>
</div>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<h3>Template</h3>
<div>
<p>Now, you can start working, here is a base template to create Framaterial powered website & apps</p>
<pre><code class="language-markup"><html>
<head>
<!--Import Framaterial.css-->
<link type="text/css" rel="stylesheet" href="styles/framaterial.min.css" />
</head>
<!-- The 'material-design' class will be added
by the framaterial.js script, so it's not required -->
<body class="material-design">
<!-- All your framaterial goodness here ... -->
<!--Import jQuery before Framaterial.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="scripts/framaterial.min.js"></script>
</body>
</html></code></pre>
</div>
</div>
</div>
</div>
<div class="footer">
<p>- Made with <span class="m-icon-red md-action-favorite-outline"></span> by a gitch -</p>
</div>
</div>
</div>
<!-- endbower -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/framaterial.js" async></script>
<script src="scripts/main.js"></script>
<script src="scripts/prism.min.js"></script>
<!-- endbuild -->
</body>
</html>