Skip to content

Commit c10f885

Browse files
author
mrmrs
committed
Add some more components.
1 parent 5a50a2f commit c10f885

File tree

6 files changed

+648
-32
lines changed

6 files changed

+648
-32
lines changed

‎components/articles/title-text-image/index.html

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>TACHYONS - Articles Title Text Image</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+
<article class="pa3 pa5-ns">
20+
<h1 class="f2">Title Text with Image</h1>
21+
<img src="/img/space.jpg" class="w-100 f5 measure">
22+
<p class="measure lh-copy">
23+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
24+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
25+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
26+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
27+
</p>
28+
<p class="measure lh-copy">
29+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
30+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
31+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
32+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
33+
</p>
34+
</article>
35+
36+
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
37+
<h2 class="f5">Module CSS Stats</h2>
38+
<dl class="dib mr4">
39+
<dt class="db f6">Size (Gzipped)</dt>
40+
<dd class="ml0 b f3 f2-ns">327</dd>
41+
</dl>
42+
<dl class="dib mr4">
43+
<dt class="db f6">Selectors</dt>
44+
<dd class="ml0 b f3 f2-ns">29</dd>
45+
</dl>
46+
<dl class="dib">
47+
<dt class="db f6">Declarations</dt>
48+
<dd class="ml0 b f3 f2-ns">29</dd>
49+
</dl>
50+
51+
52+
<h2 class="f5">HTML</h2>
53+
54+
<pre class="pa3 ba br2 b--black-05">
55+
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
56+
&lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
57+
&lt;img src=&quot;/img/space.jpg&quot; class=&quot;w-100 f5 measure&quot;&gt;
58+
&lt;p class=&quot;measure lh-copy&quot;&gt;
59+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
60+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
61+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
62+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
63+
&lt;/p&gt;
64+
&lt;p class=&quot;measure lh-copy&quot;&gt;
65+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
66+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
67+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
68+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
69+
&lt;/p&gt;
70+
&lt;/article&gt;
71+
72+
</pre>
73+
<h4>CSS</h4>
74+
<pre class="pa3 ba br2 b--black-05">
75+
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
76+
.lh-copy{ line-height:1.6; }
77+
.w-100{ width:100%; }
78+
.pa3{ padding:1rem; }
79+
.f2{ font-size:2.25rem; }
80+
.f5{ font-size:1rem; }
81+
.measure{
82+
max-width:30em;
83+
}
84+
.measure-narrow{
85+
max-width:20em;
86+
}
87+
@media screen and (min-width: 48em){
88+
.lh-copy-ns{ line-height:1.6; }
89+
.w-100-ns{ width:100%; }
90+
.pa3-ns{ padding:1rem; }
91+
.pa5-ns{ padding:4rem; }
92+
.f2-ns{ font-size:2.25rem; }
93+
.f5-ns{ font-size:1rem; }
94+
.measure-ns{ max-width:30em; }
95+
.measure-narrow-ns{ max-width:20em; } }
96+
@media screen and (min-width: 48em) and (max-width: 64em){
97+
.lh-copy-m{ line-height:1.6; }
98+
.w-100-m{ width:100%; }
99+
.pa3-m{ padding:1rem; }
100+
.f2-m{ font-size:2.25rem; }
101+
.f5-m{ font-size:1rem; }
102+
.measure-m{ max-width:30em; }
103+
.measure-narrow-m{ max-width:20em; } }
104+
@media screen and (min-width: 64em){
105+
.lh-copy-l{ line-height:1.6; }
106+
.w-100-l{ width:100%; }
107+
.pa3-l{ padding:1rem; }
108+
.f2-l{ font-size:2.25rem; }
109+
.f5-l{ font-size:1rem; }
110+
.measure-l{ max-width:30em; }
111+
.measure-narrow-l{ max-width:20em; } }
112+
113+
</pre>
114+
115+
<h2 class="f5 mt5">Modules</h2>
116+
<ul class="list pl0 cf lh-copy mw7">
117+
118+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
119+
120+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-widths">tachyons-widths</a></li>
121+
122+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
123+
124+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
125+
126+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-typography">tachyons-typography</a></li>
127+
128+
</ul>
129+
130+
131+
132+
133+
134+
<h4 class="mt5">Install these modules via npm</h4>
135+
<code>npm i --save tachyons-line-height tachyons-widths tachyons-spacing tachyons-type-scale tachyons-typography</code>
136+
</section>
137+
</main>
138+
139+
140+
141+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
142+
<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;">
143+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
144+
<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"/>
145+
</svg>
146+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
147+
</a>
148+
<article>
149+
<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>
150+
<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>
151+
</article>
152+
153+
<p>
154+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
155+
Join our Slack Channel
156+
</a>
157+
<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!">
158+
Open an Issue
159+
</a>
160+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
161+
GitHub
162+
</a>
163+
</p>
164+
<p class="measure copy lh-copy">
165+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
166+
question in our slack channel. We're here to try and help make designing in
167+
the browser fun.
168+
</p>
169+
<small class="f6 measure db lh-copy mt5">
170+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
171+
that always moves faster than light.
172+
The word comes from the Greek:
173+
<br> <br>
174+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
175+
</small>
176+
</footer>
177+
178+
<script>
179+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
180+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
181+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
182+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
183+
184+
ga('create', 'UA-55773803-1', 'auto');
185+
ga('send', 'pageview');
186+
187+
</script>
188+
189+
</body>
190+
</html>
191+
192+

‎components/layout/flag-object/index.html

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>TACHYONS - Layout Flag Object</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+
<div class="dt mw6 center ppv4 pv5-m pv6-ns">
20+
<div class="dtc v-mid">
21+
<img src="/img/super-wide.jpg" alt="A bright blue sky" class="mw5" />
22+
</div>
23+
<div class="dtc v-mid pl3">
24+
<p class="lh-copy">
25+
This text is vertically aligned middle, no matter what the height of the image is.
26+
</p>
27+
</div>
28+
</div>
29+
30+
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
31+
<h2 class="f5">Module CSS Stats</h2>
32+
<dl class="dib mr4">
33+
<dt class="db f6">Size (Gzipped)</dt>
34+
<dd class="ml0 b f3 f2-ns">487</dd>
35+
</dl>
36+
<dl class="dib mr4">
37+
<dt class="db f6">Selectors</dt>
38+
<dd class="ml0 b f3 f2-ns">47</dd>
39+
</dl>
40+
<dl class="dib">
41+
<dt class="db f6">Declarations</dt>
42+
<dd class="ml0 b f3 f2-ns">50</dd>
43+
</dl>
44+
45+
46+
<h2 class="f5">HTML</h2>
47+
48+
<pre class="pa3 ba br2 b--black-05">
49+
&lt;div class=&quot;dt mw6 center ppv4 pv5-m pv6-ns&quot;&gt;
50+
&lt;div class=&quot;dtc v-mid&quot;&gt;
51+
&lt;img src=&quot;/img/super-wide.jpg&quot; alt=&quot;A bright blue sky&quot; class=&quot;mw5&quot; /&gt;
52+
&lt;/div&gt;
53+
&lt;div class=&quot;dtc v-mid pl3&quot;&gt;
54+
&lt;p class=&quot;lh-copy&quot;&gt;
55+
This text is vertically aligned middle, no matter what the height of the image is.
56+
&lt;/p&gt;
57+
&lt;/div&gt;
58+
&lt;/div&gt;
59+
60+
</pre>
61+
<h4>CSS</h4>
62+
<pre class="pa3 ba br2 b--black-05">
63+
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
64+
.dt{ display:table; }
65+
.dtc{ display:table-cell; }
66+
.dt-row{ display:table-row; }
67+
.dt-row-group{ display:table-row-group; }
68+
.dt-column{ display:table-column; }
69+
.dt-column-group{ display:table-column-group; }
70+
.lh-copy{ line-height:1.6; }
71+
.mw5{ max-width:16rem; }
72+
.mw6{ max-width:32rem; }
73+
.pl3{ padding-left:1rem; }
74+
75+
.center{
76+
margin-right:auto;
77+
margin-left:auto;
78+
}
79+
.v-mid{ vertical-align:middle; }
80+
@media screen and (min-width: 48em){
81+
.dt-ns{ display:table; }
82+
.dtc-ns{ display:table-cell; }
83+
.dt-row-ns{ display:table-row; }
84+
.dt-row-group-ns{ display:table-row-group; }
85+
.dt-column-ns{ display:table-column; }
86+
.dt-column-group-ns{ display:table-column-group; }
87+
.lh-copy-ns{ line-height:1.6; }
88+
.mw5-ns{ max-width:16rem; }
89+
.mw6-ns{ max-width:32rem; }
90+
.pl3-ns{ padding-left:1rem; }
91+
.pv6-ns{ padding-top:8rem; padding-bottom:8rem; }
92+
.v-mid-ns{ vertical-align:middle; } }
93+
@media screen and (min-width: 48em) and (max-width: 64em){
94+
.dt-m{ display:table; }
95+
.dtc-m{ display:table-cell; }
96+
.dt-row-m{ display:table-row; }
97+
.dt-row-group-m{ display:table-row-group; }
98+
.dt-column-m{ display:table-column; }
99+
.dt-column-group-m{ display:table-column-group; }
100+
.lh-copy-m{ line-height:1.6; }
101+
.mw5-m{ max-width:16rem; }
102+
.mw6-m{ max-width:32rem; }
103+
.pl3-m{ padding-left:1rem; }
104+
.pv5-m{ padding-top:4rem; padding-bottom:4rem; }
105+
.v-mid-m{ vertical-align:middle; } }
106+
@media screen and (min-width: 64em){
107+
.dt-l{ display:table; }
108+
.dtc-l{ display:table-cell; }
109+
.dt-row-l{ display:table-row; }
110+
.dt-row-group-l{ display:table-row-group; }
111+
.dt-column-l{ display:table-column; }
112+
.dt-column-group-l{ display:table-column-group; }
113+
.lh-copy-l{ line-height:1.6; }
114+
.mw5-l{ max-width:16rem; }
115+
.mw6-l{ max-width:32rem; }
116+
.pl3-l{ padding-left:1rem; }
117+
.v-mid-l{ vertical-align:middle; } }
118+
119+
</pre>
120+
121+
<h2 class="f5 mt5">Modules</h2>
122+
<ul class="list pl0 cf lh-copy mw7">
123+
124+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
125+
126+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
127+
128+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-max-widths">tachyons-max-widths</a></li>
129+
130+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
131+
132+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-utilities">tachyons-utilities</a></li>
133+
134+
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-vertical-align">tachyons-vertical-align</a></li>
135+
136+
</ul>
137+
138+
139+
140+
141+
142+
<h4 class="mt5">Install these modules via npm</h4>
143+
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
144+
</section>
145+
</main>
146+
147+
148+
149+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
150+
<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;">
151+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
152+
<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"/>
153+
</svg>
154+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
155+
</a>
156+
<article>
157+
<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>
158+
<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>
159+
</article>
160+
161+
<p>
162+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
163+
Join our Slack Channel
164+
</a>
165+
<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!">
166+
Open an Issue
167+
</a>
168+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
169+
GitHub
170+
</a>
171+
</p>
172+
<p class="measure copy lh-copy">
173+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
174+
question in our slack channel. We're here to try and help make designing in
175+
the browser fun.
176+
</p>
177+
<small class="f6 measure db lh-copy mt5">
178+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
179+
that always moves faster than light.
180+
The word comes from the Greek:
181+
<br> <br>
182+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
183+
</small>
184+
</footer>
185+
186+
<script>
187+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
188+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
189+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
190+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
191+
192+
ga('create', 'UA-55773803-1', 'auto');
193+
ga('send', 'pageview');
194+
195+
</script>
196+
197+
</body>
198+
</html>
199+
200+

0 commit comments

Comments
 (0)