Skip to content

Commit 562f1d9

Browse files
author
mrmrs
committed
Add flag-object collapse component
1 parent c10f885 commit 562f1d9

File tree

4 files changed

+415
-0
lines changed

4 files changed

+415
-0
lines changed

‎components/grids/two-column/index.html

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

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

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

0 commit comments

Comments
 (0)