Skip to content

Commit b80d0ca

Browse files
author
mrmrs
committed
Update components with new nav
1 parent 2cd8a1e commit b80d0ca

File tree

11 files changed

+484
-0
lines changed

11 files changed

+484
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
160160

161161
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
162162

163+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
164+
163165
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
164166

165167
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
142142

143143
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
144144

145+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
146+
145147
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
146148

147149
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
134134

135135
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
136136

137+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
138+
137139
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
138140

139141
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
196196

197197
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
198198

199+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
200+
199201
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
200202

201203
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
168168

169169
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
170170

171+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
172+
171173
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
172174

173175
</div>

‎components/layout/two-column-collapse-one/index.html

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>TACHYONS - Layout Two Column Collapse One</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-100 w-50-ns bg-near-white tc">
21+
<h1>Column One</h1>
22+
</div>
23+
<div class="fl w-100 w-50-ns bg-light-gray tc">
24+
<h1>Column Two</h1>
25+
</div>
26+
27+
</div>
28+
</article>
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">343</dd>
35+
</dl>
36+
<dl class="dib mr4">
37+
<dt class="db f6">Selectors</dt>
38+
<dd class="ml0 b f3 f2-ns">19</dd>
39+
</dl>
40+
<dl class="dib">
41+
<dt class="db f6">Declarations</dt>
42+
<dd class="ml0 b f3 f2-ns">23</dd>
43+
</dl>
44+
45+
46+
<h2 class="f5">HTML</h2>
47+
48+
<pre class="pa3 ba br2 b--black-05">
49+
&lt;article class=&quot;cf&quot;&gt;
50+
&lt;div class=&quot;fl w-100 w-50-ns bg-near-white tc&quot;&gt;
51+
&lt;h1&gt;Column One&lt;/h1&gt;
52+
&lt;/div&gt;
53+
&lt;div class=&quot;fl w-100 w-50-ns bg-light-gray tc&quot;&gt;
54+
&lt;h1&gt;Column Two&lt;/h1&gt;
55+
&lt;/div&gt;
56+
57+
&lt;/div&gt;
58+
&lt;/article&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+
65+
.cf:before,
66+
.cf:after{ content:" "; display:table; }
67+
.cf:after{ clear:both; }
68+
.cf{ *zoom:1; }
69+
70+
71+
72+
.fl{ float:left; display:inline; }
73+
.w-100{ width:100%; }
74+
.bg-light-gray{ background-color:#eee; }
75+
.bg-near-white{ background-color:#f4f4f4; }
76+
.tc{ text-align:center; }
77+
@media screen and (min-width: 48em){
78+
79+
.fl-ns{ float:left; display:inline; }
80+
81+
.w-50-ns{ width:50%; }
82+
83+
.w-100-ns{ width:100%; }
84+
85+
.tc-ns{ text-align:center; } }
86+
@media screen and (min-width: 48em) and (max-width: 64em){
87+
88+
.fl-m{ float:left; display:inline; }
89+
90+
.w-100-m{ width:100%; }
91+
92+
.tc-m{ text-align:center; } }
93+
@media screen and (min-width: 64em){
94+
95+
.fl-l{ float:left; display:inline; }
96+
97+
.w-100-l{ width:100%; }
98+
99+
.tc-l{ text-align:center; } }
100+
101+
</pre>
102+
103+
<h2 class="f5 mt5">Modules</h2>
104+
<ul class="list pl0 cf lh-copy mw7">
105+
106+
<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>
107+
108+
<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>
109+
110+
<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>
111+
112+
<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>
113+
114+
<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-text-align">tachyons-text-align</a></li>
115+
116+
</ul>
117+
118+
119+
120+
121+
<h4 class="mt5">Install these modules via npm</h4>
122+
<code>npm i --save tachyons-clearfix tachyons-floats tachyons-widths tachyons-skins tachyons-text-align</code>
123+
</section>
124+
<section class="ph3 ph5-ns bt b--black-10 mt5 pv4">
125+
<h1 class="f6 b ttu">Other Components</h1>
126+
127+
128+
<div>
129+
<h2 class="f5 mb2 ttc mid-gray">articles</h2>
130+
131+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Articles Title Text Image</a>
132+
133+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Articles Title Text</a>
134+
135+
</div>
136+
137+
<div>
138+
<h2 class="f5 mb2 ttc mid-gray">grids</h2>
139+
140+
<a class="f5 dib mr3 blue link dim fw6" href="/components/grids/two-column/index.html">Grids Two Column</a>
141+
142+
</div>
143+
144+
<div>
145+
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
146+
147+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object-collapse/index.html">Layout Flag Object Collapse</a>
148+
149+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/flag-object/index.html">Layout Flag Object</a>
150+
151+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Layout Two Column Collapse One</a>
152+
153+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Layout Two Column</a>
154+
155+
</div>
156+
157+
<div>
158+
<h2 class="f5 mb2 ttc mid-gray">nav</h2>
159+
160+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Nav Large Title Link List</a>
161+
162+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Nav Title Link List</a>
163+
164+
</div>
165+
166+
</section>
167+
</main>
168+
169+
170+
171+
172+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
173+
<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;">
174+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
175+
<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"/>
176+
</svg>
177+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
178+
</a>
179+
<article>
180+
<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>
181+
<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>
182+
</article>
183+
184+
<p>
185+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
186+
Join our Slack Channel
187+
</a>
188+
<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!">
189+
Open an Issue
190+
</a>
191+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
192+
GitHub
193+
</a>
194+
</p>
195+
<p class="measure copy lh-copy">
196+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
197+
question in our slack channel. We're here to try and help make designing in
198+
the browser fun.
199+
</p>
200+
<small class="f6 measure db lh-copy mt5">
201+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
202+
that always moves faster than light.
203+
The word comes from the Greek:
204+
<br> <br>
205+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
206+
</small>
207+
</footer>
208+
209+
<script>
210+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
211+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
212+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
213+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
214+
215+
ga('create', 'UA-55773803-1', 'auto');
216+
ga('send', 'pageview');
217+
218+
</script>
219+
220+
</body>
221+
</html>
222+
223+

0 commit comments

Comments
 (0)