Skip to content

Commit 670fda2

Browse files
author
mrmrs
committed
Update docs page for border-radius.
1 parent c5a3341 commit 670fda2

File tree

2 files changed

+54
-79
lines changed

2 files changed

+54
-79
lines changed

‎lib/border-radius.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,31 @@ var gzip = require('gzip-size')
44
var filesize = require('filesize')
55
var cssstats = require('cssstats')
66

7+
78
var module = require('tachyons-border-radius/package.json')
8-
var moduleCss = fs.readFileSync('node_modules/tachyons-border-radius/tachyons-border-radius.min.css', 'utf8')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-border-radius/css/tachyons-border-radius.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/_border-radius.css', 'utf8')
13-
var navDocs = fs.readFileSync('./templates/nav_docs.html', 'utf8')
14-
var siteFooter = fs.readFileSync('./templates/footer.html', 'utf8')
14+
var srcCSS = fs.readFileSync('./src/css/_border-radius.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')
1519

16-
var template = fs.readFileSync('./templates/docs/border-radius/index.html', 'utf8')
20+
var template = fs.readFileSync('./src/templates/docs/border-radius/index.html', 'utf8')
1721
var tpl = _.template(template)
1822
var html = tpl({
1923
moduleVersion: module.version,
2024
moduleSize: moduleSize,
25+
name: moduleName,
2126
moduleObj: moduleObj,
2227
srcCSS: srcCSS,
2328
navDocs: navDocs,
24-
siteFooter: siteFooter
29+
siteFooter: siteFooter,
30+
googleAnalytics: googleAnalytics,
31+
siteHeader: siteHeader
2532
})
2633

2734
fs.writeFileSync('./docs/themes/border-radius/index.html', html)

‎src/templates/docs/border-radius/index.html

Lines changed: 41 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,47 @@
66
<title>
77
Border Radius / 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">Border Radius</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 five step scale for border radius in addition to a utility
55-
that sets border radius to 100%, which when combined with an explicit
56-
height and width will produce a circle.
57-
</p>
58-
59-
</div>
60-
</header>
61-
<main class="">
62-
<div class="phm phl-ns ptl pbxl">
39+
</article>
40+
<div class="ph3 ph5-ns pt4 pb5">
6341
<h2 class="f3 bold">Examples</h2>
64-
<h3 class="f5 book ptl caps">Border Radius</h3>
65-
<div class="mbm phs pvl white bg-dark-gray br1">
42+
<h3 class="f5 book pt4 caps">Border Radius</h3>
43+
<div class="mbm phs pv4 white bg-dark-gray br1">
6644
1st step in border-radius scale
6745
</div>
68-
<div class="mbm phs pvl white bg-dark-gray br2">
46+
<div class="mbm phs pv4 white bg-dark-gray br2">
6947
2nd step in border-radius scale
7048
</div>
71-
<div class="mbm phs pvl white bg-dark-gray br3">
49+
<div class="mbm phs pv4 white bg-dark-gray br3">
7250
3rd step in border-radius scale
7351
</div>
7452
<div class="mbm phs pvxl white bg-dark-gray br4">
@@ -82,44 +60,34 @@ <h3 class="f5 book ptl caps">Border Radius</h3>
8260
circle with fixed height &amp; width
8361
</div>
8462
</div>
85-
<div class="mtxl cf">
86-
<div class="dib mrl">
87-
<h1 class="f4 ttu tracked semibold">Previous</h1>
88-
<a href="/docs/themes/borders/" class="link semibold blue dim">Borders</a>
63+
<div class="mt5 cf">
64+
<div class="dib mr4">
65+
<h1 class="f4 ttu tracked fw6">Previous</h1>
66+
<a href="/docs/themes/borders/" class="link fw6 blue dim">Borders</a>
8967
</div>
9068
<div class="dib">
91-
<h1 class="f4 ttu tracked semibold">Next</h1>
92-
<a href="/docs/debug/" class="link semibold blue dim">Debugging</a>
69+
<h1 class="f4 ttu tracked fw6">Next</h1>
70+
<a href="/docs/debug/" class="link fw6 blue dim">Debugging</a>
9371
</div>
9472
</div>
95-
<div class="mtxl">
96-
<h1 class="f4 ttu tracked semibold">Reference</h1>
97-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" class="link semibold blue dim">MDN - Border Radius</a>
73+
<div class="mt5">
74+
<h1 class="f4 ttu tracked fw6">Reference</h1>
75+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" class="link fw6 blue dim">MDN - Border Radius</a>
9876
</div>
9977
</div>
100-
<section class="bg-dark-gray white ptl pbxl">
101-
<header class="phm phl-ns ptl">
78+
<section class="bg-dark-gray white pt4 pb5">
79+
<header class="ph3 ph5-ns pt4">
10280
<kbd class="yellow">src/_border-radius.css</kbd>
10381
</header>
104-
<pre class="phm phl-ns">
105-
<code class="small">
82+
<pre class="ph3 ph5-ns">
83+
<code class="code" style="font-size: .75rem;">
10684
<%= srcCSS %>
10785
</code>
10886
</pre>
10987
</section>
11088
<%= navDocs %>
11189
</main>
112-
<%= siteFooter %>
113-
114-
<script>
115-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
116-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
117-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
118-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
119-
120-
ga('create', 'UA-55773803-1', 'auto');
121-
ga('send', 'pageview');
122-
123-
</script>
90+
<%= siteFooter %>
91+
<%= googleAnalytics %>
12492
</body>
12593
</html>

0 commit comments

Comments
 (0)