Skip to content

Commit 07d6133

Browse files
author
mrmrs
committed
Update more docs
1 parent 3fd7797 commit 07d6133

File tree

6 files changed

+190
-22
lines changed

6 files changed

+190
-22
lines changed

‎docs/layout/clearfix/index.html

+12-8
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Clearfix / Layout / Docs / TACHYONS
7+
tachyons-clears / Layout / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<header class="w-100 pa3 ph5-ns bg-near-white">
1716
<div class="dt w-100">
1817
<div class="dtc v-mid tl w-50">
@@ -42,7 +41,7 @@
4241
</header>
4342

4443
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
4645
<h4 class="f4 mv0 fw6 dib mr4">tachyons-clears</h4>
4746
<span class="f4 b dib pl0 ml0 mr4">v2.0.3</span>
4847
<span class="f4 b dib pl0 ml0 mr4">92 B</span>
@@ -64,11 +63,16 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-clears</h4>
6463
<dd class="db pl0 ml0 f4 f2-ns b">1.3333333333333333</dd>
6564
</dl>
6665
</div>
66+
<p class="measure f4 f3-ns lh-copy">
67+
When floats are used for layouts - they need a clearfix solution. This helps prevent
68+
layout problems caused by the elements being removed from the block context of the
69+
surrounding elements.
70+
</p>
6771
</article>
6872
<div class="ph3 ph5-ns pt4 pb5">
69-
<h2 class="f3 bold">Examples</h2>
73+
<h2 class="f3 b">Examples</h2>
7074
<h3 class="f4">Cleared Floats</h3>
71-
<p>
75+
<p class="measure lh-copy">
7276
This example shows two floated elements wrapped in an element with a 4px solid red border.
7377
In the top version where the floats are cleared, the red element wraps around the elements.
7478
In the second example - the parent element is collapsed and the two floated elements sit outside of it.

‎docs/layout/max-widths/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,48 @@ <h4 class="f4 mv0 fw6 dib mr4">max-widths</h4>
6464
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6565
</dl>
6666
</div>
67+
<p class="measure f4 f3-ns lh-copy">
68+
The max-widths module contains both a ten-step scale based on powers of two
69+
as well as a series of percentage values that can prove useful. Max widths can be combined with widths
70+
to ensure that your content doesn't get too wide on larger monitors. Max-widths can also help keep embedded media
71+
within the canvas. As they are fluid across ranges of screen widths, max-widths are extremely useful when trying to keep a design
72+
responsive.
73+
</p>
74+
<p class="measure f5 f4-ns lh-copy">
75+
Class name structure is as follows:
76+
<pre>
77+
Base:
78+
mw = width
79+
80+
Modifiers
81+
1 = 1st step in width scale
82+
2 = 2nd step in width scale
83+
3 = 3rd step in width scale
84+
4 = 4th step in width scale
85+
5 = 5th step in width scale
86+
6 = 6th step in width scale
87+
7 = 7th step in width scale
88+
8 = 8th step in width scale
89+
9 = 9th step in width scale
90+
10 = 10th step in width scale
91+
92+
-25 = literal value 10%
93+
-50 = literal value 20%
94+
-75 = literal value 25%
95+
-100 = literal value 33%
96+
97+
-none = none
98+
-max = max-content
99+
-min = min-content
100+
-fit = fit-content
101+
-fill = fill-available
102+
103+
Media Query Extensions:
104+
-ns = not-small
105+
-m = medium
106+
-l = large
107+
</pre>
108+
</p>
67109
</article>
68110
<div class="ph3 ph5-ns pt4 pb5">
69111
<h2 class="f3 bold">Examples</h2>

‎docs/layout/widths/index.html

+41-3
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,9 @@
99
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<header class="w-100 pa3 ph5-ns bg-near-white">
1716
<div class="dt w-100">
1817
<div class="dtc v-mid tl w-50">
@@ -42,7 +41,7 @@
4241
</header>
4342

4443
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
4645
<h4 class="f4 mv0 fw6 dib mr4">tachyons-widths</h4>
4746
<span class="f4 b dib pl0 ml0 mr4">v4.0.1</span>
4847
<span class="f4 b dib pl0 ml0 mr4">318 B</span>
@@ -63,6 +62,45 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-widths</h4>
6362
<dt class="f6 db pr2">Size of Avg. Rule </dt>
6463
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6564
</dl>
65+
<p class="measure f5 f4-ns lh-copy">
66+
The widths module contains both a five-step width scale based on powers of two
67+
as well as a series of percentage values that can be combined with floats for
68+
an infinitely nestable and fully responsive grid system.
69+
</p>
70+
<p class="measure f6 lh-copy">
71+
Class name structure is as follows:
72+
<pre>
73+
Base:
74+
w = width
75+
76+
Modifiers
77+
1 = 1st step in width scale
78+
2 = 2nd step in width scale
79+
3 = 3rd step in width scale
80+
4 = 4th step in width scale
81+
5 = 5th step in width scale
82+
83+
-10 = literal value 10%
84+
-20 = literal value 20%
85+
-25 = literal value 25%
86+
-33 = literal value 33%
87+
-34 = literal value 34%
88+
-40 = literal value 40%
89+
-50 = literal value 50%
90+
-60 = literal value 60%
91+
-75 = literal value 75%
92+
-80 = literal value 80%
93+
-100 = literal value 100%
94+
95+
-auto = string value auto
96+
97+
98+
Media Query Extensions:
99+
-ns = not-small
100+
-m = medium
101+
-l = large
102+
</pre>
103+
</p>
66104
</div>
67105
</article>
68106
<div class="ph3 ph5-ns pt4 pb5">

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

+12-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Clearfix / Layout / Docs / TACHYONS
7+
<%= name %> / Layout / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<%= siteHeader %>
1716
<main class="">
18-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
17+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1918
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
2019
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2120
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -37,11 +36,16 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3736
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3837
</dl>
3938
</div>
39+
<p class="measure f4 f3-ns lh-copy">
40+
When floats are used for layouts - they need a clearfix solution. This helps prevent
41+
layout problems caused by the elements being removed from the block context of the
42+
surrounding elements.
43+
</p>
4044
</article>
4145
<div class="ph3 ph5-ns pt4 pb5">
42-
<h2 class="f3 bold">Examples</h2>
46+
<h2 class="f3 b">Examples</h2>
4347
<h3 class="f4">Cleared Floats</h3>
44-
<p>
48+
<p class="measure lh-copy">
4549
This example shows two floated elements wrapped in an element with a 4px solid red border.
4650
In the top version where the floats are cleared, the red element wraps around the elements.
4751
In the second example - the parent element is collapsed and the two floated elements sit outside of it.

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

+42
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,48 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3737
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3838
</dl>
3939
</div>
40+
<p class="measure f4 f3-ns lh-copy">
41+
The max-widths module contains both a ten-step scale based on powers of two
42+
as well as a series of percentage values that can prove useful. Max widths can be combined with widths
43+
to ensure that your content doesn't get too wide on larger monitors. Max-widths can also help keep embedded media
44+
within the canvas. As they are fluid across ranges of screen widths, max-widths are extremely useful when trying to keep a design
45+
responsive.
46+
</p>
47+
<p class="measure f5 f4-ns lh-copy">
48+
Class name structure is as follows:
49+
<pre>
50+
Base:
51+
mw = width
52+
53+
Modifiers
54+
1 = 1st step in width scale
55+
2 = 2nd step in width scale
56+
3 = 3rd step in width scale
57+
4 = 4th step in width scale
58+
5 = 5th step in width scale
59+
6 = 6th step in width scale
60+
7 = 7th step in width scale
61+
8 = 8th step in width scale
62+
9 = 9th step in width scale
63+
10 = 10th step in width scale
64+
65+
-25 = literal value 10%
66+
-50 = literal value 20%
67+
-75 = literal value 25%
68+
-100 = literal value 33%
69+
70+
-none = none
71+
-max = max-content
72+
-min = min-content
73+
-fit = fit-content
74+
-fill = fill-available
75+
76+
Media Query Extensions:
77+
-ns = not-small
78+
-m = medium
79+
-l = large
80+
</pre>
81+
</p>
4082
</article>
4183
<div class="ph3 ph5-ns pt4 pb5">
4284
<h2 class="f3 bold">Examples</h2>

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

+41-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@
99
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<%= siteHeader %>
1716
<main class="">
18-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
17+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1918
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
2019
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2120
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -36,6 +35,45 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3635
<dt class="f6 db pr2">Size of Avg. Rule </dt>
3736
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3837
</dl>
38+
<p class="measure f5 f4-ns lh-copy">
39+
The widths module contains both a five-step width scale based on powers of two
40+
as well as a series of percentage values that can be combined with floats for
41+
an infinitely nestable and fully responsive grid system.
42+
</p>
43+
<p class="measure f6 lh-copy">
44+
Class name structure is as follows:
45+
<pre>
46+
Base:
47+
w = width
48+
49+
Modifiers
50+
1 = 1st step in width scale
51+
2 = 2nd step in width scale
52+
3 = 3rd step in width scale
53+
4 = 4th step in width scale
54+
5 = 5th step in width scale
55+
56+
-10 = literal value 10%
57+
-20 = literal value 20%
58+
-25 = literal value 25%
59+
-33 = literal value 33%
60+
-34 = literal value 34%
61+
-40 = literal value 40%
62+
-50 = literal value 50%
63+
-60 = literal value 60%
64+
-75 = literal value 75%
65+
-80 = literal value 80%
66+
-100 = literal value 100%
67+
68+
-auto = string value auto
69+
70+
71+
Media Query Extensions:
72+
-ns = not-small
73+
-m = medium
74+
-l = large
75+
</pre>
76+
</p>
3977
</div>
4078
</article>
4179
<div class="ph3 ph5-ns pt4 pb5">

0 commit comments

Comments
 (0)