forked from felipefialho/css-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (115 loc) · 16.6 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
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="format-detection" content="telephone=no"><meta name="viewport" content="width=device-width"><meta name="description" content="A set of common UI Components using the power of CSS and without Javascript."><meta name="keywords" content="components, css, pure css, javascript, modal, tab, accordion, carousel, dropdown"><title>Pure CSS Components</title><link rel="shortcut icon" href="assets/img/ico/favicon.ico"><link rel="stylesheet" href="assets/css/style.css"></head><body><header class="header" role="header"><div class="container"><h1 class="logo" role="logo"><a href="index.html">Pure CSS Components</a></h1></div></header><div class="main container" role="main"><div class="page-header"><h1>Pure CSS Components</h1><p>A set of common UI Components using the power of CSS and without Javascript.</p><pre class="code"><code class="prettyprint">bower install css-components</code></pre><a class="btn btn-big" href="https://github.com/LFeh/css-components/"><span class="icon-github" aria-hidden="true"></span> Fork me!</a> <a class="btn btn-primary btn-big" href="build/css-components.zip">Full Download</a></div><div class="components"><nav class="navbar-list"><ul class="nav-list"><li><a class="btn" href="#component-carousel">Carousel</a></li><li><a class="btn" href="#component-collapse">Collapse</a></li><li><a class="btn" href="#component-dropdown">Dropdown</a></li><li><a class="btn" href="#component-modal">Modal</a></li><li><a class="btn" href="#component-tab">Tab</a></li><li><a class="btn" href="#component-tooltip">Tooltip</a></li></ul></nav><div class="inner"><section class="content"><h1 id="component-carousel">Carousel</h1><p>The Carousel works fine!</p><p><strong>NOTE</strong>: to add new items it is necessary to make changes in the CSS, this might require some additional work.</p><a class="btn btn-primary" href="build/carousel.zip">Download</a><h6>Example</h6><div class="example-box"><div class="carousel"><div class="carousel-inner"><input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"><div class="carousel-item"><img src="http://fakeimg.pl/2000x800/222/fff/?text=Very nice :D"></div><input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""><div class="carousel-item"><img src="http://fakeimg.pl/2000x800/070060/fff/?text=Good move!"></div><input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""><div class="carousel-item"><img src="http://fakeimg.pl/2000x800/600000/fff/?text=CSS is Life"></div><label for="carousel-3" class="carousel-control prev control-1">‹</label><label for="carousel-2" class="carousel-control next control-1">›</label><label for="carousel-1" class="carousel-control prev control-2">‹</label><label for="carousel-3" class="carousel-control next control-2">›</label><label for="carousel-2" class="carousel-control prev control-3">‹</label><label for="carousel-1" class="carousel-control next control-3">›</label><ol class="carousel-indicators"><li><label for="carousel-1" class="carousel-bullet">•</label></li><li><label for="carousel-2" class="carousel-bullet">•</label></li><li><label for="carousel-3" class="carousel-bullet">•</label></li></ol></div></div></div><pre class="code"><code class="prettyprint"><!-- Carousel -->
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked>
<div class="carousel-item">
...
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden>
<div class="carousel-item">
...
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden>
<div class="carousel-item">
...
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li><label for="carousel-1" class="carousel-bullet">•</label></li>
<li><label for="carousel-2" class="carousel-bullet">•</label></li>
<li><label for="carousel-3" class="carousel-bullet">•</label></li>
</ol>
</div>
</div>
</code></pre></section><section class="content"><h1 id="component-collapse">Collapse</h1><p>The "Collapse" component can be used in two ways: one that opens each element that is clicked OR like an accordion, where only the last clicked element remains open.</p><a href="build/collapse.zip" class="btn btn-primary">Download</a><h6>Example</h6><div class="example-box"><div class="collapse"><ul class="collapse-list"><li><label class="collapse-btn" for="collapse-1">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="checkbox" id="collapse-1" aria-hidden="true" hidden=""><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li><li><label class="collapse-btn" for="collapse-2">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="checkbox" id="collapse-2" aria-hidden="true" hidden=""><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li><li><label class="collapse-btn" for="collapse-3">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="checkbox" id="collapse-3" aria-hidden="true" hidden=""><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li></ul></div></div><pre class="code"><code class="prettyprint"><!-- Collapse -->
<div class="collapse">
<label class="collapse-open" for="collapse-1">Lorem ipsum dolor sit amet</label>
<input class="collapse-open" type="checkbox" id="collapse-1" aria-hidden="true" hidden />
<div class="collapse-content">
<div class="collapse-inner">
...
</div>
</div>
</div></code></pre><h2>With Accordion</h2><h6>Example</h6><div class="example-box"><div class="collapse"><ul class="collapse-list"><li><label class="collapse-btn" for="accordion-1">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="radio" id="accordion-1" name="accordion" aria-hidden="true" hidden="" checked="checked"><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li><li><label class="collapse-btn" for="accordion-2">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="radio" id="accordion-2" name="accordion" aria-hidden="true" hidden=""><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li><li><label class="collapse-btn" for="accordion-3">Lorem ipsum dolor sit amet</label><input class="collapse-open" type="radio" id="accordion-3" name="accordion" aria-hidden="true" hidden=""><div class="collapse-painel"><div class="collapse-inner"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.</p></div></div></li></ul></div></div><pre class="code"><code class="prettyprint"><!-- Collapse -->
<div class="collapse">
<label class="collapse-open" for="accordion-1">Lorem ipsum dolor sit amet</label>
<input class="collapse-open" type="radio" id="accordion-1" name="accordion" aria-hidden="true" hidden checked />
<div class="collapse-content">
<div class="collapse-inner">
...
</div>
</div>
</div></code></pre></section><section class="content"><h1 id="component-dropdown">Dropdown</h1><p>The Dropdown can be used in two ways: click or hover.</p><a href="build/dropdown.zip" class="btn btn-primary">Download</a><h6>Example</h6><div class="example-box"><div class="dropdown"><label class="btn btn-dropdown" for="dropdown-1">One Dropdown</label><input class="dropdown-open" type="checkbox" id="dropdown-1" aria-hidden="true" hidden=""><label class="dropdown-overlay" for="dropdown-1"></label><div class="dropdown-inner"><ul class="nav-list"><li><a class="btn" href="#">This is nice!</a></li><li><a class="btn" href="#">Good example</a></li></ul></div></div></div><pre class="code"><code class="prettyprint"><!-- Dropdown -->
<div class="dropdown">
<label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>
<input class="dropdown-open" type="checkbox" id="dropdown-1" aria-hidden="true" hidden />
<label for="dropdown-1" class="dropdown-overlay"></label>
<div class="dropdown-inner">
...
</div>
</div></code></pre><h2>With hover</h2><h6>Example</h6><div class="example-box"><div class="dropdown dropdown-hover"><span class="btn btn-dropdown">One Dropdown</span><div class="dropdown-inner"><ul class="nav-list"><li><a class="btn" href="#">This is nice!</a></li><li><a class="btn" href="#">Good example</a></li></ul></div></div></div><pre class="code"><code class="prettyprint"><!-- Dropdown with hover -->
<div class="dropdown">
<label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>
<input class="dropdown-open" type="checkbox" id="dropdown-1" name="dropdown-1" aria-hidden="true" hidden />
<div class="dropdown-inner">
...
</div>
</div></code></pre></section><section class="content"><h1 id="component-modal">Modal</h1><p>The Modal uses the <code><input hidden></code> technique and works fine! :D</p><p>It's possible close the modal by clicking on background.</p><a class="btn btn-primary" href="build/modal.zip">Download</a><h6>Example</h6><div class="example-box"><label class="btn" for="modal-one">Modal!</label></div><pre class="code"><code class="prettyprint"><label class="btn" for="modal-one">Example</a>
<!-- Modal One -->
<div class="modal">
<input class="modal-open" id="modal-one" type="checkbox" hidden>
<div class="modal-wrap" aria-hidden="true" role="dialog">
<label class="modal-overlay" for="modal-one"></label>
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
<label class="btn-close" for="modal-one" aria-hidden="true">×</label>
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
<label class="btn btn-primary" for="modal-one">Nice!</label>
</div>
</div>
</div>
</div></code></pre></section><section class="content"><h1 id="component-tab">Tab</h1><p>The "tab" component presents an interesting behavior and could be used without any issues. You do not need any special adaptation in the CSS.</p><a class="btn btn-primary" href="build/tab.zip">Download</a><h6>Example</h6><div class="example-box"><div class="tab"><div class="tab-painel"><input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" checked="checked"><label class="tab-nav" for="tab-1">Tab 1</label><div class="tab-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.</div></div><div class="tab-painel"><input class="tab-open" id="tab-2" name="tab-wrap-1" type="radio"><label class="tab-nav" for="tab-2">Tab 2</label><div class="tab-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.</div></div><div class="tab-painel"><input class="tab-open" id="tab-3" name="tab-wrap-1" type="radio"><label class="tab-nav" for="tab-3">Tab 3</label><div class="tab-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.</div></div></div></div><pre class="code"><code class="prettyprint"><!-- Tab -->
<div class="tab">
<!-- Tab Painel -->
<div class="tab-painel">
<input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" checked>
<label class="tab-nav" for="tab-1">Tab 1</label>
<div class="tab-inner">
...
</div>
</div>
<div class="tab-painel">
<input class="tab-open" id="tab-2" name="tab-wrap-1" type="radio">
<label class="tab-nav" for="tab-2">Tab 2</label>
<div class="tab-inner">
...
</div>
</div>
<div class="tab-painel">
<input class="tab-open" id="tab-3" name="tab-wrap-1" type="radio" >
<label class="tab-nav" for="tab-3">Tab 3</label>
<div class="tab-inner">
...
</div>
</div>
</div></code></pre></section><section class="content"><h1 id="component-tooltip">Tooltip</h1><p>By <a href="https://github.com/deividmarques">Deivid Marques</a></p><p>Tooltip displayed with hover or focus only css. Wai-aria was used which leaves the element accessible for screen readers.</p><a class="btn btn-primary" href="build/tooltip.zip">Download</a><h6>Example</h6><div class="example-box"><a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="content displayed over ">Top</a> <a href="#component-tooltip" role="tooltip" class="tooltip-right btn" aria-label="content displayed to the right">Right</a> <a href="#component-tooltip" role="tooltip" class="tooltip-bottom btn" aria-label="content displayed below ">Bottom</a> <a href="#component-tooltip" role="tooltip" class="tooltip-left btn" aria-label="content displayed to the left ">Left</a></div><pre class="code"><code class="prettyprint"><!-- Tooltip -->
<a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="content displayed over ">Top</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-right btn" aria-label="content displayed to the right">Right</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-bottom btn" aria-label="content displayed below ">Bottom</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-left btn" aria-label="content displayed to the left ">Left</a>
</code></pre></section></div></div></div><footer class="footer"><p>Made with <b>CSS</b> and <span class="icon-love">♥</span> by <a href="http://www.felipefialho.com/">Luiz Felipe Tartarotti Fialho</a></p></footer><div class="modal"><input class="modal-open" id="modal-one" type="checkbox" hidden=""><div class="modal-wrap" aria-hidden="true" role="dialog"><label class="modal-overlay" for="modal-one"></label><div class="modal-dialog"><div class="modal-header"><h2>Modal in CSS?</h2><label class="btn-close" for="modal-one" aria-hidden="true">×</label></div><div class="modal-body"><p>One modal example here! :D</p></div><div class="modal-footer"><label class="btn btn-primary" for="modal-one">Nice!</label></div></div></div></div><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40410936-2', 'felipefialho.com');
ga('send', 'pageview');</script></body></html>