Skip to content

Commit bebcf8e

Browse files
author
mrmrs
committed
Update the components and templates
1 parent cef89ad commit bebcf8e

File tree

20 files changed

+1213
-538
lines changed

20 files changed

+1213
-538
lines changed

‎src/components/headers/startup-hero.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<header class="sans-serif">
5+
<div class="cover bg-left bg-center-l" style="background-image: url(http://mrmrs.io/photos/u/011.jpg)">
6+
<div class="bg-black-80 pb5 pb6-m pb7-l">
7+
<nav class="dt w-100 mw8 center">
8+
<div class="dtc w2 v-mid pa3">
9+
<a href="/" class="dib w2 h2 pa1 ba b--white-90 grow-large border-box">
10+
<svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
11+
</a>
12+
</div>
13+
<div class="dtc v-mid tr pa3">
14+
<a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >How it Works</a>
15+
<a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >Pricing</a>
16+
<a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >About</a>
17+
<a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >Careers</a>
18+
<a class="f6 fw4 hover-white no-underline white-70 dib ml2 pv2 ph3 ba" href="/" >Sign Up</a>
19+
</div>
20+
</nav>
21+
<div class="tc-l mt4 mt5-m mt6-l ph3">
22+
<h1 class="f2 f1-l fw2 white-90 mb0 lh-title">This is your super impressive headline</h1>
23+
<h2 class="fw1 f3 white-80 mt3 mb4">Now a subheadline where explain your wonderful new startup even more</h2>
24+
<a class="f6 no-underline grow dib v-mid bg-blue white ba b--blue ph3 pv2 mb3" href="/">Call to Action</a>
25+
<span class="dib v-mid ph3 white-70 mb3">or</span>
26+
<a class="f6 no-underline grow dib v-mid white ba b--white ph3 pv2 mb3" href="">Secondary call to action</a>
27+
</div>
28+
</div>
29+
</div>
30+
</header>

‎src/components/nav/logo-titles-links-centered.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<header class="bg-white black-80 tc pv4 avenir">
5+
<a href="" class="bg-black-80 ba b--black dib pa3 w2 h2 br-100">
6+
<svg class="white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
7+
</a>
8+
<h1 class="mt2 mb0 baskerville i fw1 f1">Title</h1>
9+
<h2 class="mt2 mb0 f6 fw4 ttu tracked">Your amazing subtitle</h2>
10+
<nav class="bt bb tc mw7 center mt4">
11+
<a class="f6 f5-l link bg-animate black-80 hover-bg-lightest-blue dib pa3 ph4-l" href="/">Home</a>
12+
<a class="f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" href="/portfolio">Portfolio</a>
13+
<a class="f6 f5-l link bg-animate black-80 hover-bg-light-blue dib pa3 ph4-l" href="/shop">Shop</a>
14+
<a class="f6 f5-l link bg-animate black-80 hover-bg-light-pink dib pa3 ph4-l" href="/about">About</a>
15+
<a class="f6 f5-l link bg-animate black-80 hover-bg-light-yellow dib pa3 ph4-l" href="/contact">Contact</a>
16+
</nav>
17+
</header>

‎src/modules/skins-pseudo.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var _ = require('lodash')
2+
var fs = require('fs')
3+
var gzip = require('gzip-size')
4+
var filesize = require('filesize')
5+
var cssstats = require('cssstats')
6+
7+
8+
var module = require('tachyons-skins-pseudos/package.json')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-skins-pseudos/css/tachyons-skins-pseudos.min.css', 'utf8')
10+
var moduleObj = cssstats(moduleCss)
11+
var moduleSize = filesize(moduleObj.gzipSize)
12+
var moduleName = module.name
13+
14+
var srccss = fs.readFileSync('./src/css/_skins-pseudos.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 head = fs.readFileSync('./src/templates/head.html', 'utf8')
19+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
20+
21+
var template = fs.readFileSync('./src/templates/docs/skins-pseudos/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+
head: head,
33+
siteHeader: siteHeader
34+
})
35+
36+
fs.writeFileSync('./docs/themes/skins-pseudos/index.html', html)

‎src/modules/videos.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var _ = require('lodash')
2+
var fs = require('fs')
3+
var filesize = require('filesize')
4+
5+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
6+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
7+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
8+
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
9+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
10+
11+
12+
var template = fs.readFileSync('./src/templates/videos.html', 'utf8')
13+
var tpl = _.template(template)
14+
var html = tpl({
15+
navDocs: navDocs,
16+
siteFooter: siteFooter,
17+
googleAnalytics: googleAnalytics,
18+
head: head,
19+
siteHeader: siteHeader
20+
})
21+
22+
fs.writeFileSync('./videos/index.html', html)

‎src/templates/docs/font-family/index.html

+42-24
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
11
<!DOCTYPE html>
2+
23
<html lang="en">
34
<head>
45
<title>
56
<%= name %> / Typography / Docs / TACHYONS
67
</title>
7-
<meta name="description" content="">
8+
<meta name="description" content="Documentation about the system fonts available for use with Tachyons">
89
<%= head %>
910
</head>
1011
<body class="w-100 sans-serif">
1112
<%= siteHeader %>
1213
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
14-
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
15-
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
16-
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
17-
<div>
18-
<dl class="dib mr4 mt0">
19-
<dt class="f6 db">Declarations </dt>
20-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
21-
</dl>
22-
<dl class="dib mr4">
23-
<dt class="f6 db pr2">Selectors </dt>
24-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
25-
</dl>
26-
<dl class="dib mr4">
27-
<dt class="f6 db pr2">Max. Specificity Score </dt>
28-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
29-
</dl>
30-
<dl class="dib mr4">
31-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
32-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
33-
</dl>
14+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
15+
<div class="nowrap mw9 center">
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale/" title="Type">Type Scale</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height/" title="Line Height">Line Height / Leading</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking/" title="Tracking">Tracking</a>
20+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight/" title="Font Weights">Font Weights</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style/" title="Font style">Font Style</a>
22+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align/" title="Vertical Align">Vertical Align</a>
23+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align/" title="Text Align">Text Align</a>
24+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
25+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
26+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>
27+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a>
3428
</div>
29+
</header>
30+
<article class="pa3 ph5-ns">
31+
<h3 class="f6 ttu tracked mt0">Font Family</h3>
3532
<p class="measure f4 f3-ns lh-copy">
3633
There are several pre-defined classes for setting the typeface of a page or element. It is suggested
3734
that you customize or extend this module to suit your own needs. As tachyons is a toolkit for designing
@@ -46,7 +43,7 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4643
</p>
4744
</article>
4845
<div class="ph3 ph5-ns pt4 pb5">
49-
<h2 class="f3 bold">Examples</h2>
46+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
5047
<h3 class="f5 fw4 sans-serif pt4">Default System Sans Serif</h3>
5148
<p class="system-sans-serif lh-copy measure">
5249
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
@@ -160,8 +157,29 @@ <h4 class="f6 fw6">Reference</h4>
160157
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" class="link fw6 blue dim">MDN - Font Family</a>
161158
</div>
162159
</div>
163-
<section class="bg-white black-70 pt4 pb5 overflow-container">
160+
<section class="bg-white bt bb b--black-40 black-70 pt4 pb5 overflow-container">
164161
<header class="ph3 ph5-ns pt4">
162+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
163+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
164+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
165+
<div>
166+
<dl class="dib mr4 mt0">
167+
<dt class="f6 db">Declarations </dt>
168+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
169+
</dl>
170+
<dl class="dib mr4">
171+
<dt class="f6 db pr2">Selectors </dt>
172+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
173+
</dl>
174+
<dl class="dib mr4">
175+
<dt class="f6 db pr2">Max. Specificity Score </dt>
176+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
177+
</dl>
178+
<dl class="dib mr4">
179+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
180+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
181+
</dl>
182+
</div>
165183
<kbd>src/_font-families.css</kbd>
166184
</header>
167185
<pre class="ph3 ph5-ns">

‎src/templates/docs/font-style/index.html

+41-24
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,30 @@
44
<title>
55
Font Style / Typography / Docs / TACHYONS
66
</title>
7-
<meta name="description" content="css">
7+
<meta name="description" content="Documentation for setting font style with the Tachyons css framework.">
88
<%= head %>
99
</head>
1010
<body class="w-100 sans-serif">
1111
<%= siteHeader %>
1212
<main class="bg-white black-70">
13-
<article class="bt b--black-10 pa3 ph5-ns">
14-
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
15-
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
16-
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
17-
<div>
18-
<dl class="dib mr4 mt0">
19-
<dt class="f6 db">Declarations </dt>
20-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
21-
</dl>
22-
<dl class="dib mr4">
23-
<dt class="f6 db pr2">Selectors </dt>
24-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
25-
</dl>
26-
<dl class="dib mr4">
27-
<dt class="f6 db pr2">Max. Specificity Score </dt>
28-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
29-
</dl>
30-
<dl class="dib mr4">
31-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
32-
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
33-
</dl>
13+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale/" title="Type">Type Scale</a>
16+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
17+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height/" title="Line Height">Line Height / Leading</a>
18+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking/" title="Tracking">Tracking</a>
19+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight/" title="Font Weights">Font Weights</a>
20+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style/" title="Font style">Font Style</a>
21+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align/" title="Vertical Align">Vertical Align</a>
22+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align/" title="Text Align">Text Align</a>
23+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
24+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
25+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>
26+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a>
3427
</div>
28+
</header>
29+
<article class="pa3 ph5-ns">
30+
<h3 class="f6 ttu tracked mt0">Measure</h3>
3531
<p class="measure f4 f3-ns lh-copy">
3632
Single purpose classes to set the font-style of any element at any breakpoint.
3733
</p>
@@ -41,7 +37,7 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4137
</p>
4238
</article>
4339
<div class="ph3 ph5-ns pt4 pb5">
44-
<h2 class="f3 bold">Examples</h2>
40+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
4541
<code class="f6">
4642
&lt;p class="i"&gt;&lt;/p&gt;
4743
</code>
@@ -70,8 +66,29 @@ <h4 class="f6 fw6">Reference</h4>
7066
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
7167
</div>
7268
</div>
73-
<section class="bg-white black-70 pt4 pb5 overflow-container">
69+
<section class="bg-white black-70 bt bb b--black-40 pt4 pb5 overflow-container">
7470
<header class="ph3 ph5-ns pt4">
71+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
72+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
73+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
74+
<div>
75+
<dl class="dib mr4 mt0">
76+
<dt class="f6 db">Declarations </dt>
77+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
78+
</dl>
79+
<dl class="dib mr4">
80+
<dt class="f6 db pr2">Selectors </dt>
81+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
82+
</dl>
83+
<dl class="dib mr4">
84+
<dt class="f6 db pr2">Max. Specificity Score </dt>
85+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
86+
</dl>
87+
<dl class="dib mr4">
88+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
89+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
90+
</dl>
91+
</div>
7592
<kbd>src/_font-style.css</kbd>
7693
</header>
7794
<pre class="ph3 ph5-ns">

0 commit comments

Comments
 (0)