Skip to content

Commit 15ea7c9

Browse files
author
mrmrs
committed
Some quick updates to component docs template.
1 parent 03af7cd commit 15ea7c9

File tree

9 files changed

+252
-189
lines changed

9 files changed

+252
-189
lines changed

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

+29-22
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,11 @@ <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-
<h2 class="f5">Module CSS Stats</h2>
38-
<dl class="dib mr4">
39-
<dt class="db f6">Size (Gzipped)</dt>
40-
<dd class="ml0 b f3 f2-ns">177</dd>
41-
</dl>
42-
<dl class="dib mr4">
43-
<dt class="db f6">Selectors</dt>
44-
<dd class="ml0 b f3 f2-ns">7</dd>
45-
</dl>
46-
<dl class="dib">
47-
<dt class="db f6">Declarations</dt>
48-
<dd class="ml0 b f3 f2-ns">7</dd>
49-
</dl>
50-
51-
52-
<h2 class="f5">HTML</h2>
37+
<h1 class="f4 mt0">Articles Title Text Image</h1>
5338

39+
<div class="cf">
40+
<div class="fl w-100 w-75-ns pr0 pr2-ns">
41+
<h2 class="f5">HTML</h2>
5442
<pre class="pa3 ba br2 b--black-05">
5543
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
5644
&lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
@@ -70,8 +58,10 @@ <h2 class="f5">HTML</h2>
7058
&lt;/article&gt;
7159

7260
</pre>
73-
<h4>CSS</h4>
74-
<pre class="pa3 ba br2 b--black-05">.lh-copy {
61+
</div>
62+
<div class="fl w-100 w-25-ns pl0 pl2-ns">
63+
<h2 class="f5">CSS</h2>
64+
<pre class="pa3 ba br2 b--black-05">.lh-copy {
7565
line-height: 1.6;
7666
}
7767

@@ -101,7 +91,23 @@ <h4>CSS</h4>
10191
}
10292
}
10393

104-
</pre>
94+
</pre>
95+
</div>
96+
</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>
105111

106112
<h2 class="f5 mt5">Modules</h2>
107113
<ul class="list pl0 cf lh-copy mw7">
@@ -121,10 +127,10 @@ <h2 class="f5 mt5">Modules</h2>
121127

122128

123129

124-
<h4 class="mt5">Install these modules via npm</h4>
130+
131+
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
125132
<code>npm i --save tachyons-line-height tachyons-widths tachyons-spacing tachyons-type-scale tachyons-typography</code>
126-
</section>
127-
<section class="ph3 ph5-ns bt b--black-10 mt5 pv4">
133+
<section class="bt b--black-10 mt5 pv4">
128134
<h1 class="f6 b ttu">Other Components</h1>
129135

130136

@@ -160,6 +166,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
160166
</div>
161167

162168
</section>
169+
</section>
163170
</main>
164171

165172

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

+29-22
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,11 @@ <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-
<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">143</dd>
40-
</dl>
41-
<dl class="dib mr4">
42-
<dt class="db f6">Selectors</dt>
43-
<dd class="ml0 b f3 f2-ns">4</dd>
44-
</dl>
45-
<dl class="dib">
46-
<dt class="db f6">Declarations</dt>
47-
<dd class="ml0 b f3 f2-ns">4</dd>
48-
</dl>
49-
50-
51-
<h2 class="f5">HTML</h2>
36+
<h1 class="f4 mt0">Articles Title Text</h1>
5237

38+
<div class="cf">
39+
<div class="fl w-100 w-75-ns pr0 pr2-ns">
40+
<h2 class="f5">HTML</h2>
5341
<pre class="pa3 ba br2 b--black-05">
5442
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
5543
&lt;h1 class=&quot;&quot;&gt;Title&lt;/h1&gt;
@@ -68,8 +56,10 @@ <h2 class="f5">HTML</h2>
6856
&lt;/article&gt;
6957

7058
</pre>
71-
<h4>CSS</h4>
72-
<pre class="pa3 ba br2 b--black-05">.lh-copy {
59+
</div>
60+
<div class="fl w-100 w-25-ns pl0 pl2-ns">
61+
<h2 class="f5">CSS</h2>
62+
<pre class="pa3 ba br2 b--black-05">.lh-copy {
7363
line-height: 1.6;
7464
}
7565

@@ -87,7 +77,23 @@ <h4>CSS</h4>
8777
}
8878
}
8979

90-
</pre>
80+
</pre>
81+
</div>
82+
</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>
9197

9298
<h2 class="f5 mt5">Modules</h2>
9399
<ul class="list pl0 cf lh-copy mw7">
@@ -103,10 +109,10 @@ <h2 class="f5 mt5">Modules</h2>
103109

104110

105111

106-
<h4 class="mt5">Install these modules via npm</h4>
112+
113+
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
107114
<code>npm i --save tachyons-line-height tachyons-spacing tachyons-typography</code>
108-
</section>
109-
<section class="ph3 ph5-ns bt b--black-10 mt5 pv4">
115+
<section class="bt b--black-10 mt5 pv4">
110116
<h1 class="f6 b ttu">Other Components</h1>
111117

112118

@@ -142,6 +148,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
142148
</div>
143149

144150
</section>
151+
</section>
145152
</main>
146153

147154

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

+29-22
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,11 @@
2929
</div>
3030

3131
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
32-
<h2 class="f5">Module CSS Stats</h2>
33-
<dl class="dib mr4">
34-
<dt class="db f6">Size (Gzipped)</dt>
35-
<dd class="ml0 b f3 f2-ns">335</dd>
36-
</dl>
37-
<dl class="dib mr4">
38-
<dt class="db f6">Selectors</dt>
39-
<dd class="ml0 b f3 f2-ns">18</dd>
40-
</dl>
41-
<dl class="dib">
42-
<dt class="db f6">Declarations</dt>
43-
<dd class="ml0 b f3 f2-ns">22</dd>
44-
</dl>
45-
46-
47-
<h2 class="f5">HTML</h2>
32+
<h1 class="f4 mt0">Layout Flag Object Collapse</h1>
4833

34+
<div class="cf">
35+
<div class="fl w-100 w-75-ns pr0 pr2-ns">
36+
<h2 class="f5">HTML</h2>
4937
<pre class="pa3 ba br2 b--black-05">
5038
&lt;div class=&quot;dt mw6 center pt0 pb5 pv5-m pv6-ns&quot;&gt;
5139
&lt;div class=&quot;db dtc-ns v-mid-ns&quot;&gt;
@@ -60,8 +48,10 @@ <h2 class="f5">HTML</h2>
6048
&lt;/div&gt;
6149

6250
</pre>
63-
<h4>CSS</h4>
64-
<pre class="pa3 ba br2 b--black-05">.db {
51+
</div>
52+
<div class="fl w-100 w-25-ns pl0 pl2-ns">
53+
<h2 class="f5">CSS</h2>
54+
<pre class="pa3 ba br2 b--black-05">.db {
6555
display: block;
6656
}
6757

@@ -141,7 +131,23 @@ <h4>CSS</h4>
141131
}
142132
}
143133

144-
</pre>
134+
</pre>
135+
</div>
136+
</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>
145151

146152
<h2 class="f5 mt5">Modules</h2>
147153
<ul class="list pl0 cf lh-copy mw7">
@@ -165,10 +171,10 @@ <h2 class="f5 mt5">Modules</h2>
165171

166172

167173

168-
<h4 class="mt5">Install these modules via npm</h4>
174+
175+
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
169176
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
170-
</section>
171-
<section class="ph3 ph5-ns bt b--black-10 mt5 pv4">
177+
<section class="bt b--black-10 mt5 pv4">
172178
<h1 class="f6 b ttu">Other Components</h1>
173179

174180

@@ -204,6 +210,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
204210
</div>
205211

206212
</section>
213+
</section>
207214
</main>
208215

209216

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

+29-22
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,11 @@
2828
</div>
2929

3030
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
31-
<h2 class="f5">Module CSS Stats</h2>
32-
<dl class="dib mr4">
33-
<dt class="db f6">Size (Gzipped)</dt>
34-
<dd class="ml0 b f3 f2-ns">247</dd>
35-
</dl>
36-
<dl class="dib mr4">
37-
<dt class="db f6">Selectors</dt>
38-
<dd class="ml0 b f3 f2-ns">10</dd>
39-
</dl>
40-
<dl class="dib">
41-
<dt class="db f6">Declarations</dt>
42-
<dd class="ml0 b f3 f2-ns">13</dd>
43-
</dl>
44-
45-
46-
<h2 class="f5">HTML</h2>
31+
<h1 class="f4 mt0">Layout Flag Object</h1>
4732

33+
<div class="cf">
34+
<div class="fl w-100 w-75-ns pr0 pr2-ns">
35+
<h2 class="f5">HTML</h2>
4836
<pre class="pa3 ba br2 b--black-05">
4937
&lt;div class=&quot;dt mw6 center ppv4 pv5-m pv6-ns&quot;&gt;
5038
&lt;div class=&quot;dtc v-mid&quot;&gt;
@@ -58,8 +46,10 @@ <h2 class="f5">HTML</h2>
5846
&lt;/div&gt;
5947

6048
</pre>
61-
<h4>CSS</h4>
62-
<pre class="pa3 ba br2 b--black-05">.dt {
49+
</div>
50+
<div class="fl w-100 w-25-ns pl0 pl2-ns">
51+
<h2 class="f5">CSS</h2>
52+
<pre class="pa3 ba br2 b--black-05">.dt {
6353
display: table;
6454
}
6555

@@ -106,7 +96,23 @@ <h4>CSS</h4>
10696
}
10797
}
10898

109-
</pre>
99+
</pre>
100+
</div>
101+
</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>
110116

111117
<h2 class="f5 mt5">Modules</h2>
112118
<ul class="list pl0 cf lh-copy mw7">
@@ -128,10 +134,10 @@ <h2 class="f5 mt5">Modules</h2>
128134

129135

130136

131-
<h4 class="mt5">Install these modules via npm</h4>
137+
138+
<h4 class="mt5">Install via npm <small class="fw2 f6 db">Only installs the needed tachyons-modules for this component</small></h4>
132139
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
133-
</section>
134-
<section class="ph3 ph5-ns bt b--black-10 mt5 pv4">
140+
<section class="bt b--black-10 mt5 pv4">
135141
<h1 class="f6 b ttu">Other Components</h1>
136142

137143

@@ -167,6 +173,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
167173
</div>
168174

169175
</section>
176+
</section>
170177
</main>
171178

172179

0 commit comments

Comments
 (0)