forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
180 lines (163 loc) · 8.67 KB
/
Copy pathindex.html
File metadata and controls
180 lines (163 loc) · 8.67 KB
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="product" content="Metro UI CSS Framework">
<meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">
<meta name="description" content="Simple responsive css framework">
<meta name="keywords" content="Metro, ui, responsive, css, framework, library">
<link rel="stylesheet" href="css/metro-bootstrap.css">
<link rel="stylesheet" href="css/docs.css">
<link href="js/prettify/prettify.css" rel="stylesheet">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/prettify/prettify.js"></script>
<script src="js/load-metro.js"></script>
<script src="js/docs.js"></script>
<script src="js/github.info.js"></script>
<title>Metro UI CSS - Bootstrap CSS library</title>
</head>
<body class="metro">
<header class="bg-dark" data-load="header.html"></header>
<div class="grid container">
<div class="row">
<div class="span8 bg-white">
<div class="padding20 introduce bg-amber">
<h1 class="ntm fg-white">Metro UI CSS 2.0</h1>
<p class="fg-white">Metro UI CSS a set of styles to create a site with an interface similar to Windows 8. This set of styles was developed as a self-contained solution.</p>
<p class="fg-white item-title">Metro UI CSS is open source project with MIT licensing model.</p>
</div>
</div>
<div class="span4">
<div class="row no-margin">
<div class="span4">
<a href="https://github.com/olton/Metro-UI-CSS/archive/master.zip"
class="span4 padding20 subheader text-center fg-white introduce_r download_link">Download
<span class="icon-download-2"></span>
</a>
</div>
</div>
<div class="row">
<div class="span4 pos-rel">
<a href="https://www.nuget.org/packages/Metro.UI.CSS/" class="tertiary-text fg-yellow" style="position: absolute; top: 5px; right: 5px;">NuGet</a>
<div class="item-title bg-lightBlue fg-white padding20" style="height: 75px; padding-top: 30px">
PM> Install-Package Metro.UI.CSS
</div>
</div>
</div>
</div>
</div>
<div class="row border-top">
<div class="span12 padding20 bg-grayLighter">
<div class="place-right subheader-secondary clearfix" style="height: 75px">
<span class="icon-IE on-left-more"></span>
<span class="icon-chrome on-left-more"></span>
<span class="icon-firefox on-left-more"></span>
<span class="icon-opera on-left-more"></span>
<span class="icon-safari"></span>
</div>
<h2 class="ntm">Quick start</h2>
<p>
To use the Metro UI CSS, you have to follow the 5 simple rules:
</p>
<ol>
<li>Create page with HTML5 DOCTYPE</li>
<li>Include in head <code>metro-bootstrap.css</code></li>
<li>For plugins usage: include in head jquery core, jquery widget factory and metro plugins</li>
<li>Create container for Metro UI CSS component with class <code>.metro</code></li>
<li>Use markup for components, as described in the pages of this site</li>
</ol>
<pre class="prettyprint linenums" style="">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/metro/metro-*.js"></script>
</head>
<body class="metro">
</body>
</html>
</pre>
</div>
</div>
</div>
<div class="bg-steel">
<div class="container padding20 fg-white">
<div class="carousel bg-transparent no-overflow" id="carousel2">
<div class="slide" style="display: block; left: 0;">
<div class="place-right">
<img src="http://modernui.org.ua/images/css-logo.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">Developed with advice</h2>
<p class="fg-white">Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.</p>
<p class="fg-white">Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.</p>
</div>
<div class="slide" style="left: 0; display: none;">
<div class="place-right padding20 ntp nrp nbp">
<img src="http://modernui.org.ua/images/bizspark_b_2.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">BizSpark Startup</h2>
<p class="fg-white">Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.</p>
<p class="fg-white">BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.</p>
<a class="button small1 inverse" href="http://bizspark.com">Join the BizSpark Program now.</a>
</div>
<div class="slide" style="left: 0; display: none;">
<div class="place-right">
<img src="http://modernui.org.ua/images/phpstorm_7_eap.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">Thanks to JetBrains</h2>
<p class="fg-white">Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.</p>
<a class="button small1 inverse" href="http://www.jetbrains.com/phpstorm/">Get PhpStorm now!</a>
</div>
</div>
<script>
$(function(){
$("#carousel2").carousel({
height: 210,
period: 5000,
duration: 1000,
effect: 'fade',
markers: {
show: false
}
});
})
</script>
</div>
</div>
<div class="bg-dark">
<div class="container">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span8 padding20 nlp">
<img src="http://metroui.net/images/spface.jpg" alt="" class="polaroid span3 place-left" style="margin-top: 10px"/>
<div style="margin-left: 240px;">
<h3 class="fg-white">About author</h3>
<p class="fg-white">Hi! My name Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.</p>
</div>
</div>
<div class="span3 padding20 nrp">
<ul class="unstyled">
<li><a class="button danger span3 margin5" href="http://bizspark.com">Microsoft BizSpark</a></li>
<li><a class="button success span3 margin5" href="http://jetbrains.com">JetBrains</a></li>
<li><a class="button info span3 margin5" href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
<li><a class="button warning span3 margin5" href="http://lesscss.org">{ Less }</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark no-margin">
<div class="container tertiary-text bg-dark fg-white">
2012-2013, Metro UI CSS © by <a href="mailto:sergey@pimenov.com.ua" class="fg-yellow">Sergey Pimenov</a>
</div>
</footer>
<script src="js/hitua.js"></script>
</body>
</html>