Skip to content

Commit 967650f

Browse files
author
mrmrs
committed
Update component doc template
1 parent f250b61 commit 967650f

File tree

9 files changed

+290
-254
lines changed

9 files changed

+290
-254
lines changed

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

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,12 @@ <h1 class="f2">Title Text with Image</h1>
3434
</article>
3535

3636
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
37-
<h1 class="f4 mt0">Articles Title Text Image</h1>
37+
<h1 class="f4 f3-ns mt4">Articles Title Text Image</h1>
3838

3939
<div class="cf">
4040
<div class="fl w-100 w-75-ns pr0 pr2-ns">
4141
<h2 class="f5">HTML</h2>
42+
<p class="f5 black-70"></p>
4243
<pre class="pa3 ba br2 b--black-05 h5">
4344
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
4445
&lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
@@ -94,42 +95,45 @@ <h2 class="f5">CSS</h2>
9495
</pre>
9596
</div>
9697
</div>
97-
98-
<h2 class="f5">Module CSS Stats</h2>
99-
<dl class="dib mr4">
100-
<dt class="db f6">Size (Gzipped)</dt>
101-
<dd class="ml0 b f3 f2-ns">177</dd>
102-
</dl>
103-
<dl class="dib mr4">
104-
<dt class="db f6">Selectors</dt>
105-
<dd class="ml0 b f3 f2-ns">7</dd>
106-
</dl>
107-
<dl class="dib">
108-
<dt class="db f6">Declarations</dt>
109-
<dd class="ml0 b f3 f2-ns">7</dd>
110-
</dl>
111-
112-
<h2 class="f5 mt5">Modules</h2>
113-
<ul class="list pl0 cf lh-copy mw7">
114-
115-
<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>
98+
<div class="cf">
99+
<div class="fl w-100 w-50-ns">
100+
<h2 class="f5 mt4">Modules referenced</h2>
101+
<ul class="list pl0 cf lh-copy mw7">
102+
103+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
116104

117-
<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>
105+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-widths">tachyons-widths</a></li>
118106

119-
<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+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
120108

121-
<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-type-scale">tachyons-type-scale</a></li>
109+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
122110

123-
<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>
111+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-typography">tachyons-typography</a></li>
124112

125-
</ul>
126-
113+
</ul>
114+
</div>
115+
<div class="fl w-100 w-50-ns pl0 pl4-ns">
116+
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
117+
<dl class="dib mr4 mt0">
118+
<dt class="db f6">Size (Gzipped)</dt>
119+
<dd class="ml0 b f3 f2-ns">177</dd>
120+
</dl>
121+
<dl class="dib mr4 mt0">
122+
<dt class="db f6">Selectors</dt>
123+
<dd class="ml0 b f3 f2-ns">7</dd>
124+
</dl>
125+
<dl class="dib mt0">
126+
<dt class="db f6">Declarations</dt>
127+
<dd class="ml0 b f3 f2-ns">7</dd>
128+
</dl>
129+
</div>
130+
</div>
127131

128132

129133

130134

131-
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
132-
<code>npm i --save tachyons-line-height tachyons-widths tachyons-spacing tachyons-type-scale tachyons-typography</code>
135+
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
136+
<code class="f6">npm i --save tachyons-line-height tachyons-widths tachyons-spacing tachyons-type-scale tachyons-typography</code>
133137
<section class="bt b--black-10 mt5 pv4">
134138
<h1 class="f6 b ttu">Other Components</h1>
135139

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

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ <h1 class="">Title</h1>
3333
</article>
3434

3535
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
36-
<h1 class="f4 mt0">Articles Title Text</h1>
36+
<h1 class="f4 f3-ns mt4">Articles Title Text</h1>
3737

3838
<div class="cf">
3939
<div class="fl w-100 w-75-ns pr0 pr2-ns">
4040
<h2 class="f5">HTML</h2>
41+
<p class="f5 black-70"></p>
4142
<pre class="pa3 ba br2 b--black-05 h5">
4243
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
4344
&lt;h1 class=&quot;&quot;&gt;Title&lt;/h1&gt;
@@ -80,38 +81,41 @@ <h2 class="f5">CSS</h2>
8081
</pre>
8182
</div>
8283
</div>
83-
84-
<h2 class="f5">Module CSS Stats</h2>
85-
<dl class="dib mr4">
86-
<dt class="db f6">Size (Gzipped)</dt>
87-
<dd class="ml0 b f3 f2-ns">143</dd>
88-
</dl>
89-
<dl class="dib mr4">
90-
<dt class="db f6">Selectors</dt>
91-
<dd class="ml0 b f3 f2-ns">4</dd>
92-
</dl>
93-
<dl class="dib">
94-
<dt class="db f6">Declarations</dt>
95-
<dd class="ml0 b f3 f2-ns">4</dd>
96-
</dl>
97-
98-
<h2 class="f5 mt5">Modules</h2>
99-
<ul class="list pl0 cf lh-copy mw7">
100-
101-
<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>
84+
<div class="cf">
85+
<div class="fl w-100 w-50-ns">
86+
<h2 class="f5 mt4">Modules referenced</h2>
87+
<ul class="list pl0 cf lh-copy mw7">
88+
89+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
10290

103-
<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>
91+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
10492

105-
<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>
93+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-typography">tachyons-typography</a></li>
10694

107-
</ul>
108-
95+
</ul>
96+
</div>
97+
<div class="fl w-100 w-50-ns pl0 pl4-ns">
98+
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
99+
<dl class="dib mr4 mt0">
100+
<dt class="db f6">Size (Gzipped)</dt>
101+
<dd class="ml0 b f3 f2-ns">143</dd>
102+
</dl>
103+
<dl class="dib mr4 mt0">
104+
<dt class="db f6">Selectors</dt>
105+
<dd class="ml0 b f3 f2-ns">4</dd>
106+
</dl>
107+
<dl class="dib mt0">
108+
<dt class="db f6">Declarations</dt>
109+
<dd class="ml0 b f3 f2-ns">4</dd>
110+
</dl>
111+
</div>
112+
</div>
109113

110114

111115

112116

113-
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
114-
<code>npm i --save tachyons-line-height tachyons-spacing tachyons-typography</code>
117+
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
118+
<code class="f6">npm i --save tachyons-line-height tachyons-spacing tachyons-typography</code>
115119
<section class="bt b--black-10 mt5 pv4">
116120
<h1 class="f6 b ttu">Other Components</h1>
117121

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

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,12 @@
2929
</div>
3030

3131
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
32-
<h1 class="f4 mt0">Layout Flag Object Collapse</h1>
32+
<h1 class="f4 f3-ns mt4">Layout Flag Object Collapse</h1>
3333

3434
<div class="cf">
3535
<div class="fl w-100 w-75-ns pr0 pr2-ns">
3636
<h2 class="f5">HTML</h2>
37+
<p class="f5 black-70"></p>
3738
<pre class="pa3 ba br2 b--black-05 h5">
3839
&lt;div class=&quot;dt mw6 center pt0 pb5 pv5-m pv6-ns&quot;&gt;
3940
&lt;div class=&quot;db dtc-ns v-mid-ns&quot;&gt;
@@ -134,46 +135,49 @@ <h2 class="f5">CSS</h2>
134135
</pre>
135136
</div>
136137
</div>
137-
138-
<h2 class="f5">Module CSS Stats</h2>
139-
<dl class="dib mr4">
140-
<dt class="db f6">Size (Gzipped)</dt>
141-
<dd class="ml0 b f3 f2-ns">335</dd>
142-
</dl>
143-
<dl class="dib mr4">
144-
<dt class="db f6">Selectors</dt>
145-
<dd class="ml0 b f3 f2-ns">18</dd>
146-
</dl>
147-
<dl class="dib">
148-
<dt class="db f6">Declarations</dt>
149-
<dd class="ml0 b f3 f2-ns">22</dd>
150-
</dl>
151-
152-
<h2 class="f5 mt5">Modules</h2>
153-
<ul class="list pl0 cf lh-copy mw7">
154-
155-
<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-display">tachyons-display</a></li>
138+
<div class="cf">
139+
<div class="fl w-100 w-50-ns">
140+
<h2 class="f5 mt4">Modules referenced</h2>
141+
<ul class="list pl0 cf lh-copy mw7">
142+
143+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
156144

157-
<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>
145+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
158146

159-
<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-max-widths">tachyons-max-widths</a></li>
147+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-max-widths">tachyons-max-widths</a></li>
160148

161-
<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>
149+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-widths">tachyons-widths</a></li>
162150

163-
<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>
151+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
164152

165-
<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-utilities">tachyons-utilities</a></li>
153+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-utilities">tachyons-utilities</a></li>
166154

167-
<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-vertical-align">tachyons-vertical-align</a></li>
155+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-vertical-align">tachyons-vertical-align</a></li>
168156

169-
</ul>
170-
157+
</ul>
158+
</div>
159+
<div class="fl w-100 w-50-ns pl0 pl4-ns">
160+
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
161+
<dl class="dib mr4 mt0">
162+
<dt class="db f6">Size (Gzipped)</dt>
163+
<dd class="ml0 b f3 f2-ns">335</dd>
164+
</dl>
165+
<dl class="dib mr4 mt0">
166+
<dt class="db f6">Selectors</dt>
167+
<dd class="ml0 b f3 f2-ns">18</dd>
168+
</dl>
169+
<dl class="dib mt0">
170+
<dt class="db f6">Declarations</dt>
171+
<dd class="ml0 b f3 f2-ns">22</dd>
172+
</dl>
173+
</div>
174+
</div>
171175

172176

173177

174178

175-
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
176-
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
179+
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
180+
<code class="f6">npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
177181
<section class="bt b--black-10 mt5 pv4">
178182
<h1 class="f6 b ttu">Other Components</h1>
179183

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

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@
2828
</div>
2929

3030
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
31-
<h1 class="f4 mt0">Layout Flag Object</h1>
31+
<h1 class="f4 f3-ns mt4">Layout Flag Object</h1>
3232

3333
<div class="cf">
3434
<div class="fl w-100 w-75-ns pr0 pr2-ns">
3535
<h2 class="f5">HTML</h2>
36+
<p class="f5 black-70"></p>
3637
<pre class="pa3 ba br2 b--black-05 h5">
3738
&lt;div class=&quot;dt mw6 center ppv4 pv5-m pv6-ns&quot;&gt;
3839
&lt;div class=&quot;dtc v-mid&quot;&gt;
@@ -99,44 +100,47 @@ <h2 class="f5">CSS</h2>
99100
</pre>
100101
</div>
101102
</div>
102-
103-
<h2 class="f5">Module CSS Stats</h2>
104-
<dl class="dib mr4">
105-
<dt class="db f6">Size (Gzipped)</dt>
106-
<dd class="ml0 b f3 f2-ns">247</dd>
107-
</dl>
108-
<dl class="dib mr4">
109-
<dt class="db f6">Selectors</dt>
110-
<dd class="ml0 b f3 f2-ns">10</dd>
111-
</dl>
112-
<dl class="dib">
113-
<dt class="db f6">Declarations</dt>
114-
<dd class="ml0 b f3 f2-ns">13</dd>
115-
</dl>
116-
117-
<h2 class="f5 mt5">Modules</h2>
118-
<ul class="list pl0 cf lh-copy mw7">
119-
120-
<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-display">tachyons-display</a></li>
103+
<div class="cf">
104+
<div class="fl w-100 w-50-ns">
105+
<h2 class="f5 mt4">Modules referenced</h2>
106+
<ul class="list pl0 cf lh-copy mw7">
107+
108+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
121109

122-
<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>
110+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
123111

124-
<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-max-widths">tachyons-max-widths</a></li>
112+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-max-widths">tachyons-max-widths</a></li>
125113

126-
<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>
114+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
127115

128-
<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-utilities">tachyons-utilities</a></li>
116+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-utilities">tachyons-utilities</a></li>
129117

130-
<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-vertical-align">tachyons-vertical-align</a></li>
118+
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-vertical-align">tachyons-vertical-align</a></li>
131119

132-
</ul>
133-
120+
</ul>
121+
</div>
122+
<div class="fl w-100 w-50-ns pl0 pl4-ns">
123+
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
124+
<dl class="dib mr4 mt0">
125+
<dt class="db f6">Size (Gzipped)</dt>
126+
<dd class="ml0 b f3 f2-ns">247</dd>
127+
</dl>
128+
<dl class="dib mr4 mt0">
129+
<dt class="db f6">Selectors</dt>
130+
<dd class="ml0 b f3 f2-ns">10</dd>
131+
</dl>
132+
<dl class="dib mt0">
133+
<dt class="db f6">Declarations</dt>
134+
<dd class="ml0 b f3 f2-ns">13</dd>
135+
</dl>
136+
</div>
137+
</div>
134138

135139

136140

137141

138-
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
139-
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
142+
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
143+
<code class="f6">npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
140144
<section class="bt b--black-10 mt5 pv4">
141145
<h1 class="f6 b ttu">Other Components</h1>
142146

0 commit comments

Comments
 (0)