-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
404 lines (346 loc) · 24.2 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
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boardz Demo</title>
<meta name="description" content="Create Pinterest-like boards with pure CSS, in less than 1kB.">
<meta name="author" content="Burak Karakan">
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<link rel="stylesheet" href="src/boardz.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="seventyfive-percent centered-block">
<div class="page-header text-center">
<h1> boardz.css </h1>
<p class="subheader">Create Pinterest-like boards with pure CSS, in less than 1kB.
<br><br>
<iframe src="https://ghbtns.com/github-btn.html?user=karakanb&repo=boardz&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</p>
</div>
<hr class="seperator">
<div class="text-center">
<h2>What is <strong>Boardz</strong>?</h2>
<p><strong>Boardz</strong> is a simple, lightweight and responsive pure CSS library that creates Pinterest-like boards from simple
unordered list elements. The main objective of the Boardz is to give the basic layout of the board with a simple default styling.
The library is not made to be a plug-and-use file, it simply gives the layout of the board to the nested <code><ul></code>
and <code><li></code> elements. It uses the powerful Flexbox model to create and maintain the layout across devices and screens.
<br>
</p>
<h2>How to use it?</h2>
<p>In order to use <strong>Boardz</strong>, just wrap your unordered list with a <code>div</code> of class "boardz", then the rest of the list will be styled properly. Think of every unordered list as a column in the board, and the columns will be generated for every unordered list element in your <code>div</code>. <strong>Boards</strong> will also give a basic style to the <code>h1</code> headers in your list elements. The basic structure of a simple board with 2 columns is as follows:<br>
</p>
</div>
<pre>
<code>
<div class="boardz">
<!-- First column -->
<ul>
<li>
<h1> Header 1</h1>
Content
</li>
<li>
<h1> Header 2</h1>
Content
</li>
</ul>
<!-- Second column -->
<ul>
<li>
<h1> Header 1</h1>
Content
</li>
<li>
<h1> Header 2</h1>
Content
</li>
</ul>
</div>
</code>
</pre>
<!-- Sample code block -->
<div>
<hr class="seperator">
<!-- Example header and explanation -->
<div class="text-center">
<h2>Default <strong>Boardz</strong></h2>
<p>The default view of the Boardz is constructed over the simple structure above.</p>
</div>
<hr class="seperator fifty-percent">
<!-- Example Boardz element. -->
<div class="boardz centered-block">
<ul>
<li>
<h1>Ex Nostrud</h1>
Lorem ipsum dolor sit amet, et primis ornatus usu, eum ei graeci regione adipiscing. Eu primis nominavi ius, case facete eum at. In per summo sanctus, mea at tamquam nostrud luptatum, alienum convenire per te. Ei vel diceret complectitur. His choro accusam gubergren et.
Cu tale saperet sed. Impetus accusata assentior id vel, tantas admodum mel ad. Sed eruditi sanctus fabellas cu, quas alienum sea ea. Cu vero munere disputationi sed, eruditi offendit his ne. Pri ad dolores laboramus.Vix ut affert civibus petentium, has clita dolorum id, an ius odio alia. An mel elitr scaevola adversarium, nibh dissentias inciderint nec ea. Purto integre ex his. Dolor nonumy docendi ad duo.
</li>
<li>
<h1>Audire Integre </h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</li>
</ul>
<ul>
<li>
<h1>Eruditi</h1>
Lorem ipsum dolor sit amet, te ius feugait persecuti, eirmod tritani ad pro. Copiosae expetendis per no. Nec no enim solum inermis. Minim insolens instructior ne ius, nulla eruditi eam no. Et quo aeterno persecuti disputando, adhuc accusam sea no, an brute justo debitis quo. At eos ipsum putent.
</li>
<li>
<h1>Constituam Adversarium</h1>*
Cu simul oratio indoctum nam, cu offendit moderatius mel. Sea eu euismod consulatu, usu cu audiam perpetua, viris philosophia vis et. Cu sit tibique intellegam, error ludus scripta pri et. His congue aliquam iracundia ei. Has idque fastidii id, mucius erroribus vel ad. Ut posse albucius periculis his, duo an dicunt nostrud deleniti.
Modo affert expetenda per ne. Et dolore platonem appellantur cum. Constituam adversarium in sit, mea ne porro vitae, eu pri modus dicam quaeque. At nibh brute sonet sea. Mei simul disputando eu, id vis esse explicari dissentiet, ei agam volutpat usu. Ex vis tollit mollis oportere, mei probatus qualisque te. Mei labore voluptaria ex, mei graeci feugiat definiebas eu.
</li>
<li>
<h1>Fastidii Electram</h1>
Vel adipisci suscipiantur te, nam ullum perfecto ut. Vitae contentiones id sed. Est vitae ponderum facilisis in. Quo illud eligendi similique et, odio detraxit pertinacia ea vix.
</li>
</ul>
<ul>
<li>
<h1>Mea Ludico</h1>
Cetero perpetua ius at, et feugait nostrum sit, mea ne quaeque fastidii electram. Delenit torquatos adipiscing vix ex. Viris tamquam postulant ei mel, ea singulis corrumpit democritum vim. No fierent salutatus vel, in persecuti vituperata eos, at nusquam perpetua hendrerit est. Ne pri odio option nusquam, sed natum admodum eleifend at. Sea putant malorum scripserit ut, ei duo prima eleifend, ea mea agam diceret inciderint.
</li>
<li>
<h1>Impetus Accusata</h1>
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
</li>
<li>
<h1>Viderer Voluptua</h1>
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
</li>
</ul>
<ul>
<li>
<h1>Morbiso</h1>
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
</li>
<li>
<h1>Sumo Summo</h1>
Ex nostrud verterem mea, duo no delicata neglegentur. Audire integre rationibus ut pri, ex cibo oblique euismod sit, cibo iracundia vix at. Legimus torquatos definiebas an nec, mazim postulant at sit. Ne qui quando vocent accusata, nam tritani fierent no. Ea per vocent voluptatibus.
Animal petentium patrioque id eos, et vis delenit reprimique. Vix clita essent expetenda et, duo in soleat graeci complectitur. Sit lorem vitae iudicabit in, malorum discere ne ius. Est eu adhuc blandit, ne copiosae placerat persequeris vim.
</li>
<li>
<h1>Parabou Tras</h1>
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
</li>
<li>
<h1>Vix Clita</h1>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
</li>
</ul>
</div>
</div>
<!-- Sample code block -->
<div>
<hr class="seperator">
<!-- Example header and explanation -->
<div class="text-center">
<h2>Fitted <strong>Boardz</strong></h2>
<p>Stretched version of the example above. By just adding the class <code>fitted</code> to the <code>div</code>
of the Boardz element, such as <code><div class="boardz fitted"></code>, the Boardz object justifies the columns vertically,
making the whole board looking more like a rectangle. </p>
</div>
<hr class="seperator fifty-percent">
<!-- Example Boardz element. -->
<div class="boardz centered-block fitted">
<ul>
<li>
<h1>Ex Nostrud</h1>
Lorem ipsum dolor sit amet, et primis ornatus usu, eum ei graeci regione adipiscing. Eu primis nominavi ius, case facete eum at. In per summo sanctus, mea at tamquam nostrud luptatum, alienum convenire per te. Ei vel diceret complectitur. His choro accusam gubergren et.
Cu tale saperet sed. Impetus accusata assentior id vel, tantas admodum mel ad. Sed eruditi sanctus fabellas cu, quas alienum sea ea. Cu vero munere disputationi sed, eruditi offendit his ne. Pri ad dolores laboramus.Vix ut affert civibus petentium, has clita dolorum id, an ius odio alia. An mel elitr scaevola adversarium, nibh dissentias inciderint nec ea. Purto integre ex his. Dolor nonumy docendi ad duo.
</li>
<li>
<h1>Audire Integre </h1>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</li>
</ul>
<ul>
<li>
<h1>Eruditi</h1>
Lorem ipsum dolor sit amet, te ius feugait persecuti, eirmod tritani ad pro. Copiosae expetendis per no. Nec no enim solum inermis. Minim insolens instructior ne ius, nulla eruditi eam no. Et quo aeterno persecuti disputando, adhuc accusam sea no, an brute justo debitis quo. At eos ipsum putent.
</li>
<li>
<h1>Constituam Adversarium</h1>*
Cu simul oratio indoctum nam, cu offendit moderatius mel. Sea eu euismod consulatu, usu cu audiam perpetua, viris philosophia vis et. Cu sit tibique intellegam, error ludus scripta pri et. His congue aliquam iracundia ei. Has idque fastidii id, mucius erroribus vel ad. Ut posse albucius periculis his, duo an dicunt nostrud deleniti.
Modo affert expetenda per ne. Et dolore platonem appellantur cum. Constituam adversarium in sit, mea ne porro vitae, eu pri modus dicam quaeque. At nibh brute sonet sea. Mei simul disputando eu, id vis esse explicari dissentiet, ei agam volutpat usu. Ex vis tollit mollis oportere, mei probatus qualisque te. Mei labore voluptaria ex, mei graeci feugiat definiebas eu.
</li>
<li>
<h1>Fastidii Electram</h1>
Vel adipisci suscipiantur te, nam ullum perfecto ut. Vitae contentiones id sed. Est vitae ponderum facilisis in. Quo illud eligendi similique et, odio detraxit pertinacia ea vix.
</li>
</ul>
<ul>
<li>
<h1>Mea Ludico</h1>
Cetero perpetua ius at, et feugait nostrum sit, mea ne quaeque fastidii electram. Delenit torquatos adipiscing vix ex. Viris tamquam postulant ei mel, ea singulis corrumpit democritum vim. No fierent salutatus vel, in persecuti vituperata eos, at nusquam perpetua hendrerit est. Ne pri odio option nusquam, sed natum admodum eleifend at. Sea putant malorum scripserit ut, ei duo prima eleifend, ea mea agam diceret inciderint.
</li>
<li>
<h1>Impetus Accusata</h1>
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
</li>
<li>
<h1>Viderer Voluptua</h1>
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
</li>
</ul>
<ul>
<li>
<h1>Morbiso</h1>
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
</li>
<li>
<h1>Sumo Summo</h1>
Ex nostrud verterem mea, duo no delicata neglegentur. Audire integre rationibus ut pri, ex cibo oblique euismod sit, cibo iracundia vix at. Legimus torquatos definiebas an nec, mazim postulant at sit. Ne qui quando vocent accusata, nam tritani fierent no. Ea per vocent voluptatibus.
Animal petentium patrioque id eos, et vis delenit reprimique. Vix clita essent expetenda et, duo in soleat graeci complectitur. Sit lorem vitae iudicabit in, malorum discere ne ius. Est eu adhuc blandit, ne copiosae placerat persequeris vim.
</li>
<li>
<h1>Parabou Tras</h1>
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
</li>
<li>
<h1>Vix Clita</h1>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
</li>
</ul>
</div>
</div>
<!-- Sample code block -->
<div>
<hr class="seperator">
<!-- Example header and explanation -->
<div class="text-center">
<h2>Image <strong>Boardz</strong></h2>
<p><strong>Boardz</strong> can be used with images as well. Below is an example Boardz that mixes image and text cells.</p>
</div>
<hr class="seperator fifty-percent">
<!-- Example Boardz element. -->
<div class="boardz centered-block">
<ul>
<li>
<img src="http://kingofwallpapers.com/poster/poster-003.jpg" alt="demo image"/>
</li>
<li>
<img src="http://2.bp.blogspot.com/-pINYV0WlFyA/VUK-QcGbU5I/AAAAAAAABcU/fNy2pd2cFRk/s1600/WEB-Jack-White-Poster-Creative.png" alt="demo image"/>
</li>
<li>
<img src="http://payload140.cargocollective.com/1/10/349041/5110553/Florrie.jpg" alt="demo image"/>
</li>
</ul>
<ul>
<li>
<img src="http://cdn3.volusion.com/prakm.mcyzp/v/vspfiles/photos/TWAMBLUE-2.jpg" alt="demo image"/>
</li>
<li>
<img src="http://wpmedia.ottawacitizen.com/2015/11/01.jpg?quality=55&strip=all&w=840&h=630&crop=1" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/736x/8c/ee/ff/8ceeff967c03c7cf4f86391dd6366544.jpg" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/16/8c/87168cbbf07cb54a9793bebaa20b1bde.jpg" alt="demo image"/>
</li>
</ul>
<ul>
<li>
<img src="http://images.fromupnorth.com/077/54a12d7458673.jpg" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/736x/22/95/48/229548086245c332443109ca9f2e0890.jpg" alt="demo image"/>
</li>
<li>
<img src="https://inspirationfeeed.files.wordpress.com/2014/01/ca402f7410884454ec5c303336e8591d1.jpg" alt="demo image"/>
</li>
</ul>
</div>
</div>
<!-- Sample code block -->
<div>
<hr class="seperator">
<!-- Example header and explanation -->
<div class="text-center">
<h2>Beautiful <strong>Boardz</strong></h2>
<p><strong>Boardz</strong> is highly customizable. In order to demonstrate this, a simple `beautiful` mode is included in the library.
By just adding the class <code>beautiful</code> to the main Boardz wrapper, e.g. <code><div class="boardz beautiful"></code>,
the following board can be achieved.</p>
</div>
<hr class="seperator fifty-percent">
<!-- Example Boardz element. -->
<div class="boardz centered-block beautiful">
<ul>
<li>
<img src="http://kingofwallpapers.com/poster/poster-003.jpg" alt="demo image"/>
</li>
<li>
<img src="http://2.bp.blogspot.com/-pINYV0WlFyA/VUK-QcGbU5I/AAAAAAAABcU/fNy2pd2cFRk/s1600/WEB-Jack-White-Poster-Creative.png" alt="demo image"/>
</li>
<li>
<img src="http://payload140.cargocollective.com/1/10/349041/5110553/Florrie.jpg" alt="demo image"/>
</li>
</ul>
<ul>
<li>
<img src="http://cdn3.volusion.com/prakm.mcyzp/v/vspfiles/photos/TWAMBLUE-2.jpg" alt="demo image"/>
</li>
<li>
<img src="http://wpmedia.ottawacitizen.com/2015/11/01.jpg?quality=55&strip=all&w=840&h=630&crop=1" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/736x/8c/ee/ff/8ceeff967c03c7cf4f86391dd6366544.jpg" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/16/8c/87168cbbf07cb54a9793bebaa20b1bde.jpg" alt="demo image"/>
</li>
</ul>
<ul>
<li>
<img src="http://images.fromupnorth.com/077/54a12d7458673.jpg" alt="demo image"/>
</li>
<li>
<img src="https://s-media-cache-ak0.pinimg.com/736x/22/95/48/229548086245c332443109ca9f2e0890.jpg" alt="demo image"/>
</li>
<li>
<img src="https://inspirationfeeed.files.wordpress.com/2014/01/ca402f7410884454ec5c303336e8591d1.jpg" alt="demo image"/>
</li>
</ul>
</div>
</div>
<hr class="seperator">
<div class="available-classes">
<h2 class="text-center">Available Classes</h2>
<p>There are three main classes that can be given to a <strong>Boardz</strong> element.
The <code>boardz</code> class is necessary on the wrapper <code>div</code>, and the other two are optional.
Note that, all of these classes should be used on the wrapper div, e.g. <code><div class="boardz beautiful"></code>.</p>
<ul>
<li><code>boardz</code>: This is the class that needs to be on the wrapper <code>div</code>.</li>
<li><code>fitted</code>: This is the class to make columns justified vertically.</li>
<li><code>beautiful</code>: This is the class to make stylish cells.</li>
</ul>
</div>
<hr class="seperator">
<div class="text-center">
<h2>Why does it exist?</h2>
<p>We are trying to build more interactive and fancy interfaces everyday, and the web pages are getting bigger and bigger in terms of file sizes.
I like simple interfaces with clear intentions and because of this, usually, I am trying to use small libraries wherever possible. A few days ago,
I read <a href="https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af">the great Medium article of
Ohans Emmanuel on CSS Flexbox</a> and decided to implement a simple Pinterest-like card-board library by using pure CSS and Flexbox, which I was
thinking of using for a new project, while keeping the file size at minimum. Turns out that Flexbox makes things incredibly simple and is a nice
step for building more responsive web pages.
<br></p>
<hr class="seperator fifty-percent">
<p>
<strong>Boardz</strong> is highly customizable and a simple solution with <strong>less than 1kB</strong> minified file size. It may set a base for anyone
to create more specialized card-boards, or it may not, I don't know. The project is <a href="https://github.com/karakanb/boardz">completely open-source</a>, so you can submit a PR whenever you want.
Anyway, if you found anything wrong with it, or if you have any suggestions,
please feel free to contact me on <a href="https://github.com/karakanb">GitHub</a>.
</p>
</div>
<hr class="seperator">
<div class="footer">
<p>Developed with ❤ by <a href="https://github.com/karakanb">Burak</a>.</p>
</div>
</div>
</body>
</html>