forked from franciscop/picnic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation.html
875 lines (829 loc) · 37.4 KB
/
documentation.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
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
<!DOCTYPE html><html lang="en"><head><title>Documentation - Picnic CSS</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="css, library, picnic, picnicss, light"><meta name="description" content="A lightweight CSS library"><link rel="stylesheet" href="web/style/style.min.css"><link rel="stylesheet" media="bogus"><style>aside a.top {
font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation .flex > * {
padding-bottom: .3em;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style></head><body><nav><a href="/" class="brand"><span>Picnic CSS</span></a><input id="bmenu" type="checkbox" class="show"><label for="bmenu" class="burger toggle pseudo button">menu</label><div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/franciscop/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div></nav><main id="home" class="documentation"><section class="flex five"><aside class="full fifth-1000"><h2>Contents</h2><div class="links flex two three-500 five-800 one-1000"></div><a href="#home" tabindex="-1" class="top pseudo button">▲ Up you go ▲</a></aside><article class="full four-fifth-1000"><h1 id="picnic-css">Picnic CSS</h1>
<p>Picnic CSS is a lightweight and beautiful CSS library</p>
<h2 id="buttons">Buttons</h2>
<p>They can be of different colors and types:</p>
<pre><code class="lang-html"><button>Button</button>
<button class='success'>Success</button>
<button class='warning'>Warning</button>
<button class='error'>Error</button>
<button disabled>Disabled</button>
</code></pre>
<pre><code class="lang-html"><button>Button</button>
<a class="button">Link</a>
<input value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle button">Toggle</span>
</label>
</code></pre>
<h3 id="pseudo-buttons">Pseudo buttons</h3>
<p>Allows for seemingly links to behave as buttons:</p>
<pre><code class="lang-html"><button class="pseudo">Button</button>
<a class="pseudo button">Link</a>
<input class="pseudo" value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle pseudo button">Toggle</span>
</label>
</code></pre>
<h3 id="hack-it">Hack it</h3>
<p>You only have to define a single color base for new colors. The <code>:hover</code> and <code>:active</code> status are handled as overlays for consistency and simplicity</p>
<pre><code class="lang-html"><button class="myCoolButton">My Cool Button</button>
</code></pre>
<pre><code class="lang-css">.myCoolButton {
background: #85144b;
}
</code></pre>
<p>To create a larger button you only need to make the font inside it larger. The paddings are set in <em>em</em> so the whole button stays in great shape:</p>
<pre><code class="lang-html"><button class="mainButton">Large button</button><br>
<button>Normal button</button><br>
<button class="shyButton">Small button</button>
</code></pre>
<pre><code class="lang-css">.mainButton {
font-size: 1.5em;
}
.shyButton {
font-size: .75em;
}
</code></pre>
<p>To change the color of the pseudo-color on hover:</p>
<pre><code class="lang-html"><button class="pseudo cool">Pseudo personal</button>
</code></pre>
<pre><code class="lang-css">.cool:hover,
.cool:active,
.cool:focus {
background: #cff;
}
</code></pre>
<h2 id="card">Card</h2>
<p>A card is a self-contained, replicable type. It works great with other of its kind. It can consist of only one element or many of them:</p>
<pre><code class="lang-html"><article class="card">
<header>
<h3>A really simple h3</h3>
</header>
</article>
</code></pre>
<pre><code class="lang-html"><article class="card">
<header>
<button>Love</button>
<button class="dangerous">Hate</button>
</header>
</article>
</code></pre>
<pre><code class="lang-html"><article class="card">
<header>
<h3>Forest</h3>
</header>
<footer>
<button>Like</button>
</footer>
</article>
</code></pre>
<pre><code class="lang-html"><div class="flex two">
<div>
<article class="card">
<img src="/web/img/forest.jpg">
<footer>
<h3>Misty Forest</h3>
<button>Like</button>
</footer>
</article>
</div>
<div>
<article class="card">
<img src="/web/img/forest.jpg">
<footer>
<h3>Misty Forest</h3>
<button>Like</button>
</footer>
</article>
</div>
</div>
</code></pre>
<h2 id="checkbox">Checkbox</h2>
<p>Display an inline checkbox with a nice default style</p>
<pre><code class="lang-html"><label>
<input type="checkbox">
<span class="checkable">Check me out (;</span>
</label>
</code></pre>
<pre><code class="lang-html"><label>
<input type="checkbox" checked>
<span class="checkable">Uncheck me</span>
</label>
</code></pre>
<h3 id="usage">Usage</h3>
<p>This plugin, while experimental in the past, is mature now. Use a normal checkbox followed by any other element with the class <code>checkable</code>. The element that follows the checkbox will receive the pseudo classes so it should be able to do so. We recommend a <code><span></code> or <code><label></code>. Here we use the label around them for making the <code><input></code> change state when you click on this folowing element.</p>
<pre><code class="lang-html"><label>
<input type="checkbox">
<span class="checkable">Checkbox text</span>
</label>
</code></pre>
<p>But you can also use a label and reference the original input:</p>
<pre><code class="lang-html"><input id="checkboxdemo" type="checkbox">
<label for="checkboxdemo" class="checkable">Checkbox text</label>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>You do not need javascript since we are using the native elements and not setting <code>display: none</code> purposefully. However, you can still use javascript as normal to retrieve the checked elements.</p>
<p><form>
<label>
<input class="tos" type="checkbox" />
<span class="checkable">Accept TOS</span>
</label>
<button>Send</button>
</form></p>
<script>
// Pure javascript
document.querySelector('form').onsubmit = function(e){
e.preventDefault();
alert(document.querySelector('.tos').checked);
}
</script>
<pre><code class="lang-js">// Pure javascript
document.querySelector('form').onsubmit = function(e){
e.preventDefault();
alert(document.querySelector('input.tos').checked);
}
// jQuery
$("form").on('submit', function(e){
e.preventDefault();
alert($('input.tos').is(':checked'));
});
</code></pre>
<h2 id="drop-image">Drop image</h2>
<p>Allows you to add a file input element that can receive an image drop and clicks with native elements. However, it needs some javascript to show the dropped image:</p>
<pre><code class="lang-html"><div style="width: 200px"> <!-- this div just for demo display -->
<label class="dropimage">
<input title="Drop image or click me" type="file">
</label>
</div>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>This is the javascript you need for multiple elements:</p>
<pre><code class="lang-js">document.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
img.onchange = function(e){
var inputfile = this, reader = new FileReader();
reader.onloadend = function(){
inputfile.style['background-image'] = 'url('+reader.result+')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
});
</code></pre>
<h3 id="hack-it">Hack it</h3>
<p>Do you want round pictures? No problem, just do this:</p>
<pre><code class="lang-css">.profile {
border-radius: 50%; /* Make it a circle */
padding-bottom: 100%; /* 100% height (ratio 1) */
}
</code></pre>
<p>To get this:</p>
<pre><code class="lang-html"><label class="dropimage profile">
<input name="filea" title="Drop image or click me" type="file">
</label>
</code></pre>
<p>Make it smaller</p>
<pre><code class="lang-css">.miniprofile {
border-radius: 50%; /* Make it a circle */
margin: 0 auto; /* Center horizontally */
width: 60%; /* 60% width */
padding-bottom: 60%; /* 60% height */
}
</code></pre>
<pre><code class="lang-html"><label class="dropimage miniprofile">
<input name="filea" title="Drop image or click me" type="file">
</label>
</code></pre>
<h2 id="grids">Grids</h2>
<blockquote>
<p>Note: the old <code>.row</code> and <code>.grid</code> have been replaced by the new <code>.flex</code>. You can still <a href="https://github.com/picnicss/picnic/blob/dcf3410125a861b3bf58ebfd06f73916ef9ae3db/src/plugins/grid/readme.md">see the old documentation in github</a>.</p>
<p>Note 2: the children <code><span></code> are only for display purposes; you can put anything you want instead of them</p>
</blockquote>
<p>A flexbox grid implementation with breakpoints. Choose when to change your layout depending on your content instead of the device you want to show as recommended by <a href="https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/how-to-choose-breakpoints">Google's RWD</a>, by <a href="https://www.smashingmagazine.com/2013/03/logical-breakpoints-responsive-design/">Smashing Magazine's Logical Breakpoints</a> and Picnic CSS.</p>
<p>You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:</p>
<pre><code class="lang-html"><div class="flex two four-500 six-800 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="full half-500 third-800"><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
</div>
</code></pre>
<h3 id="equally-sized-columns">Equally sized columns</h3>
<p>Let's start through the basics though. Just a container with equally sized children:</p>
<pre><code class="lang-html"><div class="flex demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>
</code></pre>
<p>With the class <code>flex</code>, smaller children will be spaced equally to fill all of the content. However, this only works with small children. If you have children bigger than their corresponding width (1/6th in the above) they will not be restricted:</p>
<pre><code class="lang-html"><div class="flex demo">
<div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<div><span>2</span></div>
</div>
</code></pre>
<p>To fix this, manually set the number of columns as explained in the next point.</p>
<h3 id="column-count">Column count</h3>
<p>If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:</p>
<pre><code class="lang-html"><div class="flex three demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>The columns will keep being equally spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:</p>
<div class="flex six">
<div><code>one</code></div>
<div><code>two</code></div>
<div><code>three</code></div>
<div><code>four</code></div>
<div><code>five</code></div>
<div><code>six</code></div>
<div><code>seven</code></div>
<div><code>eight</code></div>
<div><code>nine</code></div>
<div><code>ten</code></div>
<div><code>eleven</code></div>
<div><code>twelve</code></div>
</div>
<p>Most grid systems use a 12 grid system, but we wanted to use a more flexible system and allow you to choose the grid size.</p>
<h3 id="responsive-column-count">Responsive column count</h3>
<p>We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with the number of pixels in 100 increments as follows:</p>
<pre><code class="lang-html"><div class="flex two three-600 six-1200 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>
</code></pre>
<p>The number after the column count as in <code>-600</code> or <code>-1200</code> are the breakpoints. When the <strong>website width is over that number</strong>, that column count will be used instead of the previous. If we use two or more, the largest column count will be used.</p>
<p>For example, in a desktop with a screen of <code>1920x1080px</code> the previous one will display 6 columns. Any screen from 600px to 1200px will display three columns and smaller than 600px will display 2 columns.</p>
<p>The increment is 100px and starts in 500px up to 2000px both included. You can use any of those suffixes for the column count class:</p>
<div class="flex two five-800 ten-1200">
<div><code>-500</code></div>
<div><code>-600</code></div>
<div><code>-700</code></div>
<div><code>-800</code></div>
<div><code>-900</code></div>
<div><code>-1000</code></div>
<div><code>-1100</code></div>
<div><code>-1200</code></div>
<div><code>-1300</code></div>
<div><code>-1400</code></div>
<div><code>-1500</code></div>
<div><code>-1600</code></div>
<div><code>-1700</code></div>
<div><code>-1800</code></div>
<div><code>-1900</code></div>
<div><code>-2000</code></div>
</div>
<h3 id="remainders">Remainders</h3>
<p>You can also modify the remainder content as you wish with a couple of utility classes. This is the default:</p>
<pre><code class="lang-html"><div class="flex three demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>You can grow them:</p>
<pre><code class="lang-html"><div class="flex three grow demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<p>Or you can center them:</p>
<pre><code class="lang-html"><div class="flex three center demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
</div>
</code></pre>
<h3 id="children-sizing">Children sizing</h3>
<p>Now that we know how the parent (or grid) can modify itself and the elements below them, the children can also go rebel and behave on their own. Say that a child wants to be half of the size of its parent element. Easy, just add the class <code>half</code>:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="half"><span>3</span></div>
</div>
</code></pre>
<p>We have many classes like those. They are the size relative to the parent grid:</p>
<div class="flex six">
<div><code>full</code></div>
<div><code>half</code></div>
<div><code>third</code></div>
<div><code>two-third</code></div>
<div><code>fourth</code></div>
<div><code>three-fourth</code></div>
<div><code>fifth</code></div>
<div><code>two-fifth</code></div>
<div><code>three-fifth</code></div>
<div><code>four-fifth</code></div>
<div><code>sixth</code></div>
<div><code>none</code></div>
</div>
<p>The class <code>none</code> hides the element, useful for responsive layouts</p>
<h3 id="responsive-children">Responsive children</h3>
<p>They can also be fine-tuned in a way similar to the above:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div class="half fourth-1000"><span>1</span></div>
<div class="half fourth-1000"><span>2</span></div>
<div class="full half-1000"><span>3</span></div>
</div>
</code></pre>
<h3 id="offsets">Offsets</h3>
<p>The children can also have one offset (empty space) before it. They are built adding the class off-SIZE, similar to the size but prefixing off-:</p>
<pre><code class="lang-html"><div class="flex four demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="off-fourth"><span>3</span></div>
</div>
</code></pre>
<p>We have many classes like those. They are the size of the offset relative to the parent grid:</p>
<div class="flex two three-600 six-1200 demo">
<div><code>off-none</code></div>
<div><code>off-half</code></div>
<div><code>off-third</code></div>
<div><code>off-two-third</code></div>
<div><code>off-fourth</code></div>
<div><code>off-three-fourth</code></div>
<div><code>off-fifth</code></div>
<div><code>off-two-fifth</code></div>
<div><code>off-three-fifth</code></div>
<div><code>off-four-fifth</code></div>
<div><code>off-sixth</code></div>
</div>
<blockquote>
<p>Note: <code>offset-none</code> is useful for making responsive layouts as explained in the next point.</p>
</blockquote>
<h3 id="responsive-offsets">Responsive offsets</h3>
<p>They can also have the minimum screen size when they start working:</p>
<pre><code class="lang-html"><div class="flex three four-1000 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="off-fourth-800"><span>3</span></div>
</div>
</code></pre>
<p>The main difference with the width classes is that it includes a none in case you want to hide the offset at certain sizes and that it doesn't include a full</p>
<h2 id="input">Input</h2>
<p>Simple (or not) text form elements:</p>
<pre><code class="lang-html"><fieldset class="flex two">
<label><input type="email" placeholder="Email"></label>
<label><input type="password" placeholder="Password"></label>
</fieldset>
<textarea placeholder="Textarea"></textarea>
</code></pre>
<style>
input.demo {
margin-bottom: .3em;
}
</style>
<h2 id="label">Label</h2>
<p>An element to display some short relevant information on the side of other element</p>
<pre><code class="lang-html"><h1>header 1 <span class="label">Normal</span></h1>
<h2>header 2 <span class="label success">Success</span></h2>
<h3>header 3 <span class="label warning">Warning</span></h3>
<h4>header 4 <span class="label error">Error</span></h4>
<p>paragraph <span class="label">Normal</span></p>
</code></pre>
<h2 id="modal">Modal</h2>
<p>The modal is pure CSS, which makes the HTML quite ugly actually. However it does work. To try it, press the button:</p>
<pre><code class="lang-html"><label for="modal_1" class="button">Show modal</label>
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>Great offer</h3>
<label for="modal_1" class="close">&times;</label>
</header>
<section class="content">
We have a special offer for you. I am sure you will love it! However this does look spammy...
</section>
<footer>
<a class="button" href="#">See offer</a>
<label for="modal_1" class="button dangerous">
Cancel
</label>
</footer>
</article>
</div>
</code></pre>
<h3 id="javascript">JavaScript</h3>
<p>As always, there is <strong>no javascript</strong>. However, a little bit of javascript could enhance the experience allowing to close the modal by pressing <code>ESC</code>.</p>
<script>
document.onkeydown = function(e){
if (e.keyCode == 27) {
var mods = document.querySelectorAll('.modal > [type=checkbox]');
[].forEach.call(mods, function(mod){ mod.checked = false; });
}
}
</script>
<pre><code class="lang-js">document.onkeydown = function(e){
if (e.keyCode == 27) {
var mods = document.querySelectorAll('.modal > [type=checkbox]');
[].forEach.call(mods, function(mod){ mod.checked = false; });
}
}
</code></pre>
<h2 id="nav">Nav</h2>
<style>
nav.demo {
position: relative;
z-index: 9;
padding: 0 .6em;
}
</style>
<p>A responsive, pure css navigation menu:</p>
<blockquote>
<p>On these smaller versions it might have small glitches. Please see the top, page-wide nav to see the actual effect. </p>
</blockquote>
<pre><code class="lang-html"><nav class="demo">
<a href="#" class="brand">
<img class="logo" src="/web/img/basket.png" />
<span>Picnic CSS</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="#" class="pseudo button icon-picture">Demo</a>
<a href="#" class="button icon-puzzle">Plugins</a>
</div>
</nav>
</code></pre>
<h3 id="responsive">Responsive</h3>
<p>The nav is responsive by default. The text inside the <code><label></code> can be changed for the following characters for a different effect (<a href="https://css-tricks.com/three-line-menu-navicon/">source</a>):</p>
<ul>
<li>Identical to <code>&#8801;</code> (safe on mobile): <label class="pseudo button">≡</label></li>
<li>Trigram for heaven <code>&#9776;</code>: <label class="pseudo button">☰</label></li>
<li>Any other: <i class="pseudo button icon-cog"></i></li>
</ul>
<h3 id="different-height-and-big-logo">Different height and big logo</h3>
<p>Thanks to a <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/">vertical-align trick</a>, you can set it up to any height you want:</p>
<pre><code class="lang-css">nav.imponent {
padding: 2em 0;
}
.imponent .logo {
height: 3em;
}
</code></pre>
<pre><code class="lang-html"><nav class="demo imponent">
<a href="#" class="brand">
<img class="logo" src="/web/img/basket.png" />
<span>Picnic CSS</span>
</a>
</nav>
</code></pre>
<h3 id="form-elements">Form elements</h3>
<p>Just get anything you want inside the nav, most things should work.</p>
<pre><code class="lang-html"><nav class="demo">
<a href="#" class="brand">Picnic CSS</a>
<!-- responsive-->
<input id="bmenug" type="checkbox" class="show">
<label for="bmenug" class="burger pseudo button">&#8801;</label>
<div class="menu">
<input placeholder="Search plugins" />
</div>
</nav>
</code></pre>
<pre><code class="lang-html"><nav class="demo">
<a href="#" class="brand">Picnic CSS</a>
<!-- responsive-->
<input id="cmenug" type="checkbox" class="show">
<label for="cmenug" class="burger pseudo button">&#8801;</label>
<div class="menu">
<select>
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</nav>
</code></pre>
<h3 id="fixed-position">Fixed position</h3>
<p>To set it on the top of the page instead of scrolling with the page, just do:</p>
<pre><code>nav {
position: absolute;
}
</code></pre><h3 id="open-nav-menu-from-left">Open nav menu from left</h3>
<p>change sass variable <code>$picnic-nav-open-left: false !default;</code> to
<code>picnic-nav-open-left: true !default;</code> inside src/plugins/nav/_class.scss file.</p>
<h2 id="radio-button">Radio button</h2>
<p>A simple way of using radiobuttons</p>
<pre><code class="lang-html"><label>
<input type='radio' name="radiodemo">
<span class="checkable">Select me</span>
</label><br><br>
<input id="radiodemo" checked type='radio' name="radiodemo">
<label for="radiodemo" class="checkable">Or me</span>
</code></pre>
<h2 id="select">Select</h2>
<pre><code class="lang-html"><select>
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
</code></pre>
<h2 id="stack">Stack</h2>
<p>A vertical group of different elements.</p>
<pre><code class="lang-html"><span class="button stack icon-picture">Home</span>
<span class="button stack icon-puzzle">Plugins</span>
<span class="button stack icon-file-code">Documentation</span>
<span class="button stack icon-help-circled">Test</span>
</code></pre>
<p>They can also toggle:</p>
<pre><code class="lang-html"><div>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-picture"></span> Home
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-puzzle"></span> Plugins
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-file-code"></span> Documentation
</span>
</label>
<label class="stack">
<input name="stack" type="radio">
<span class="button toggle">
<span class="icon-help-circled"></span> Test
</span>
</label>
</div>
</code></pre>
<p>Stack different kind of elements</p>
<pre><code class="lang-html"><div class="third">
<img class="stack" src="/web/img/forest.jpg">
<a class="button stack">Full size</a>
</div>
</code></pre>
<p>A small form</p>
<pre><code class="lang-html"><div class="third">
<input class="stack" placeholder="Name" />
<input class="stack" placeholder="Email" />
<button class="stack icon-paper-plane">
Send
</button>
</div>
</code></pre>
<p>Pseudo buttons:</p>
<pre><code class="lang-html"><a class="stack pseudo button">First</a>
<a class="stack pseudo button">Second</a>
<a class="stack pseudo button">Third</a>
</code></pre>
<h3 id="forms">Forms</h3>
<p>Create nice and packed forms. <a href="http://jsfiddle.net/ddmv3dsr/4/">jsfiddle</a></p>
<pre><code class="lang-html"><div class="third">
<input class="stack" placeholder="First name" />
<input class="stack" placeholder="Last name" />
<input class="stack" placeholder="Email" />
</div><br>
<div class="third">
<input class="stack" placeholder="Password" />
<input class="stack" placeholder="Repeat password" />
<textarea class="stack" placeholder="Biography"></textarea>
<button class="stack icon-paper-plane">Send</button>
</div>
</code></pre>
<h2 id="table">Table</h2>
<pre><code class="lang-html"><table class="primary">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Francisco</td>
<td>Valencia, Spain</td>
</tr>
<tr>
<td>Eve</td>
<td>San Francisco, USA</td>
</tr>
<tr>
<td>Martin</td>
<td>New York, USA</td>
</tr>
<tr>
<td>Sarah</td>
<td>London, UK</td>
</tr>
</tbody>
</table>
</code></pre>
<h2 id="tabs">Tabs</h2>
<blockquote>
<p>Original: <a href="http://jsfiddle.net/franciscop/wwfby2y8/">http://jsfiddle.net/franciscop/wwfby2y8/</a></p>
</blockquote>
<p>A simple tab system inspired by <a href="www.felipefialho.com/css-components/#component-tab">Components CSS Tabs</a>.</p>
<pre><code class="lang-html"><div class="tabs three">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Forest</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Lake</label>
<input id='tab-3' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-3">Balloon</label>
<div class="row">
<div>
<img src="web/img/forest.jpg">
</div>
<div>
<img src="web/img/lake.jpg">
</div>
<div>
<img src="web/img/balloon.jpg">
</div>
</div>
</div>
</code></pre>
<h3 id="gallery-example">Gallery example</h3>
<p>Create a gallery super-easy with thumbnails as tabs:</p>
<pre><code class="lang-html"><div class="tabs four">
<input id="tabC-1" type='radio' name='tabGroupC' checked >
<input id="tabC-2" type='radio' name='tabGroupC'>
<input id="tabC-3" type='radio' name='tabGroupC'>
<input id="tabC-4" type='radio' name='tabGroupC'>
<div class='row'>
<div>
<img src="web/img/forest.jpg">
</div>
<div>
<img src="web/img/lake.jpg">
</div>
<div>
<img src="web/img/halong.jpg">
</div>
<div>
<img src="web/img/balloon.jpg">
</div>
</div>
<label for="tabC-1"><img src="web/img/forest.jpg"></label>
<label for="tabC-2"><img src="web/img/lake.jpg"></label>
<label for="tabC-3"><img src="web/img/halong.jpg"></label>
<label for="tabC-4"><img src="web/img/balloon.jpg"></label>
</div>
</code></pre>
<h2 id="tooltip">Tooltip</h2>
<p>Hover this element to show the tooltip:</p>
<pre><code class="lang-html"><button data-tooltip="This is a great tooltip" class="tooltip-top">
Hover for tooltip
</button>
</code></pre>
<h3 id="positions">Positions</h3>
<pre><code class="lang-html"><button data-tooltip="This is a great tooltip" class="tooltip-top">
Top
</button>
<button data-tooltip="This is a great tooltip">
Bottom (default)
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-left">
Left
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-right">
Right
</button>
</code></pre>
</article></section></main><script src="https://cdn.jsdelivr.net/umbrella/2.6/umbrella.min.js"></script><script src="web/prism.js">/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */</script><script>u('h2[id]').each(function(node){
u(node).attr('id', u(node).attr('id').replace(/-/g, ''));
});
u('aside .links').append(function(node){
return u('<div>').append(u('<a>')
.addClass('pseudo button')
.attr('href', '#' + node.id)
.html(node.innerHTML));
}, u('article h2'));
u('pre .lang-html').each(function(node){
// The <div> is needed because otherwise, `.before()` removes whitespaces
u(node).parent().before(u('<div>').html(u(node).parent().text()));
});
u('pre .lang-css').each(function(node){
u(node).parent().before(u('<style>').html(u(node).parent().text()));
});
u('aside a').on('click', function(e){
try {
var to = u(e.currentTarget).attr('href');
u(to).first().scrollIntoView({behavior: "smooth"});
e.preventDefault();
history.replaceState(null, '', to);
} catch(err) {}
});
u([window]).on('scroll', function(){
var top = this.scrollY || document.documentElement.scrollTop;
u('.top').toggleClass('visible', top > 1000);
}).trigger('scroll');</script><script>window.onload = function(){
// Dropimage handler
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
img.onchange = function(e){
var inputfile = this, reader = new FileReader();
reader.onloadend = function(){
inputfile.style['background-image'] = 'url('+reader.result+')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
};
</script><script src="/web/tracking.js" defer async></script></body></html>