Skip to content

Commit 119c4c1

Browse files
author
mrmrs
committed
Update debug page.
1 parent a6c668c commit 119c4c1

File tree

4 files changed

+512
-45
lines changed

4 files changed

+512
-45
lines changed

‎docs/debug/index.html

+178-44
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,69 @@
99
<meta name="author" content="@mrmrs">
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-
<header class="bg-dark-gray white pbl">
16-
<div class="bb b--mid-gray phm phl-ns pvl">
17-
<h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
18-
<h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
19-
<span class="thin white-40">/</span>
20-
<h4 class="f4 mvn semibold dib">Debugging</h4>
21-
</div>
22-
<div class="phm phl-ns pvm">
23-
<p class="measure f3 lh-copy">
15+
<header class="w-100 pa3 ph5-ns bg-near-white">
16+
<div class="dt w-100">
17+
<div class="dtc v-mid tl w-50">
18+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
19+
Tachyons
20+
<div class="dib">
21+
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta-3</small>
22+
</div>
23+
</a>
24+
</div>
25+
<div class="db dtc v-mid w-100 tr">
26+
27+
<a title="Documentation" href="/docs/"
28+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
29+
Docs
30+
</a>
31+
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
32+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
33+
GitHub
34+
</a>
35+
<a title="Tachyons Npm Modules" href="/#npm"
36+
class="f6 b link black-50 dim dib">
37+
Npm
38+
</a>
39+
</div>
40+
</div>
41+
</header>
42+
43+
<main>
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
45+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-debug</h4>
46+
<span class="f4 b dib pl0 ml0 mr4">v1.1.1</span>
47+
<span class="f4 b dib pl0 ml0 mr4">902 B</span>
48+
<div>
49+
<dl class="dib mr4 mt0">
50+
<dt class="f6 db">Declarations </dt>
51+
<dd class="db pl0 ml0 f4 f2-ns b">98</span></dd>
52+
</dl>
53+
<dl class="dib mr4">
54+
<dt class="f6 db pr2">Selectors </dt>
55+
<dd class="db pl0 ml0 f4 f2-ns b">99</dd>
56+
</dl>
57+
<dl class="dib mr4">
58+
<dt class="f6 db pr2">Max. Specificity Score </dt>
59+
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
60+
</dl>
61+
<dl class="dib mr4">
62+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
63+
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
64+
</dl>
65+
</div>
66+
<p class="measure f4 f3-ns lh-copy">
2467
Tachyons comes with two convenient modules to help debug layout issues you might be having.
2568
</p>
26-
<p class="measure f4 lh-copy">
69+
<p class="measure f5 f4-ns lh-copy">
2770
The debug_children module allows you to use a class called "debug" on
2871
any element. That element along with any child node will have an
2972
outline of 1px solid gold placed on it.
3073
</p>
31-
<p class="measure f4 lh-copy">
74+
<p class="measure f5 lh-copy">
3275
The debug module is commented out at the bottom of the
3376
src/tachyons.css file. If you uncomment it a 1px outline will be
3477
placed on every element on the page. Each element has a different
@@ -38,12 +81,15 @@ <h4 class="f4 mvn semibold dib">Debugging</h4>
3881
pixels and it's hard to tell where one element ends and the other
3982
begins.
4083
</p>
41-
</div>
42-
</header>
84+
<p class="measure f5 lh-copy">
85+
This debug module is commented out by default in <code>src/tachyons.css</code>.
86+
To use it, uncomment out that line and then run <code>node run build</code> from the root of the project.
87+
</p>
88+
</article>
4389
<main class="">
44-
<div class="phm phl-ns ptl pbxl">
45-
<h2 class="f3 bold">Examples</h2>
46-
<h3 class="f5 book ptl caps">Debug Children</h3>
90+
<div class="ph3 ph5-ns pt4 pb5">
91+
<h2 class="f3 b">Examples</h2>
92+
<h3 class="f5 fw4 pt4 caps">Debug Children</h3>
4793
<div class="debug">
4894
<p class="measure i">
4995
Note how in the below example there is white space rendered in between the
@@ -53,7 +99,7 @@ <h3 class="f5 book ptl caps">Debug Children</h3>
5399
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
54100
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
55101
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
56-
<article class="cf mtl w-100">
102+
<article class="cf mt4 w-100">
57103
<div class="fl w-100">
58104
<p class="i w-100">
59105
Note how in the below example the elements are flush with no
@@ -73,15 +119,15 @@ <h3 class="f5 book ptl caps">Debug Children</h3>
73119
This is a floated element set to width: 25%
74120
</div>
75121
</article>
76-
<form action="index_submit" method="get" accept-charset="utf-8" class="mtl">
122+
<form action="index_submit" method="get" accept-charset="utf-8" class="mt4">
77123
<fieldset id="this_is_a_form_legend" class="">
78124
<legend>This is a form legend</legend>
79125
<label for="">This is a label</label><input type="text" name="" value="" id="">
80126
</fieldset>
81127
<p><input type="submit" value="Continue →"></p>
82128
</form>
83129
</div>
84-
<h3 class="f5 book ptl caps">Debug All</h3>
130+
<h3 class="f5 book pt4 caps">Debug All</h3>
85131
<p class="lh-copy measure">
86132
The largest difference here between the two methods is that every element on the page is
87133
outlined in a different color.
@@ -204,7 +250,7 @@ <h3 class="f5 book ptl caps">Debug All</h3>
204250
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
205251
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
206252
<div class="dib w-25">This element is set to inline-block and width: 25% </div>
207-
<article class="cf mtl w-100">
253+
<article class="cf mt4 w-100">
208254
<div class="fl w-100">
209255
<p class="i w-100">
210256
Note how in the below example the elements are flush with no
@@ -224,31 +270,31 @@ <h3 class="f5 book ptl caps">Debug All</h3>
224270
This is a floated element set to width: 25%
225271
</div>
226272
</article>
227-
<form action="index_submit" method="get" accept-charset="utf-8" class="mtl">
273+
<form action="index_submit" method="get" accept-charset="utf-8" class="mt4">
228274
<fieldset id="this_is_a_form_legend" class="">
229275
<legend>This is a form legend</legend>
230276
<label for="">This is a label</label><input type="text" name="" value="" id="">
231277
</fieldset>
232278
<p><input type="submit" value="Continue →"></p>
233279
</form>
234280
</div>
235-
<article class="mtxl cf">
281+
<article class="mt5 cf">
236282
<div class="dib">
237-
<h1 class="f4 ttu tracked semibold">Next</h1>
238-
<a href="/docs/general/images/" class="link semibold blue dim">Images</a>
283+
<h1 class="f4 ttu tracked fw6">Next</h1>
284+
<a href="/docs/general/images/" class="link fw6 blue dim">Images</a>
239285
</div>
240-
<div class="mtxl">
241-
<h1 class="f4 ttu tracked semibold">Reference</h1>
242-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" class="db link semibold blue dim">MDN - Outline</a>
286+
<div class="mt5">
287+
<h1 class="f4 ttu tracked fw6">Reference</h1>
288+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" class="db link fw6 blue dim">MDN - Outline</a>
243289
</div>
244290
</article>
245291
</div>
246-
<section class="bg-dark-gray white ptl pvl">
247-
<header class="phm phl-ns ptl">
292+
<section class="bg-near-white black-70 pt4 pv4">
293+
<header class="ph3 ph5-ns pt4">
248294
<kbd class="yellow">src/_debug-children.css</kbd>
249295
</header>
250-
<pre class="phm phl-ns">
251-
<code class="small">
296+
<pre class="ph3 ph5-ns">
297+
<code class="f6" style="font-size: .75rem;">
252298
/*
253299

254300
DEBUG CHILDREN
@@ -260,19 +306,13 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
260306
</code>
261307
</pre>
262308
</section>
263-
<section class="bg-dark-gray white pbxl">
264-
<header class="phm phl-ns">
309+
<section class="bg-near-white black-70 pbxl">
310+
<header class="ph3 ph5-ns">
265311
<kbd class="yellow">src/_debug.css</kbd>
266312
</header>
267-
<pre class="phm phl-ns">
268-
<code class="small">
269-
/*
270-
271-
DEBUG
272-
273-
*/
274-
275-
313+
<pre class="ph3 ph5-ns">
314+
<code class="f6" style="font-size: .75rem;">
315+
276316
body { outline: 1px solid #2980B9!important; }
277317
article { outline: 1px solid #3498DB!important; }
278318
nav { outline: 1px solid #0088C3!important; }
@@ -290,6 +330,7 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
290330
address { outline: 1px solid #1A2C51!important; }
291331
div { outline: 1px solid #036CDB!important; }
292332

333+
293334
p { outline: 1px solid #AC050B!important; }
294335
hr { outline: 1px solid #FF063F!important; }
295336
pre { outline: 1px solid #850440!important; }
@@ -303,6 +344,8 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
303344
figure { outline: 1px solid #FF00BB!important; }
304345
figcaption { outline: 1px solid #BF0032!important; }
305346

347+
348+
306349
table { outline: 1px solid #00CC99!important; }
307350
caption { outline: 1px solid #37FFC4!important; }
308351
thead { outline: 1px solid #98DACA!important; }
@@ -314,6 +357,7 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
314357
col { outline: 1px solid #6C9A8F!important; }
315358
colgroup { outline: 1px solid #6C9A9D!important; }
316359

360+
317361
button { outline: 1px solid #DA8301!important; }
318362
datalist { outline: 1px solid #C06000!important; }
319363
fieldset { outline: 1px solid #D95100!important; }
@@ -330,14 +374,20 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
330374
select { outline: 1px solid #E26E0F!important; }
331375
textarea { outline: 1px solid #CC5400!important; }
332376

377+
378+
333379
details { outline: 1px solid #33848F!important; }
334380
summary { outline: 1px solid #60A1A6!important; }
335381
command { outline: 1px solid #438DA1!important; }
336382
menu { outline: 1px solid #449DA6!important; }
337383

384+
385+
338386
del { outline: 1px solid #BF0000!important; }
339387
ins { outline: 1px solid #400000!important; }
340388

389+
390+
341391
img { outline: 1px solid #22746B!important; }
342392
iframe { outline: 1px solid #64A7A0!important; }
343393
embed { outline: 1px solid #98DACA!important; }
@@ -351,6 +401,8 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
351401
map { outline: 1px solid #7BE500!important; }
352402
area { outline: 1px solid #305900!important; }
353403

404+
405+
354406
a { outline: 1px solid #FF62AB!important; }
355407
em { outline: 1px solid #800B41!important; }
356408
strong { outline: 1px solid #FF1583!important; }
@@ -380,12 +432,92 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
380432
br { outline: 1px solid #DB687D!important; }
381433
wbr { outline: 1px solid #DB175B!important; }
382434

435+
383436
</code>
384437
</pre>
385438
</section>
439+
<div class="ph3 ph5-ns pt3 pb5">
440+
<section>
441+
<h2 class="f6 fw7 ttu tracked">General</h2>
442+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
443+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
444+
<section class="cf w-100 mt3">
445+
<article class="fn fl-ns w-100 w-25-l">
446+
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
447+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
448+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
449+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
450+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
451+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
452+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
453+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
454+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
455+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
456+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
457+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
458+
</article>
459+
<article class="fn fl-ns w-100 w-25-l">
460+
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
461+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
462+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
463+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
464+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
465+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
466+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
467+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
468+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
469+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
470+
</article>
471+
<article class="fn fl-ns w-100 w-25-l">
472+
<h2 class="f6 fw7 ttu tracked">Theming</h2>
473+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
474+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
475+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
476+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
477+
</article>
478+
</section>
479+
</section>
480+
</div>
481+
386482
</main>
483+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
484+
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
485+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
486+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
487+
</svg>
488+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
489+
</a>
490+
<article>
491+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
492+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
493+
</article>
494+
495+
<p>
496+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
497+
Join our Slack Channel
498+
</a>
499+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
500+
Open an Issue
501+
</a>
502+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
503+
GitHub
504+
</a>
505+
</p>
506+
<p class="measure copy lh-copy">
507+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
508+
question in our slack channel. We're here to try and help make designing in
509+
the browser fun.
510+
</p>
511+
<small class="f6 measure db lh-copy mt5">
512+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
513+
that always moves faster than light.
514+
The word comes from the Greek:
515+
<br> <br>
516+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
517+
</small>
518+
</footer>
387519

388-
<script>
520+
<script>
389521
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
390522
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
391523
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -395,5 +527,7 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
395527
ga('send', 'pageview');
396528

397529
</script>
530+
531+
398532
</body>
399533
</html>

‎lib/debug.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var _ = require('lodash')
2+
var fs = require('fs')
3+
var gzip = require('gzip-size')
4+
var filesize = require('filesize')
5+
var postcss = require('postcss')
6+
7+
var cssstats = require('cssstats')
8+
9+
var module = require('tachyons-debug/package.json')
10+
var moduleCss = fs.readFileSync('node_modules/tachyons-debug/css/tachyons-debug.min.css', 'utf8')
11+
var moduleObj = cssstats(moduleCss)
12+
var moduleSize = filesize(moduleObj.gzipSize)
13+
var moduleName = module.name
14+
15+
var srcCSS = fs.readFileSync('./src/css/_debug.css', 'utf8')
16+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
17+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
18+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
19+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
20+
21+
var template = fs.readFileSync('./src/templates/docs/debug/index.html', 'utf8')
22+
var tpl = _.template(template)
23+
var html = tpl({
24+
moduleVersion: module.version,
25+
moduleSize: moduleSize,
26+
name: moduleName,
27+
moduleObj: moduleObj,
28+
srcCSS: srcCSS,
29+
navDocs: navDocs,
30+
siteFooter: siteFooter,
31+
googleAnalytics: googleAnalytics,
32+
siteHeader: siteHeader
33+
})
34+
35+
fs.writeFileSync('./docs/debug/index.html', html)

0 commit comments

Comments
 (0)