-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
237 lines (215 loc) · 9.34 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
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE HTML>
<html class="responsive">
<head>
<title>xtyle</title>
<meta charset="utf-8">
<meta name="robots" content="all">
<meta name="description" content="Project Description">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
<!-- <link rel="apple-touch-icon" href="touch-icon-iphone-precomposed.png"> -->
<!-- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-precomposed.png"> -->
<!-- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4-precomposed.png"> -->
<!-- <link rel="alternate" type="application/rss+xml" title="" href=""> -->
<link href="xtyle/img/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="xtyle/css/xtyle.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body style="background-color: #f5f5f5;">
<div style="background-image:url('/assets/img/bg2.png'); background-size: 960px; background-position: top center; height: 310px;" class="bg green">
<div class="layout-fixed-center center padding2x" style="padding-top: 80px;">
<h1 class="white color">xtyle</h1>
<h2 class="white color lighter">Minimalistic framework to<br>kickstart your projects</h2>
</div>
</div>
<nav class="carbon bg">
<div class="layout-fixed-center white color">
<span class="menu"><i class="icon-menu"></i></span>
<a href="#typography">Typography</a>
<a href="#">Forms</a>
<a href="#">Grid</a>
<a href="#">Themes</a>
<a href="#">JavaScript</a>
<a href="#">Examples</a>
</div>
</nav>
<div class="layout-fixed-center padding-bottom2x">
<div class="grid">
<div class="grid1">
<div>
<!-- TYPOGRAPHY -->
<a id="typography"></a>
<h3>Typography</h3>
<!-- COLORS -->
<a id="typography-color"></a>
<h4 class="silver color">Colors</h4>
<p>
Xtyle comes with an exclusive set of colors that can be used in your projects. Color classes are <code>.yellow</code>, <code>.red</code>, <code>.blue</code>, <code>.green</code>, <code>.carbon</code>, <code>.silver</code>, <code>.white</code>, and <code>.black</code>. You can also use the following <a href="http://www.w3schools.com/html/html_colors.asp" target="_blank">hexadecimal notation</a> codes directly on your HTML files.
</p>
<div class="center">
<div class="grid1">
<div><h3 class="lighter">Primary Colors</h3></div>
</div>
<div class="grid3 carbon light bg border-radius-top-left">
<div class="margin-none">.carbon.light<br>#526270</div>
</div>
<div class="grid3 carbon bg">
<div class="margin-none">.carbon<br>#526270</div>
</div>
<div class="grid3 carbon dark bg border-radius-top-right">
<div class="margin-none">.carbon.dark<br>#42525e</div>
</div>
<div class="grid3 silver light bg">
<div class="margin-none">.silver.light<br>#cccccc</div>
</div>
<div class="grid3 silver bg">
<div class="margin-none">.silver<br>#cccccc</div>
</div>
<div class="grid3 silver dark bg">
<div class="margin-none">.silver.dark<br>#b5b6b6</div>
</div>
<div class="grid2 white bg border-radius-bottom-left">
<div class="margin-none">.white<br>#ffffff</div>
</div>
<div class="grid2 black bg border-radius-bottom-right">
<div class="margin-none">.black<br>#000000</div>
</div>
<div class="grid1">
<div><h3 class="lighter">Secondary Colors</h3></div>
</div>
<div class="grid3 yellow light bg border-radius-top-left">
<div class="margin-none">.yellow.light<br>#ffd35b</div>
</div>
<div class="grid3 yellow bg">
<div class="margin-none">.yellow<br>#efc660</div>
</div>
<div class="grid3 yellow dark bg border-radius-top-right">
<div class="margin-none">.yellow.dark<br>#efc660</div>
</div>
<div class="grid3 red light bg">
<div class="margin-none">.red.light<br>#ed6a5b</div>
</div>
<div class="grid3 red bg">
<div class="margin-none">.red<br>#ed6a5b</div>
</div>
<div class="grid3 red dark active bg">
<div class="margin-none">.red.dark<br>#df6051</div>
</div>
<div class="grid3 blue light bg">
<div class="margin-none">.blue.light<br>#41b4e6</div>
</div>
<div class="grid3 blue bg">
<div class="margin-none">.blue<br>#41b4e6</div>
</div>
<div class="grid3 blue dark bg">
<div class="margin-none">.blue.dark<br>#37a4d1</div>
</div>
<div class="grid3 green light bg border-radius-bottom-left">
<div class="margin-none">.green.light<br>#20bba6</div>
</div>
<div class="grid3 green bg">
<div class="margin-none">.green<br>#20bba6</div>
</div>
<div class="grid3 green dark bg border-radius-bottom-right">
<div class="margin-none">.green.dark<br>#1ba996</div>
</div>
</div>
</div>
</div>
<div class="grid1">
<div class="margin-bottom-none padding-bottom-none">
<!-- FONT -->
<h4 class="silver color">Font</h4>
<p>
Xtyle uses the excellent <a href="http://developer.android.com/design/style/typography.html" target="_blank">Google's Roboto</a> font as its default font. You can change this option at any time on top of the <code>xtyle.css</code> file.
</p>
<div class="center">
<div class="grid4">
<div class="bg white border-radius">
<h1 class="lighter">Thin</h1>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius">
<h1 class="normal">Regular</h1>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius">
<h1>Bold</h1>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius">
<h1 class="normal"><i>Italic</i></h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid1">
<div class="margin-bottom-none padding-bottom-none">
<!-- TEXT COLOR -->
<h4 class="silver color">Text-color</h4>
<p>
To change text color you just need to include one of the <a href="#typography-color">color classes</a> in addition to the <b>reserved class name</b> <code>.color</code>. For example, if you want your paragraph with color <code>green</code>, you would write something like the following:
</p>
<div class="grid4">
<div class="bg white border-radius-top margin-bottom-none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bg carbon light border-radius-bottom margin-bottom margin-top-none">
<div class="padding-none">
<p>...</p>
</div>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius-top margin-bottom-none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bg carbon light border-radius-bottom margin-bottom margin-top-none">
<div class="padding-none">
<p>...</p>
</div>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius-top margin-bottom-none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bg carbon light border-radius-bottom margin-bottom margin-top-none">
<div class="padding-none">
<p>...</p>
</div>
</div>
</div>
<div class="grid4">
<div class="bg white border-radius-top margin-bottom-none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bg carbon light border-radius-bottom margin-bottom margin-top-none">
<div class="padding-none">
<p>...</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid1">
<div class="margin-bottom-none padding-bottom-none">
<!-- BACKGROUND COLOR -->
<h4 class="silver color">Background-color</h4>
<p>
background-color
</p>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/xtyle/js/xtyle.js"></script>
</body>
</html>