Skip to content

Commit 00e82e5

Browse files
author
mrmrs
committed
Update borders docs.
1 parent aae92fd commit 00e82e5

File tree

2 files changed

+62
-89
lines changed

2 files changed

+62
-89
lines changed

‎lib/borders.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,31 @@ var gzip = require('gzip-size')
44
var filesize = require('filesize')
55
var cssstats = require('cssstats')
66

7+
78
var module = require('tachyons-borders/package.json')
8-
var moduleCss = fs.readFileSync('node_modules/tachyons-borders/tachyons-borders.min.css', 'utf8')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-borders/css/tachyons-borders.min.css', 'utf8')
910
var moduleObj = cssstats(moduleCss)
1011
var moduleSize = filesize(moduleObj.gzipSize)
12+
var moduleName = module.name
1113

12-
var srcCSS = fs.readFileSync('./src/_borders.css', 'utf8')
13-
var navDocs = fs.readFileSync('./templates/nav_docs.html', 'utf8')
14-
var siteFooter = fs.readFileSync('./templates/footer.html', 'utf8')
15-
14+
var srcCSS = fs.readFileSync('./src/css/_borders.css', 'utf8')
15+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
16+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
17+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
18+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
1619

17-
var template = fs.readFileSync('./templates/docs/borders/index.html', 'utf8')
20+
var template = fs.readFileSync('./src/templates/docs/borders/index.html', 'utf8')
1821
var tpl = _.template(template)
1922
var html = tpl({
2023
moduleVersion: module.version,
2124
moduleSize: moduleSize,
25+
name: moduleName,
2226
moduleObj: moduleObj,
2327
srcCSS: srcCSS,
2428
navDocs: navDocs,
25-
siteFooter: siteFooter
29+
siteFooter: siteFooter,
30+
googleAnalytics: googleAnalytics,
31+
siteHeader: siteHeader
2632
})
2733

2834
fs.writeFileSync('./docs/themes/borders/index.html', html)

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

+49-82
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,41 @@
66
<title>
77
Borders / Themes / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mrmrs">
9+
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.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-
<h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#themes">Themes</a></h3>
21-
<span class="thin white-40">/</span>
22-
<h4 class="f4 mvn semibold dib">Borders</h4>
23-
<div class="mtl">
24-
<dl class="white-60 prm light dib mrm">
25-
<dt class="db">Version</dt>
26-
<dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
27-
</dl>
28-
<dl class="white-60 light dib mrm">
29-
<dt class="db">Filesize</dt>
30-
<dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
31-
</dl>
32-
<div class="cf">
33-
<dl class="white-60 dib mrm mtn">
34-
<dt class="db">Declarations </dt>
35-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
15+
<%= siteHeader %>
16+
<main class="">
17+
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
18+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
19+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
20+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
21+
<div>
22+
<dl class="dib mr4 mt0">
23+
<dt class="f6 db">Declarations </dt>
24+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></span></dd>
3625
</dl>
37-
<dl class="white-60 dib mrm">
38-
<dt class="db prs">Selectors </dt>
39-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
26+
<dl class="dib mr4">
27+
<dt class="f6 db pr2">Selectors </dt>
28+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
4029
</dl>
41-
<dl class="white-60 dib mrm">
42-
<dt class="db prs">Max. Specificity Score </dt>
43-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
30+
<dl class="dib mr4">
31+
<dt class="f6 db pr2">Max. Specificity Score </dt>
32+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
4433
</dl>
45-
<dl class="white-60 dib mrm">
46-
<dt class="db prs">Size of Avg. Rule </dt>
47-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
34+
<dl class="dib mr4">
35+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
36+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
4837
</dl>
49-
</div>
5038
</div>
51-
</div>
52-
<div class="phm phl-ns pvm">
53-
<p class="measure f3 lh-copy">
54-
There is a base border module that can be extended with the
55-
border-width, border-color, border-style modules. By default you
56-
don't need to set a border color. It will just inherit whatever the
57-
text color is for that dom node. You can target any side to put a border
58-
on ie. top, right, bottom, left.
59-
</p>
60-
</div>
61-
</header>
62-
<main class="">
63-
<div class="phm phl-ns ptl pbxl">
39+
</article>
40+
<div class="ph3 ph5-ns pt4 pb5">
6441
<h2 class="f3 bold">Examples</h2>
6542
<div>
66-
<h3 class="f5 book ptl caps">Border Base</h3>
43+
<h3 class="f5 book pt4 caps">Border Base</h3>
6744
<code class="ba pas f5 nowrap bg-near-white db mbs">
6845
1px solid border on all sides
6946
</code>
@@ -81,7 +58,7 @@ <h3 class="f5 book ptl caps">Border Base</h3>
8158
</code>
8259
</div>
8360
<div>
84-
<h3 class="f5 book ptl caps">Border Styles</h3>
61+
<h3 class="f5 book pt4 caps">Border Styles</h3>
8562
<code class="ba bs-dotted pas f5 nowrap bg-near-white db mbs">
8663
Dotted
8764
</code>
@@ -90,7 +67,7 @@ <h3 class="f5 book ptl caps">Border Styles</h3>
9067
</code>
9168
</div>
9269
<div>
93-
<h3 class="f5 book ptl caps">Border Widths - Solid</h3>
70+
<h3 class="f5 book pt4 caps">Border Widths - Solid</h3>
9471
<code class="ba bw1 pas f5 nowrap bg-near-white db mbs">
9572
border-width: .125rem
9673
</code>
@@ -106,7 +83,7 @@ <h3 class="f5 book ptl caps">Border Widths - Solid</h3>
10683
<code class="ba bw5 pas f5 nowrap bg-near-white db mbs">
10784
border-width: 2rem
10885
</code>
109-
<h3 class="f5 book ptl caps">Border Widths - Dotted</h3>
86+
<h3 class="f5 book pt4 caps">Border Widths - Dotted</h3>
11087
<code class="ba bs-dotted bw1 pas f5 nowrap bg-near-white db mbs">
11188
border-width: .125rem
11289
</code>
@@ -116,35 +93,35 @@ <h3 class="f5 book ptl caps">Border Widths - Dotted</h3>
11693
<code class="ba bs-dotted bw3 phs pvm f5 nowrap bg-near-white db mbm">
11794
border-width: .5rem
11895
</code>
119-
<code class="ba bs-dotted bw4 phs pvl f5 nowrap bg-near-white db mbl">
96+
<code class="ba bs-dotted bw4 phs pv4 f5 nowrap bg-near-white db mbl">
12097
border-width: 1rem
12198
</code>
122-
<code class="ba bs-dotted bw5 phs pvl f5 nowrap bg-near-white db mbl">
99+
<code class="ba bs-dotted bw5 phs pv4 f5 nowrap bg-near-white db mbl">
123100
border-width: 2rem
124101
</code>
125102
</div>
126-
<div class="mtxl cf">
127-
<div class="dib mrl">
128-
<h1 class="f4 ttu tracked semibold">Previous</h1>
129-
<a href="/docs/themes/background-size/" class="link semibold blue dim">Background Size</a>
103+
<div class="mt5 cf">
104+
<div class="dib mr4">
105+
<h1 class="f4 ttu tracked fw6">Previous</h1>
106+
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
130107
</div>
131108
<div class="dib">
132-
<h1 class="f4 ttu tracked semibold">Next</h1>
133-
<a href="/docs/themes/border-radius/" class="link semibold blue dim">Border Radius</a>
109+
<h1 class="f4 ttu tracked fw6">Next</h1>
110+
<a href="/docs/themes/border-radius/" class="link fw6 blue dim">Border Radius</a>
134111
</div>
135112
</div>
136-
<div class="mtxl">
137-
<h1 class="f4 ttu tracked semibold">Reference</h1>
138-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" class="link db semibold blue dim">MDN - Border</a>
139-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style" class="link db semibold blue dim">MDN - Border Style</a>
140-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width" class="link db semibold blue dim">MDN - Border Width</a>
113+
<div class="mt5">
114+
<h1 class="f4 ttu tracked fw6">Reference</h1>
115+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" class="link db fw6 blue dim">MDN - Border</a>
116+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style" class="link db fw6 blue dim">MDN - Border Style</a>
117+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width" class="link db fw6 blue dim">MDN - Border Width</a>
141118
</div>
142119
</div>
143-
<section class="bg-dark-gray white ptl pbxl">
144-
<header class="phm phl-ns ptl">
120+
<section class="bg-near-white black-70 pt4 pb5">
121+
<header class="ph3 ph5-ns pt4">
145122
<kbd class="yellow">src/_borders.css</kbd>
146123
</header>
147-
<pre class="phm phl-ns">
124+
<pre class="ph3 ph5-ns">
148125
<code class="small">
149126
/*
150127

@@ -236,10 +213,10 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
236213
}
237214
</code>
238215
</pre>
239-
<header class="phm phl-ns ptl">
216+
<header class="ph3 ph5-ns pt4">
240217
<kbd class="yellow">src/_border-style.css</kbd>
241218
</header>
242-
<pre class="phm phl-ns">
219+
<pre class="ph3 ph5-ns">
243220
<code class="small">
244221

245222
/*
@@ -284,28 +261,18 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
284261
}
285262
</code>
286263
</pre>
287-
<header class="phm phl-ns ptl">
264+
<header class="ph3 ph5-ns pt4">
288265
<kbd class="yellow">src/_border-widths.css</kbd>
289266
</header>
290-
<pre class="phm phl-ns">
291-
<code class="small">
267+
<pre class="ph3 ph5-ns">
268+
<code class="code" style="font-size: .75rem;">
292269
<%= srcCSS %>
293270
</code>
294271
</pre>
295272
</section>
296273
<%= navDocs %>
297274
</main>
298-
<%= siteFooter %>
299-
300-
<script>
301-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
302-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
303-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
304-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
305-
306-
ga('create', 'UA-55773803-1', 'auto');
307-
ga('send', 'pageview');
308-
309-
</script>
275+
<%= siteFooter %>
276+
<%= googleAnalytics %>
310277
</body>
311278
</html>

0 commit comments

Comments
 (0)