Skip to content

Commit a595f5e

Browse files
author
mrmrs
committed
Add components directory
1 parent 798275a commit a595f5e

File tree

3 files changed

+999
-0
lines changed

3 files changed

+999
-0
lines changed

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

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

0 commit comments

Comments
 (0)