Skip to content

Commit 89a3285

Browse files
author
mrmrs
committed
New paint on some of the docs
1 parent ace94f2 commit 89a3285

File tree

20 files changed

+287
-80
lines changed

20 files changed

+287
-80
lines changed

‎src/templates/docs/background-size/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-20 ph3 pt3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/skins/" title="Skins">Skins</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
17+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/background-size/" title="Background size">Background Size</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/borders/" title="Borders">Borders</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/opacity/" title="Opacity">Opacity</a>
22+
</div>
23+
</header>
24+
<article class="pa3 ph5-ns">
1425
<h3 class="f6 ttu tracked mt0">Background Size</h3>
1526
<p class="measure f6 f5-ns lh-copy pb4 mt0">
1627
Background-size affects how background images fill their containing elements.

‎src/templates/docs/border-radius/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/skins/" title="Skins">Skins</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/background-size/" title="Background size">Background Size</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/borders/" title="Borders">Borders</a>
19+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/opacity/" title="Opacity">Opacity</a>
22+
</div>
23+
</header>
24+
<article class="pa3 ph5-ns">
1425
<h3 class="f6 ttu tracked mt0">Border Radius</h3>
1526
<p class="measure f4 lh-copy">
1627
There is a four step scale for border radius in addition to a utility

‎src/templates/docs/borders/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/skins/" title="Skins">Skins</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/background-size/" title="Background size">Background Size</a>
18+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/borders/" title="Borders">Borders</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/opacity/" title="Opacity">Opacity</a>
22+
</div>
23+
</header>
24+
<article class="pa3 ph5-ns">
1425
<h3 class="f6 ttu tracked mt0">Borders</h3>
1526
<p class="measure f4 lh-copy">
1627
There is a base border module that can be extended with the

‎src/templates/docs/box-shadow/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/skins/" title="Skins">Skins</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/background-size/" title="Background size">Background Size</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/borders/" title="Borders">Borders</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
20+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/opacity/" title="Opacity">Opacity</a>
22+
</div>
23+
</header>
24+
<article class="pa3 ph5-ns">
1425
<h3 class="f6 ttu tracked mt0">Box Shadow</h3>
1526
<p class="measure lh-copy f5 f4-ns">
1627
This module provides several options for box-shadow. Feel free to customize if

‎src/templates/docs/font-family/index.html

+37-29
Original file line numberDiff line numberDiff line change
@@ -79,34 +79,42 @@ <h3 class="f5 fw4 sans-serif pt4">Courier <span class="fw4 ttn">(Fallback: syste
7979
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
8080
no sea takimata sanctus est Lorem ipsum dolor sit amet.
8181
</p>
82-
<h3 class="f5 fw4 sans-serif pt4">Helvetica <span>(Fallback: system sans-serif)</h3>
83-
<p class="helvetica lh-copy measure">
84-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
85-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
86-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
87-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
88-
</p>
89-
<h3 class="f5 fw4 sans-serif pt4">Avenir <span>(Fallback: system sans-serif)</h3>
90-
<p class="avenir lh-copy measure">
91-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
92-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
93-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
94-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
95-
</p>
96-
<h3 class="f5 fw4 sans-serif pt4">Athelas <span>(Fallback: system serif)</h3>
97-
<p class="athelas lh-copy measure">
98-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
99-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
100-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
101-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
102-
</p>
103-
<h3 class="f5 fw4 sans-serif pt4">Georgia <span>(Fallback: system serif)</h3>
104-
<p class="athelas lh-copy measure">
105-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
106-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
107-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
108-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
109-
</p>
82+
<a href="/docs/typography/font-family/helvetica/" class="link black-70 hover-blue db">
83+
<h3 class="f5 fw4 sans-serif pt4">Helvetica <span>(Fallback: system sans-serif)</h3>
84+
<span class="helvetica db lh-copy measure">
85+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
86+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
87+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
88+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
89+
</span>
90+
</a>
91+
<a href="/docs/typography/font-family/avenir/" class="link black-70 hover-blue db">
92+
<h3 class="f5 fw4 sans-serif pt4">Avenir <span>(Fallback: system sans-serif)</h3>
93+
<span class="avenir db lh-copy measure">
94+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
95+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
96+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
97+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
98+
</span>
99+
</a>
100+
<a href="/docs/typography/font-family/athelas/" class="link black-70 hover-blue db">
101+
<h3 class="f5 fw4 sans-serif pt4">Athelas <span>(Fallback: system serif)</h3>
102+
<span class="athelas db lh-copy measure">
103+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
104+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
105+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
106+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
107+
</span>
108+
</a>
109+
<a href="/docs/typography/font-family/georgia/" class="link black-70 hover-blue db">
110+
<h3 class="f5 fw4 sans-serif pt4">Georgia <span>(Fallback: system serif)</h3>
111+
<span class="georgia db lh-copy measure">
112+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
113+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
114+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
115+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
116+
</span>
117+
</a>
110118
<h3 class="f5 fw4 sans-serif pt4">Times <span>(Fallback: system serif)</h3>
111119
<p class="times lh-copy measure">
112120
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
@@ -157,7 +165,7 @@ <h4 class="f6 fw6">Reference</h4>
157165
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" class="link fw6 blue dim">MDN - Font Family</a>
158166
</div>
159167
</div>
160-
<section class="bg-white bt bb b--black-40 black-70 pt4 pb5 overflow-container">
168+
<section class="bg-white bt bb b--black-40 black-70 pt4 pb5 mb5 overflow-container">
161169
<header class="ph3 ph5-ns pt4">
162170
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
163171
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>

‎src/templates/docs/forms/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@
1111

1212
<%= siteHeader %>
1313
<main class="bg-white black-70">
14-
<article class="bt b--black-10 pa3 ph5-ns">
14+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
15+
<div class="nowrap mw9 center">
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/images/" title="Images">Images</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/links/" title="Links">Links</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/lists/" title="Lists">Lists</a>
19+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/forms/" title="Forms">Forms</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/tables/" title="Tables">Tables</a>
21+
</div>
22+
</header>
23+
<article class="pa3 ph5-ns">
1524
<h3 class="f6 ttu tracked mt0">Forms</h3>
1625
<p class="measure f4 f3-ns lh-copy">
1726
Tachyons has some basic form control resets to remove default styles for mobile devices.

‎src/templates/docs/hovers/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,18 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/skins/" title="Skins">Skins</a>
16+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/background-size/" title="Background size">Background Size</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/borders/" title="Borders">Borders</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/box-shadow/" title="Box Shadow">Box Shadow</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/themes/opacity/" title="Opacity">Opacity</a>
22+
</div>
23+
</header>
24+
<article class="pa3 ph5-ns">
1425
<h3 class="f6 ttu tracked mt0">Hovers</h3>
1526
<p class="measure f3 lh-copy">
1627
There are several classes for adding hover effects to elements.

‎src/templates/docs/images/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,16 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/images/" title="Images">Images</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/links/" title="Links">Links</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/lists/" title="Lists">Lists</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/forms/" title="Forms">Forms</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/tables/" title="Tables">Tables</a>
20+
</div>
21+
</header>
22+
<article class="pa3 ph5-ns">
1423
<h3 class="f6 ttu tracked mt0">Images</h3>
1524
</article>
1625
<div class="ph3 ph5-ns pt4 pb5">

‎src/templates/docs/links/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,16 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/images/" title="Images">Images</a>
16+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/links/" title="Links">Links</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/lists/" title="Lists">Lists</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/forms/" title="Forms">Forms</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/tables/" title="Tables">Tables</a>
20+
</div>
21+
</header>
22+
<article class="pa3 ph5-ns">
1423
<h3 class="f6 ttu tracked mt0">Links</h3>
1524
<p class="measure f4 f3-ns lh-copy">
1625
Tachyons doesn't style links by default, but provides the necessary classes to

‎src/templates/docs/lists/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/images/" title="Images">Images</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/links/" title="Links">Links</a>
17+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/lists/" title="Lists">Lists</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/forms/" title="Forms">Forms</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/elements/tables/" title="Tables">Tables</a>
20+
</div>
21+
</header>
22+
<article class="pa3 ph5-ns">
1323
<h3 class="f6 ttu tracked mt0">Lists</h3>
1424
<article class="bt b--black-10 pa3 ph5-ns">
1525
<p class="measure f4 f3-ns lh-copy">

‎src/templates/docs/max-widths/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,21 @@
6363
</div>
6464
</header>
6565
<article class="pa3 ph5-ns">
66+
<h3 class="f6 ttu tracked mt0">Max Widths</h3>
6667
<p class="measure f4 f3-ns lh-copy">
6768
The max-widths module contains both a ten-step scale based on powers
68-
of two as well as a series of percentage values that can prove useful. Max
69+
of two as well as the ability to constrain element widths to a maximum of 100%.
70+
71+
</p>
72+
<p class="measure f5 lh-copy">
73+
Max
6974
widths can be combined with widths to ensure that your content doesn't get too
7075
wide on larger monitors. Max-widths can also help keep embedded media within
7176
the canvas. As they are fluid across ranges of screen widths, max-widths are
7277
extremely useful when trying to keep a design
7378
responsive.
7479
</p>
75-
<p class="measure f5 f4-ns lh-copy">
80+
<p class="measure f5 lh-copy">
7681
Class name structure is as follows:
7782
</p>
7883
<pre>

0 commit comments

Comments
 (0)