Skip to content

Commit f1c6c05

Browse files
author
mrmrs
committed
Update some templates. Add links to some documentation of properties and
styles. Add some copy to homepage.
1 parent 6b3efbe commit f1c6c05

File tree

3 files changed

+71
-18
lines changed

3 files changed

+71
-18
lines changed

‎src/templates/docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main>
13-
<div class="ph3 ph5-ns">
13+
<div class="pv4 ph3 ph5-ns">
1414
<h1 class="f4">Docs</h1>
1515
</div>
1616
<%= navDocs %>

‎src/templates/index.html

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
class="pb2-ns f6 fw6 dim link white-80 mr1 mr3-m mr4-l dib">
2727
Features
2828
</a>
29-
<a title="Features" href="#testimonials"
29+
<a title="Testimonials" href="#testimonials"
3030
class="pb2-ns f6 fw6 dim link white-80 mr1 mr3-m mr4-l dib">
3131
Testimonials
3232
</a>
@@ -153,15 +153,53 @@ <h2 class="f4 f1-m f-headline-l fw6 mb0">Easy</h2>
153153
</section>
154154
<section class="cf" id="features">
155155
<h1 class="fl w-100 mt5 f5 ttu tracked fw6">Features</h1>
156+
<article class="pv2 fl w-100 ">
157+
<h2 class="f4 f1-ns fw6 mb0">Open source component library</h2>
158+
<p class="f5 f4-ns measure lh-copy mt0">
159+
There is a <a href="/components/" class="black dim"title="Tachyons components">growing library of open source components</a> written in static html that are easy
160+
to use as is, customize with your own theme, or port to a templating language.
161+
</p>
162+
</article>
156163
<div class="cf">
157164
<article class="pv2 fl w-100 w-50-l pr0 pr2-l">
158-
<h2 class="f4 f2-ns fw6 mb0">
159-
Runs on <a href="https://github.com/postcss/postcss" class="link dim near-black">Postcss</a>
160-
</h2>
161-
<p class="mv0 f5 lh-copy measure">
162-
A flexible plugin framework for post-processing css.
163-
<a href="https://github.com/postcss/postcss" class="link dn
164-
dim f6 db mid-gray">View on Github</a>
165+
<h2 class="f4 f2-ns fw6 mb0">Lightweight</h2>
166+
<p class="f5 measure lh-copy mt0">
167+
Less than 9.5kb minified and gzipped.
168+
</p>
169+
</article>
170+
<article class="pv2 fl w-100 w-50-l pl0 pl2-l">
171+
<h2 class="f4 f2-ns fw6 mb0">Documentation</h2>
172+
<p class="f5 measure lh-copy mt0">
173+
Each module is carefully documented. From stats about the size of the module,
174+
to how each css class will render to the screen.
175+
</p>
176+
</article>
177+
</div>
178+
<div class="cf">
179+
<article class="pv2 fl w-100 w-50-l pr0 pr2-l">
180+
<h2 class="f4 f2-ns fw6 mb0">Shallow Cascade</h2>
181+
<p class="f5 measure lh-copy mt0">
182+
Don't let the cascade slow you down. When you apply a class
183+
to an element, there is nothing in the cascade to override
184+
its effects. You get rapid feedback on how your css is
185+
affecting your markup without wasting time debugging why your
186+
styles are being overridden.
187+
</p>
188+
</article>
189+
<article class="pv2 fl w-100 w-50-l pl0 pl2-l">
190+
<h2 class="f4 f2-ns fw6 mb0">Low Specificty</h2>
191+
<p class="f5 measure lh-copy mt0">
192+
The majority of Tachyons selectors have a specificity of
193+
10. Tachyons won't override your existing styles. So feel
194+
free to lay it on top of your existing css.
195+
</p>
196+
</article>
197+
</div>
198+
<div class="cf">
199+
<article class="pv2 fl w-100 w-50-l pr0 pr2-l">
200+
<h2 class="f4 f2-ns fw6 mb0">Accessible Color Palette</h2>
201+
<p class="f5 measure lh-copy mt0">
202+
Over 280 accessible color combinations.
165203
</p>
166204
</article>
167205
<article class="pv2 fl w-100 w-50-l pl0 pl2-l">
@@ -208,6 +246,16 @@ <h2 class="f4 f2-ns fw6 mb0">Responsive Grid</h2>
208246
</div>
209247
<div class="cf">
210248
<article class="pv2 fl w-100 w-50-l pr0 pr2-l">
249+
<h2 class="f4 f2-ns fw6 mb0">
250+
Runs on <a href="https://github.com/postcss/postcss" class="link dim near-black">Postcss</a>
251+
</h2>
252+
<p class="mv0 f5 lh-copy measure">
253+
A flexible plugin framework for post-processing css.
254+
<a href="https://github.com/postcss/postcss" class="link dn
255+
dim f6 db mid-gray">View on Github</a>
256+
</p>
257+
</article>
258+
<article class="pv2 fl w-100 w-50-l pl0 pl2-l">
211259
<h2 class="f4 f2-ns fw6 mb0">
212260
Easy to Customize and extend
213261
</h2>
@@ -228,7 +276,7 @@ <h2 class="f4 f2-ns fw6 mb0">
228276
<h1 class="f5 fw6 ttu tracke">Testimonials</h1>
229277
<div class="cf w-100">
230278
<blockquote class="fl w-100 mh0 pa3 pa4-l mb2 mb5-ns border-box bg-near-white">
231-
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure i lh-copy">
279+
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure i lh-copy">
232280
<b>
233281
Here’s why I think designing systems with tools/frameworks like <a href="//tachyons.io">Tachyons</a>
234282
is a Good Idea™.

‎src/templates/nav_docs.html

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<div class="ph3 ph5-ns pt3 pb5">
2-
<section>
3-
<h2 class="f6 fw7 ttu tracked">Elements</h2>
4-
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="View images documentation">Images</a>
5-
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="View links documentation">Links</a>
6-
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="View lists documentation">Lists</a>
7-
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="View forms documentation">Forms</a>
8-
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/tables/" title="View tables module documentation">Tables</a>
2+
<article>
3+
<h2 class="f6 fw7 ttu tracked">Overview of Tachyons</h2>
4+
<a class="f5 fw4 dim link blue db pv1" href="/docs/table-of-styles/images/" title="View a list of styles">Table of Styles</a>
5+
<a class="f5 fw4 dim link blue db pv1" href="/docs/table-of-properties/" title="View a list of properties">Table of Properties</a>
6+
</article>
7+
<article>
8+
<h2 class="f6 fw7 ttu tracked">Elements</h2>
9+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="View images documentation">Images</a>
10+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="View links documentation">Links</a>
11+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="View lists documentation">Lists</a>
12+
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="View forms documentation">Forms</a>
13+
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/tables/" title="View tables module documentation">Tables</a>
14+
</article>
915
<section class="cf w-100 mt3">
1016
<article class="fn fl-ns w-100 w-25-l">
1117
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
@@ -46,5 +52,4 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
4652
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/opacity/" title="Opacity Documentation">Opacity</a>
4753
</article>
4854
</section>
49-
</section>
5055
</div>

0 commit comments

Comments
 (0)