-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
304 lines (302 loc) · 16.5 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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Design documentation for Brickimedia">
<meta name="author" content="the Brickimedia Developers">
<meta name="keywords" content="design, draft, docs, documentation, brickimedia">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="shortcut icon" href="/docs/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/docs/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/docs/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/docs/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/docs/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/docs/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/docs/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/docs/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/docs/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/docs/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/docs/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/docs/favicon/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/docs/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/docs/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/docs/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/docs/favicon/manifest.json">
<link rel="mask-icon" href="/docs/faviconsafari-pinned-tab.svg" color="#00a1ff">
<link rel="shortcut icon" href="/docs/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Brickimedia Design">
<meta name="application-name" content="Brickimedia Design">
<meta name="msapplication-TileColor" content="#00a1ff">
<meta name="msapplication-TileImage" content="/docs/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/docs/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<title>Brickimedia Design</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,700,400italic" >
<link rel="stylesheet" type="text/css" href="docs/prism-syntaxhighlighter/prism.css" />
<link rel="stylesheet/less" type="text/css" href="docs/designdraft.less">
<link rel="stylesheet/less" type="text/css" href="src/variables/colour-palette.less">
<link rel="stylesheet/less" type="text/css" href="src/variables/mixins.less">
<link rel="stylesheet/less" type="text/css" href="src/variables/variables.less">
<link rel="stylesheet/less" type="text/css" href="src/breadcrumbs/brick-ui.breadcrumbs.less">
<link rel="stylesheet/less" type="text/css" href="src/buttons/brick-ui.buttons.less">
<link rel="stylesheet/less" type="text/css" href="src/dividers/brick-ui.dividers.less">
<link rel="stylesheet/less" type="text/css" href="src/forms/input/brick-ui.inputs.less">
<link rel="stylesheet/less" type="text/css" href="src/forms/input/checkboxes/brick-ui.checkboxes.less">
<link rel="stylesheet/less" type="text/css" href="src/forms/input/files/brick-ui.files.less" >
<link rel="stylesheet/less" type="text/css" href="src/forms/input/radios/brick-ui.radios.less">
<link rel="stylesheet/less" type="text/css" href="src/forms/input/textfields/brick-ui.textfields.less">
<link rel="stylesheet/less" type="text/css" href="src/headings/brick-ui.headings.less">
<link rel="stylesheet/less" type="text/css" href="src/quotes/blockquotes/brick-ui.blockquotes.less">
<link rel="stylesheet/less" type="text/css" href="src/quotes/pullquotes/brick-ui.pullquotes.less">
<link rel="stylesheet/less" type="text/css" href="src/tabs/brick-ui.tabs.less">
<link rel="stylesheet/less" type="text/css" href="src/toc/brick-ui.toc.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js" async></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" defer></script>
<script src="docs/prism-syntaxhighlighter/prism.js" async></script>
<script src="src/tabs/brick-ui.tabs.js" defer></script>
</head>
<body>
<header id="header">
<h1>Brickimedia Design</h1>
<span>Design for the Brickimedia community</span>
</header>
<aside id="sidebar">
<img class="logo" src="docs/images/logo-brickimedia-white.svg" alt="Brickimedia" width="200">
<ul>
<li><a href="#h-draft">About the Draft</a></li>
<li>
<a href="#h-licence">Licence</a>
<ul>
<li><a href="#h-licence-requires">It requires you to..</a></li>
<li><a href="#h-licence-allows">It allows you to..</a></li>
<li><a href="#h-licence-prevents">It prevents you to..</a></li>
</ul>
</li>
<li><a href="#h-iconography">Iconography</a></li>
<li><a href="#h-typography">Typography</a></li>
<li>
<a href="#h-web-components">Web components</a>
<ul>
<li><a href="#h-breadcrumbs">Breadcrumbs</a></li>
<li><a href="#h-buttons">Buttons</a></li>
<li><a href="#h-dividers">Dividers</a></li>
<li>
<a href="#h-form_elements">Form elements</a>
<ul>
<li><a href="#h-textfields">Textfields</a></li>
<li><a href="#h-checkboxes">Checkboxes</a></li>
<li><a href="#h-radios">Radios</a></li>
<li><a href="#h-files">Files</a></li>
</ul>
</li>
<li><a href="#h-headings">Headings</a></li>
<li><a href="#h-tabs">Tabs</a></li>
<li>
<a href="#h-quote-elements">Quote elements</a>
<ul>
<li><a href="#h-blockquotes">Blockquotes</a>
</li>
<li><a href="#h-pullquotes">Pullqoutes</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
<main id="content">
<article id="draft">
<section id="sect-draft">
<h2 id="h-draft">About the Draft</h2>
<p>This is a work-in-progress draft created for Brickimedia, an online LEGO community. We want to improve the experience for users by making navigation more fluid, simplifying the appearance, along with providing the same feeling for users with different devices. Our principle focuses on design without distractions. No more squnting your eyes to read texts with a miniscule font size, or scrolling your screen to look at the stuff overflowing the webpage. Your priority is our priority.<p>
<p>We do our best to employ modern technology such as HTML5 to ensure readable code that makes sense, along with making the site accessible to those with disabilities. We also use Less.js, a preprocessor that expands CSS to help make it as flexible as possible. </p>
<p>Want to contribute? Learn how to contribute at the project's <a href="CONTRIBUTING.md">contributing guidelines</a>.</p>
<p>Code for this documentation is open sourced and available on <a href="//github.com/codynguyen1116/brickimedia-design-guide" target="_blank">GitHub</a>.</p>
</section>
<section id="sect-licence">
<h2 id="h-licence">Licence</h2>
<p>This project is released under the GNU General Public Licence of version 3.0. It is located at <a href="LICENSE">LICENSE</a>. The full version of GPL v3.0 can be seen at the <a href="http://choosealicense.com/licenses/gpl-3.0/">official site</a> of GNU.org. The short version means that it:</p>
<h3 id="h-licence-requires">Requires you to:</h3>
<ul>
<li>Make the source code of the library and not the entire program available under this licence.</li>
<li>Show when major changes are made to the source code of the software.</li>
<li>Include a copy of the copyright noticce and licence with the code.</li>
</ul>
<h3 id="h-licence-allows">Allows you to:</h3>
<ul>
<li>Use this software and other derivitaves or forms of it for commercial purposes.</li>
<li>Distribute this software with proper attribution.</li>
<li>Modify this software.</li>
<li>Receive patent rights.</li>
<li>Use this software privately without distributing it.</li>
</ul>
<h3 id="h-licence-prevents">Prevents you from</h3>
<ul>
<li>Holding the licence owners and authors liable for breaking changes and damages to the software of the Brickimedia Framework.</li>
<li>Distributing the software without proper attribution.</li>
</ul>
</section>
</section>
<section id="sect-iconography">
<h2 id="h-iconography">Iconography</h2>
</section>
<section id="sect-typography">
<h2 id="h-typography">Typography</h2>
</section>
<section id="sect-web-components">
<h2 id="h-web-components">Web components</h2>
<p></p>
<section id="sect-breadcrumbs">
<h3 id="h-breadcrumbs">Breadcrumbs</h3>
<p><b>Breadcrumbs</b> are navigation elements used to show the user their current location and the hierarchial organization of the website they're viewing.</p>
<pre>
<code class="language-markup">
<ul class="brick-ui breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">BIONICLE</a></li>
<li>Tahu</li>
</ul>
</code>
</pre>
</section>
<section id="sect-buttons">
<h3 id="h-buttons">Buttons</h3>
<pre>
<code class="language-markup">
</code>
</pre>
</section>
<section id="sect-dividers">
<h3 id="h-dividers">Dividers</h3>
<pre>
<code class="language-markup">
<p>
Cume sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam hendrerit mi est, eget interdum enim faucibus vitae.
Mauris sit amet magna maximus, rutrum mi id, vulputate odio. Suspendisse commodo, augue nec eleifend aliquet,tortor mi venenatis nisl, vitae fermentum mauris purus quis nunc.
Mauris faucibus eros viverra mi dignissim, ut convallis ante elementum. Nam pulvinar leo non libero iaculis, iaculis tempor orci imperdiet.
</p>
<hr>
<p>
Sed pellentesque ac purus mattis tempus. Cras vel pellentesque turpis. Sed lobortis purus eget dui laoreet, vel mollis nisl fermentum. Duis aliquam rhoncus laoreet.
Mauris volutpat purus elit, vitae interdum lectus rhoncus quis. Mauris sodales leo nec
orci vehicula faucibus. Proin ullamcorper ante sed ipsum dignissim ultricies. Morbi in leo magna. Duis vitae metus dignissim, tristique erat in, porta quam. Morbi ornare justo nec massa imperdiet vestibulum. Aliquam ultrices vitae purus ac volutpat.
Etiam et vulputate arcu. Curabitur at augue enim. Nunc consequat enim quis bibendum iaculis.
<p>
</code>
</pre>
</section>
<section id="sect-form-elements">
<h3 id="h-form-elements">Form elements</h3>
<section id="sect-textfields">
<h4 id="h-textfields">Textfields</h4>
<pre>
<code class="language-markup">
<input class="brick-ui input textfield" type="text" placeholder="Search">
<input class="brick-ui input textfield" type="email" placeholder="enter email address">
<input class="brick-ui input textfield" type="url" placeholder="enter URL">
<input class="brick-ui input textfield" type="password" placeholder="enter your password">
<input class="brick-ui input textfield" type="tel" placeholder="enter your telephone #">
<input class="brick-ui input textfield" type="number" placeholder="choose a number">
<input class="brick-ui input textfield" type="date">
<input class="brick-ui input textfield" type="month">
<input class="brick-ui input textfield" type="time">
<textarea class="brick-ui input textfield"></textarea>
</code>
</pre>
</section>
<section id="sect-checkboxes">
<h4 id="h-checkboxes">Checkboxes</h4>
<pre>
<code class="language-markup">
<span class="brick-ui checkbox">
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkboxtwo"></label>
</span>
</code>
</pre>
</section>
<section id="sect-radios">
<h4 id="h-radios">Radios</h4>
<pre>
<code class="language-markup">
<span class="brick-ui radio">
<input type="radio" id="radio" name="radio">
<label for="radio"></label>
</span>
</code>
</pre>
</section>
<section id="sect-files">
<h4 id="h-files">Files</h4>
<pre>
<code class="language-markup">
<input class="brick-ui input file" type="file" name="file" id="file">
<label for="file" class="brick-ui input file-label regular blue">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Download_media.svg" alt="File" height="25">
<span>Choose a file</span>
</label>
</code>
</pre>
</section>
</section>
<section id="sect-headings">
<h3 id="h-headings">Headings</h3>
<pre>
<code class="language-markup">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</code>
</pre>
</section>
<section id="sect-tabs">
<h3 id="h-tabs">Tabs</h3>
<pre>
<code class="language-markup">
<ul class="brick-ui tabs" id="tabs">
<li><a href="#" name="tab1">One</a></li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
<ul class="brick-ui tab-content" id="tab-content">
<li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum, lectus non ultricies pellentesque, arcu nibh fringilla metus, ac scelerisque velit lectus id justo. Morbi vitae arcu quis ligula dignissim pharetra. Ut posuere est ornare, fringilla
purus et, dictum elit. Vivamus et tellus vel diam gravida feugiat vel sit amet eros. Praesent volutpat nunc ac turpis rutrum, vitae pulvinar purus sollicitudin. Nulla id mollis mauris. Etiam vulputate hendrerit nulla, eu ultricies arcu convallis at.
Curabitur molestie, metus ultricies egestas fermentum, justo metus feugiat elit, ac vestibulum metus metus sed nisi. Vestibulum tempor cursus purus, sagittis sollicitudin libero fermentum ut. In pharetra sagittis maximus.
</li>
<li id="tab2">
Cume sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam hendrerit mi est, eget interdum enim faucibus vitae. Mauris sit amet magna maximus, rutrum mi id, vulputate odio. Suspendisse commodo, augue nec eleifend aliquet,
tortor mi venenatis nisl, vitae fermentum mauris purus quis nunc. Nullam non luctus erat. Nam sem magna, imperdiet id auctor ut, sodales sed risus. Aenean at enim velit. Maecenas in tellus elit.
</li>
<li id="tab3">
Sed pellentesque ac purus mattis tempus. Cras vel pellentesque turpis. Sed lobortis purus eget dui laoreet, vel mollis nisl fermentum. Duis aliquam rhoncus laoreet. Mauris volutpat purus elit, vitae interdum lectus rhoncus quis. Mauris sodales leo nec
orci vehicula faucibus. Proin ullamcorper ante sed ipsum dignissim ultricies. Morbi in leo magna. Duis vitae metus dignissim, tristique erat in, porta quam. Morbi ornare justo nec massa imperdiet vestibulum. Aliquam ultrices vitae purus ac volutpat.
Etiam et vulputate arcu. Curabitur at augue enim. Nunc consequat enim quis bibendum iaculis.
</li>
<li id="tab4">
Nullam magna est, auctor non odio et, cursus ultrices diam. Donec aliquet turpis ut augue cursus elementum. Maecenas eget nisl pellentesque, scelerisque dolor ac, auctor quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Fusce tristique finibus dui, ac sodales dui gravida quis. Aliquam eu posuere orci. Donec leo tellus, efficitur at porttitor nec, efficitur non enim. Maecenas laoreet suscipit orci sagittis condimentum. Maecenas accumsan eros dui, ut condimentum
quam iaculis eu. Sed sodales tempor eros, vitae posuere purus efficitur id. Proin at sollicitudin quam. Mauris finibus blandit est, vel vehicula diam auctor at. Nullam convallis ut leo venenatis sodales. Phasellus dapibus ornare nibh a dictum.
</li>
</ul>
</code>
</pre>
</section>
<section id="sect-quote-elements">
<h3 id="h-quote-elements">Quote elements</h3>
<section id="sect-blockquotes">
<h4 id="h-blockquotes">Blockquotes</h4>
</section>
<section id="sect-pullquotes">
<h4 id="h-pullquotes">Pullquotes</h4>
</section>
</section>
</section>
</article>
</main>
</body>
</html>