-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
62 lines (52 loc) · 3.01 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mobiStyle</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,500|Electrolize' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/grid.css" />
<link rel="stylesheet" href="css/mobi.css" />
</head>
<body>
<img id="mg-imgBG" src="img/Avenger-blur.png" />
<div id="mg-scanlineBG"></div>
<img id="mg-gridBG" src="img/new-dot.png" alt="" />
<div id="mg-dotBG"></div>
<div id="mg-wrapper">
<div class="container">
<div class="mainContent">
<div class="mg-panel">
<h1>mobiStyle HTML Style Guide</h1>
<p>This is a guide to using the mobiStyle HTML styles. The mobiStyle style does not contain any css for columns or layout. Therefore, it should work in concert with Foundation, Bootstrap, or whatever custom framework you choose. The mg class names are all prefixed with <code>mg-</code> so they should remain fairly unique and not interfere with your frameworks.</p>
<p>This guide is also not responsive. That's not the point of mobiStyle. mS is purely here to recreate the effects seen in the mobiGlas design docs presented by RSI/CIG.</p>
<p><small>Note: This guide DOES use some custom styles for layout. They are <strong>not</strong> a part of the mobiStyle, so ignore them when trying to integrate mobiStyle into your project</small></p>
<h2>Loading mobiStyle</h2>
<p>Just load <code>jquery.mobistyle-min.js</code> at the end of your body, and call <code>$(document).mobiStyle();</code>. That's it! If you want SVG animations for your buttons, be sure to load <a href="http://snapsvg.io/">Snap.svg</a>.</p>
<p>If there are features you don't want to use, you may pick and choose from the javascript files, and only load the ones you want. Or, you can ditch the js altogether, and just use the css! It's up to you!</p>
</div>
<p><small>mobiGlas and all related elements are property of Cloud Imperium Games and Roberts Space Industries Corp. Special thanks to <a href="reddit.com/u/AlterEcho_bhvr">/u/AlterEcho_bhvr</a> and his comrades at Behavior Interactive for the awesome work they've done making mobiGlas a reality!</small></p>
</div>
<div class="mg-sidebar">
<div class="mg-panel">
<h3>Nav</h3>
<ul>
<li class="active"><b>Home</b></li>
<li><a href="text.html">Text & Typography</a></li>
<li><a href="links.html">Links & Navigation</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="lists.html">Lists & Tables</a></li>
<li><a href="forms.html">Forms & Input</a></li>
<li><a href="messages.html">Messages & Notifications</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="scripts/min/jquery.mobiStyle-min.js"></script>
<script>
$(document).mobiStyle();
</script>
</body>
</html>