Skip to content

Commit b53391a

Browse files
author
mrmrs
committed
Add documentation for font-style
1 parent 7de477b commit b53391a

File tree

4 files changed

+362
-1
lines changed

4 files changed

+362
-1
lines changed

‎docs/typography/font-style/index.html

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<title>
7+
Font Style / Typography / Docs / TACHYONS
8+
</title>
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="CSS">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
13+
</head>
14+
<body class="w-100 sans-serif">
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 class="">
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
45+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-font-style</h4>
46+
<span class="f4 b dib pl0 ml0 mr4">v3.0.0</span>
47+
<span class="f4 b dib pl0 ml0 mr4">132 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">8</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">8</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">10</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">
67+
Single purpose classes to set the font-style of any element at any breakpoint.
68+
</p>
69+
<p class="measure f5 f4-ns lh-copy">
70+
Italics can be used to empshasie on a piece of content. Some common uses of
71+
italics include: titles, vehicle names, letters of the alphabet, scientific terms, and quotes.
72+
</p>
73+
</article>
74+
<div class="ph3 ph5-ns pt4 pb5">
75+
<h2 class="f3 bold">Examples</h2>
76+
<code class="f6">
77+
&lt;p class="i"&gt;&lt;/p&gt;
78+
</code>
79+
<p class="i mb4">
80+
Readers want what is important to be clearly laid out; they will not read
81+
what is too troublesome.
82+
</p>
83+
<code class="f6">
84+
&lt;p class="fs-normal"&gt;&lt;/p&gt;
85+
</code>
86+
<p class="fs-normal">
87+
A quote from Jan Tschichold about typography.
88+
</p>
89+
<div class="mt5 cf">
90+
<div class="dib mr4">
91+
<h1 class="f4 ttu tracked fw6">Previous</h1>
92+
<a href="/docs/typography/tracking/" class="link fw6 blue dim">Tracking</a>
93+
</div>
94+
<div class="dib">
95+
<h1 class="f4 ttu tracked fw6">Next</h1>
96+
<a href="/docs/typography/font-family/" class="link fw6 blue dim">Font Family</a>
97+
</div>
98+
</div>
99+
<div class="mt5">
100+
<h1 class="f4 ttu tracked fw6">Reference</h1>
101+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
102+
</div>
103+
</div>
104+
<section class="bg-near-white black-70 pt4 pb5">
105+
<header class="ph3 ph5-ns pt4">
106+
<kbd class="yellow">src/_font-weights.css</kbd>
107+
</header>
108+
<pre class="ph3 ph5-ns">
109+
<code class="code" style="font-size: .75rem;">
110+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
111+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
112+
@custom-media --breakpoint-large screen and (min-width: 64em);
113+
114+
/*
115+
116+
FONT STYLE
117+
118+
*/
119+
120+
.i { font-style: italic; }
121+
.fsn { font-style: normal; }
122+
123+
@media (--breakpoint-not-small) {
124+
.i-ns { font-style: italic; }
125+
.fsn-ns { font-style: normal; }
126+
}
127+
128+
@media (--breakpoint-medium) {
129+
.i-m { font-style: italic; }
130+
.fsn-m { font-style: normal; }
131+
}
132+
133+
@media (--breakpoint-large) {
134+
.i-l { font-style: italic; }
135+
.fsn-l { font-style: normal; }
136+
}
137+
138+
</code>
139+
</pre>
140+
</section>
141+
<div class="ph3 ph5-ns pt3 pb5">
142+
<section>
143+
<h2 class="f6 fw7 ttu tracked">General</h2>
144+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
145+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
146+
<section class="cf w-100 mt3">
147+
<article class="fn fl-ns w-100 w-25-l">
148+
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
149+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
150+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
151+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
152+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
153+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
154+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
155+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
156+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
157+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
158+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
159+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
160+
</article>
161+
<article class="fn fl-ns w-100 w-25-l">
162+
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
163+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
164+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
165+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
166+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
167+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
168+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
169+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
170+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
171+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
172+
</article>
173+
<article class="fn fl-ns w-100 w-25-l">
174+
<h2 class="f6 fw7 ttu tracked">Theming</h2>
175+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
176+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
177+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
178+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
179+
</article>
180+
</section>
181+
</section>
182+
</div>
183+
184+
</main>
185+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
186+
<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;">
187+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
188+
<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"/>
189+
</svg>
190+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
191+
</a>
192+
<article>
193+
<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>
194+
<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>
195+
</article>
196+
197+
<p>
198+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
199+
Join our Slack Channel
200+
</a>
201+
<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!">
202+
Open an Issue
203+
</a>
204+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
205+
GitHub
206+
</a>
207+
</p>
208+
<p class="measure copy lh-copy">
209+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
210+
question in our slack channel. We're here to try and help make designing in
211+
the browser fun.
212+
</p>
213+
<small class="f6 measure db lh-copy mt5">
214+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
215+
that always moves faster than light.
216+
The word comes from the Greek:
217+
<br> <br>
218+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
219+
</small>
220+
</footer>
221+
222+
<script>
223+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
224+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
225+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
226+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
227+
228+
ga('create', 'UA-55773803-1', 'auto');
229+
ga('send', 'pageview');
230+
231+
</script>
232+
233+
</body>
234+
</html>

‎lib/font-style.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 cssstats = require('cssstats')
6+
7+
8+
var module = require('tachyons-font-style/package.json')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-font-style/css/tachyons-font-style.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/_font-style.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')
19+
20+
21+
var template = fs.readFileSync('./src/templates/docs/font-style/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/typography/font-style/index.html', html)

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"tachyons-display": "^3.0.3",
6868
"tachyons-floats": "^2.0.3",
6969
"tachyons-font-family": "^4.1.0",
70-
"tachyons-font-style": "^2.2.2",
70+
"tachyons-font-style": "^3.0.0",
7171
"tachyons-font-weight": "^4.0.2",
7272
"tachyons-forms": "^2.0.1",
7373
"tachyons-heights": "^4.0.2",

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

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<title>
7+
Font Style / Typography / Docs / TACHYONS
8+
</title>
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="CSS">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
13+
</head>
14+
<body class="w-100 sans-serif">
15+
<%= siteHeader %>
16+
<main class="">
17+
<article class="bg-near-white bt b--black-10 pa3 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>
25+
</dl>
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>
29+
</dl>
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>
33+
</dl>
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>
37+
</dl>
38+
</div>
39+
<p class="measure f4 f3-ns lh-copy">
40+
Single purpose classes to set the font-style of any element at any breakpoint.
41+
</p>
42+
<p class="measure f5 f4-ns lh-copy">
43+
Italics can be used to empshasie on a piece of content. Some common uses of
44+
italics include: titles, vehicle names, letters of the alphabet, scientific terms, and quotes.
45+
</p>
46+
</article>
47+
<div class="ph3 ph5-ns pt4 pb5">
48+
<h2 class="f3 bold">Examples</h2>
49+
<code class="f6">
50+
&lt;p class="i"&gt;&lt;/p&gt;
51+
</code>
52+
<p class="i mb4">
53+
Readers want what is important to be clearly laid out; they will not read
54+
what is too troublesome.
55+
</p>
56+
<code class="f6">
57+
&lt;p class="fs-normal"&gt;&lt;/p&gt;
58+
</code>
59+
<p class="fs-normal">
60+
A quote from Jan Tschichold about typography.
61+
</p>
62+
<div class="mt5 cf">
63+
<div class="dib mr4">
64+
<h1 class="f4 ttu tracked fw6">Previous</h1>
65+
<a href="/docs/typography/tracking/" class="link fw6 blue dim">Tracking</a>
66+
</div>
67+
<div class="dib">
68+
<h1 class="f4 ttu tracked fw6">Next</h1>
69+
<a href="/docs/typography/font-family/" class="link fw6 blue dim">Font Family</a>
70+
</div>
71+
</div>
72+
<div class="mt5">
73+
<h1 class="f4 ttu tracked fw6">Reference</h1>
74+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
75+
</div>
76+
</div>
77+
<section class="bg-near-white black-70 pt4 pb5">
78+
<header class="ph3 ph5-ns pt4">
79+
<kbd class="yellow">src/_font-weights.css</kbd>
80+
</header>
81+
<pre class="ph3 ph5-ns">
82+
<code class="code" style="font-size: .75rem;">
83+
<%= srcCSS %>
84+
</code>
85+
</pre>
86+
</section>
87+
<%= navDocs %>
88+
</main>
89+
<%= siteFooter %>
90+
<%= googleAnalytics %>
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)