Skip to content

Commit d81d4d8

Browse files
author
mrmrs
committed
Add footer component
1 parent 0c3ffd2 commit d81d4d8

File tree

2 files changed

+400
-0
lines changed

2 files changed

+400
-0
lines changed

‎components/footers/small-print/index.html

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>TACHYONS - Footers Small Print</title>
5+
<meta name="description" content="Tachyons Component">
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
8+
<meta name="author" content="@mrmrs">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<link rel="stylesheet" href="/css/tachyons.min.css">
11+
<style>
12+
.blue { color: #0074D9; }
13+
.bg-blue { background-color: #0074D9; }
14+
</style>
15+
16+
</head>
17+
<body class="w-100 sans-serif bg-white">
18+
<main>
19+
<footer class="pv4 ph3 ph5-m ph6-l mid-gray">
20+
<small class="f6 db tc">© 2016 <b class="ttu">SOME COMPANY Inc</b>., All Rights Reserved</small>
21+
<div class="tc mt3">
22+
<a href="#" class="f6 dib ph2 link mid-gray dim">Language</a>
23+
24+
<a href="#" class="f6 dib ph2 link mid-gray dim">Terms of Use</a>
25+
<a href="#" class="f6 dib ph2 link mid-gray dim">Privacy</a>
26+
</div>
27+
</footer>
28+
29+
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
30+
<h1 class="f4 f3-ns mt4">Small Print</h1>
31+
32+
<div class="cf">
33+
<div class="fl w-100 w-75-ns pr0 pr2-ns">
34+
<h2 class="f5">HTML</h2>
35+
<p class="f5 black-70"></p>
36+
<pre class="pa3 ba br2 b--black-05 h5" id="html">
37+
&lt;footer class=&quot;pv4 ph3 ph5-m ph6-l mid-gray&quot;&gt;
38+
&lt;small class=&quot;f6 db tc&quot;&gt;© 2016 &lt;b class=&quot;ttu&quot;&gt;SOME COMPANY Inc&lt;/b&gt;., All Rights Reserved&lt;/small&gt;
39+
&lt;div class=&quot;tc mt3&quot;&gt;
40+
&lt;a href=&quot;#&quot; class=&quot;f6 dib ph2 link mid-gray dim&quot;&gt;Language&lt;/a&gt;
41+
42+
&lt;a href=&quot;#&quot; class=&quot;f6 dib ph2 link mid-gray dim&quot;&gt;Terms of Use&lt;/a&gt;
43+
&lt;a href=&quot;#&quot; class=&quot;f6 dib ph2 link mid-gray dim&quot;&gt;Privacy&lt;/a&gt;
44+
&lt;/div&gt;
45+
&lt;/footer&gt;
46+
47+
</pre>
48+
</div>
49+
<div class="fl w-100 w-25-ns pl0 pl2-ns">
50+
<h2 class="f5">CSS</h2>
51+
<pre class="pa3 ba br2 b--black-05 h5" id="css">.db {
52+
display: block;
53+
}
54+
55+
.dib {
56+
display: inline-block;
57+
}
58+
59+
.link {
60+
text-decoration: none;
61+
transition: color .15s ease-in;
62+
}
63+
64+
.mid-gray {
65+
color: #555;
66+
}
67+
68+
.pv4 {
69+
padding-top: 2rem;
70+
padding-bottom: 2rem;
71+
}
72+
73+
.ph2 {
74+
padding-left: .5rem;
75+
padding-right: .5rem;
76+
}
77+
78+
.ph3 {
79+
padding-left: 1rem;
80+
padding-right: 1rem;
81+
}
82+
83+
.mt3 {
84+
margin-top: 1rem;
85+
}
86+
87+
.tc {
88+
text-align: center;
89+
}
90+
91+
.ttu {
92+
text-transform: uppercase;
93+
}
94+
95+
.f6 {
96+
font-size: .875rem;
97+
}
98+
99+
.dim {
100+
opacity: 1;
101+
transition: opacity .15s ease-in;
102+
}
103+
104+
@media screen and (min-width: 48em) and (max-width: 64em) {
105+
.ph5-m {
106+
padding-left: 4rem;
107+
padding-right: 4rem;
108+
}
109+
}
110+
111+
@media screen and (min-width: 64em) {
112+
.ph6-l {
113+
padding-left: 8rem;
114+
padding-right: 8rem;
115+
}
116+
}
117+
118+
</pre>
119+
</div>
120+
</div>
121+
<div class="cf">
122+
<div class="fl w-100 w-50-ns">
123+
<h2 class="f5 mt4">Modules referenced</h2>
124+
<ul class="list pl0 cf lh-copy mw7">
125+
126+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
127+
128+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-links">tachyons-links</a></li>
129+
130+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-skins">tachyons-skins</a></li>
131+
132+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
133+
134+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-text-align">tachyons-text-align</a></li>
135+
136+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-text-transform">tachyons-text-transform</a></li>
137+
138+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
139+
140+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-hovers">tachyons-hovers</a></li>
141+
142+
</ul>
143+
</div>
144+
<div class="fl w-100 w-50-ns pl0 pl4-ns">
145+
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
146+
<dl class="dib mr4 mt0">
147+
<dt class="db f6">Size (Gzipped)</dt>
148+
<dd class="ml0 b f3 f2-ns">326</dd>
149+
</dl>
150+
<dl class="dib mr4 mt0">
151+
<dt class="db f6">Selectors</dt>
152+
<dd class="ml0 b f3 f2-ns">14</dd>
153+
</dl>
154+
<dl class="dib mt0">
155+
<dt class="db f6">Declarations</dt>
156+
<dd class="ml0 b f3 f2-ns">21</dd>
157+
</dl>
158+
</div>
159+
</div>
160+
161+
162+
163+
164+
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
165+
<code class="f6">npm i --save tachyons-display tachyons-links tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale tachyons-hovers</code>
166+
<section class="bt b--black-10 mt5 pv4">
167+
<h1 class="f6 b ttu">Other Components</h1>
168+
169+
170+
<div>
171+
<h2 class="f5 mb2 ttc mid-gray">articles</h2>
172+
173+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Title Text Image</a>
174+
175+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Title Text</a>
176+
177+
</div>
178+
179+
<div>
180+
<h2 class="f5 mb2 ttc mid-gray">collections</h2>
181+
182+
<a class="f5 dib mr3 blue link dim fw6" href="/components/collections/product-card/index.html">Product Card</a>
183+
184+
</div>
185+
186+
<div>
187+
<h2 class="f5 mb2 ttc mid-gray">footers</h2>
188+
189+
<a class="f5 dib mr3 blue link dim fw6" href="/components/footers/small-print/index.html">Small Print</a>
190+
191+
</div>
192+
193+
<div>
194+
<h2 class="f5 mb2 ttc mid-gray">headers</h2>
195+
196+
<a class="f5 dib mr3 blue link dim fw6" href="/components/headers/circle-avatar-title-subtitle/index.html">Circle Avatar Title Subtitle</a>
197+
198+
</div>
199+
200+
<div>
201+
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
202+
203+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Flag Object Collapse</a>
204+
205+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Flag Object</a>
206+
207+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/four-column-collapse-two/index.html">Four Column Collapse Two</a>
208+
209+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Two Column Collapse One</a>
210+
211+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Two Column</a>
212+
213+
</div>
214+
215+
<div>
216+
<h2 class="f5 mb2 ttc mid-gray">nav</h2>
217+
218+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Large Title Link List</a>
219+
220+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Title Link List</a>
221+
222+
</div>
223+
224+
</section>
225+
</section>
226+
</main>
227+
228+
229+
230+
<script src="/js/highlight.min.js"></script>
231+
<script>
232+
hljs.highlightBlock(document.querySelector('#css'))
233+
hljs.highlightBlock(document.querySelector('#html'))
234+
</script>
235+
<style>
236+
/*
237+
238+
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
239+
240+
*/
241+
242+
.hljs {
243+
display: block;
244+
overflow-x: auto;
245+
padding: 0.5em;
246+
color: #333;
247+
background: #f8f8f8;
248+
}
249+
250+
.hljs-comment,
251+
.hljs-quote {
252+
color: #998;
253+
font-style: italic;
254+
}
255+
256+
.hljs-keyword,
257+
.hljs-selector-tag,
258+
.hljs-subst {
259+
color: #333;
260+
font-weight: bold;
261+
}
262+
263+
.hljs-number,
264+
.hljs-literal,
265+
.hljs-variable,
266+
.hljs-template-variable,
267+
.hljs-tag .hljs-attr {
268+
color: #008080;
269+
}
270+
271+
.hljs-string,
272+
.hljs-doctag {
273+
color: #d14;
274+
}
275+
276+
.hljs-title,
277+
.hljs-section,
278+
.hljs-selector-id {
279+
color: #900;
280+
font-weight: bold;
281+
}
282+
283+
.hljs-subst {
284+
font-weight: normal;
285+
}
286+
287+
.hljs-type,
288+
.hljs-class .hljs-title {
289+
color: #458;
290+
font-weight: bold;
291+
}
292+
293+
.hljs-tag,
294+
.hljs-name,
295+
.hljs-attribute {
296+
color: #000080;
297+
font-weight: normal;
298+
}
299+
300+
.hljs-regexp,
301+
.hljs-link {
302+
color: #009926;
303+
}
304+
305+
.hljs-symbol,
306+
.hljs-bullet {
307+
color: #990073;
308+
}
309+
310+
.hljs-built_in,
311+
.hljs-builtin-name {
312+
color: #0086b3;
313+
}
314+
315+
.hljs-meta {
316+
color: #999;
317+
font-weight: bold;
318+
}
319+
320+
.hljs-deletion {
321+
background: #fdd;
322+
}
323+
324+
.hljs-addition {
325+
background: #dfd;
326+
}
327+
328+
.hljs-emphasis {
329+
font-style: italic;
330+
}
331+
332+
.hljs-strong {
333+
font-weight: bold;
334+
}
335+
</style>
336+
337+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
338+
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
339+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
340+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
341+
</svg>
342+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
343+
</a>
344+
<article>
345+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
346+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
347+
</article>
348+
349+
<p>
350+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
351+
Join our Slack Channel
352+
</a>
353+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
354+
Open an Issue
355+
</a>
356+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
357+
GitHub
358+
</a>
359+
</p>
360+
<p class="measure copy lh-copy">
361+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
362+
question in our slack channel. We're here to try and help make designing in
363+
the browser fun.
364+
</p>
365+
<small class="f6 measure db lh-copy mt5">
366+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
367+
that always moves faster than light.
368+
The word comes from the Greek:
369+
<br> <br>
370+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
371+
</small>
372+
</footer>
373+
374+
<script>
375+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
376+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
377+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
378+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
379+
380+
ga('create', 'UA-55773803-1', 'auto');
381+
ga('send', 'pageview');
382+
383+
</script>
384+
385+
</body>
386+
</html>
387+
388+

0 commit comments

Comments
 (0)