Skip to content

Commit f56209f

Browse files
author
mrmrs
committed
Updating source with opacity module.
Add some more docs. Bumping version number
1 parent a456e4e commit f56209f

File tree

8 files changed

+420
-2
lines changed

8 files changed

+420
-2
lines changed

‎css/tachyons.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -644,6 +644,23 @@ code, .code { font-family: Consolas, monaco, monospace; }
644644
645645
*/
646646
.list { list-style-type: none; }
647+
/*
648+
649+
Opacity
650+
651+
*/
652+
.o-100 { opacity: 1; }
653+
.o-90 { opacity: .9; }
654+
.o-80 { opacity: .8; }
655+
.o-70 { opacity: .7; }
656+
.o-60 { opacity: .6; }
657+
.o-50 { opacity: .5; }
658+
.o-40 { opacity: .4; }
659+
.o-30 { opacity: .3; }
660+
.o-20 { opacity: .2; }
661+
.o-10 { opacity: .1; }
662+
.o-05 { opacity: .05; }
663+
.o-025 { opacity: .025; }
647664
/*
648665
649666
MAX WIDTHS

‎css/tachyons.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/themes/opacity/index.html

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
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+
Opacity / General / 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-5</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-opacity</h4>
46+
<p class="measure lh-copy f5 f4-ns">
47+
This module is a sequence of opacity values that you can apply to any element to adjust the opacity of text, backgrounds, and images.
48+
These can be used in some creative ways to achieve some interesting visual effects.
49+
</p>
50+
</article>
51+
<div class="ph3 ph5-ns pt4 pb5">
52+
<h2 class="f3 bold">Examples</h2>
53+
<h3 class="f5 book pt4 caps">Opacity scale</h3>
54+
<code class="f6 db mv3"></code>
55+
<section class="cf">
56+
<div class="fl w-50 w-33-ns">
57+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-90"&gt;</code>
58+
<img src="/img/over-canvas.jpg" class="w-100 o-90">
59+
</div>
60+
<div class="fl w-50 w-33-ns">
61+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-80"&gt;</code>
62+
<img src="/img/over-canvas.jpg" class="w-100 o-80">
63+
</div>
64+
<div class="fl w-50 w-33-ns">
65+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-70"&gt;</code>
66+
<img src="/img/over-canvas.jpg" class="w-100 o-70">
67+
</div>
68+
<div class="fl w-50 w-33-ns">
69+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-60"&gt;</code>
70+
<img src="/img/over-canvas.jpg" class="w-100 o-60">
71+
</div>
72+
<div class="fl w-50 w-33-ns">
73+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-50"&gt;</code>
74+
<img src="/img/over-canvas.jpg" class="w-100 o-50">
75+
</div>
76+
<div class="fl w-50 w-33-ns">
77+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-40"&gt;</code>
78+
<img src="/img/over-canvas.jpg" class="w-100 o-40">
79+
</div>
80+
<div class="fl w-50 w-33-ns">
81+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-30"&gt;</code>
82+
<img src="/img/over-canvas.jpg" class="w-100 o-30">
83+
</div>
84+
<div class="fl w-50 w-33-ns">
85+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-20"&gt;</code>
86+
<img src="/img/over-canvas.jpg" class="w-100 o-20">
87+
</div>
88+
<div class="fl w-50 w-33-ns">
89+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-10"&gt;</code>
90+
<img src="/img/over-canvas.jpg" class="w-100 o-10">
91+
</div>
92+
<div class="fl w-50">
93+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-20"&gt;</code>
94+
<img src="/img/over-canvas.jpg" class="w-100 o-05">
95+
</div>
96+
<div class="fl w-50">
97+
<code class="f6 db mv3">&lt;img src="#" class="w-100 o-10"&gt;</code>
98+
<img src="/img/over-canvas.jpg" class="w-100 o-025">
99+
</div>
100+
</section>
101+
102+
<div class="mt5 cf">
103+
<div class="dib mr4">
104+
<h1 class="f4 ttu tracked fw6">Previous</h1>
105+
<a href="/docs/debug/" class="link fw6 blue dim">Debug</a>
106+
</div>
107+
<div class="dib">
108+
<h1 class="f4 ttu tracked fw6">Next</h1>
109+
<a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</a>
110+
</div>
111+
</div>
112+
<div class="mt5">
113+
<h1 class="f4 ttu tracked fw6">Reference</h1>
114+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" class="db link fw6 blue dim">MDN - Images HTML</a>
115+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" class="db link fw6 blue dim">MDN - Images CSS</a>
116+
</div>
117+
</div>
118+
<section class="bg-near-white black-70 pt4 pb5">
119+
<header class="ph3 ph5-ns pt4">
120+
<kbd class="yellow">src/_images.css</kbd>
121+
</header>
122+
<pre class="ph3 ph5-ns">
123+
<code class="code" style="font-size: .75rem;">
124+
/*
125+
126+
Opacity
127+
128+
*/
129+
130+
.o-100 { opacity: 1; }
131+
.o-90 { opacity: .9; }
132+
.o-80 { opacity: .8; }
133+
.o-70 { opacity: .7; }
134+
.o-60 { opacity: .6; }
135+
.o-50 { opacity: .5; }
136+
.o-40 { opacity: .4; }
137+
.o-30 { opacity: .3; }
138+
.o-20 { opacity: .2; }
139+
.o-10 { opacity: .1; }
140+
.o-05 { opacity: .05; }
141+
.o-025 { opacity: .025; }
142+
143+
</code>
144+
</pre>
145+
</section>
146+
<div class="ph3 ph5-ns pt3 pb5">
147+
<section>
148+
<h2 class="f6 fw7 ttu tracked">General</h2>
149+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
150+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
151+
<section class="cf w-100 mt3">
152+
<article class="fn fl-ns w-100 w-25-l">
153+
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
154+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
155+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
156+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
157+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
158+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
159+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
160+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a>
161+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
162+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
163+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
164+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
165+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
166+
</article>
167+
<article class="fn fl-ns w-100 w-25-l">
168+
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
169+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
170+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
171+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
172+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
173+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
174+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
175+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
176+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
177+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
178+
</article>
179+
<article class="fn fl-ns w-100 w-25-l">
180+
<h2 class="f6 fw7 ttu tracked">Theming</h2>
181+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a>
182+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
183+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
184+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
185+
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
186+
</article>
187+
</section>
188+
</section>
189+
</div>
190+
191+
</main>
192+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
193+
<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;">
194+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
195+
<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"/>
196+
</svg>
197+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
198+
</a>
199+
<article>
200+
<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>
201+
<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>
202+
</article>
203+
204+
<p>
205+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
206+
Join our Slack Channel
207+
</a>
208+
<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!">
209+
Open an Issue
210+
</a>
211+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
212+
GitHub
213+
</a>
214+
</p>
215+
<p class="measure copy lh-copy">
216+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
217+
question in our slack channel. We're here to try and help make designing in
218+
the browser fun.
219+
</p>
220+
<small class="f6 measure db lh-copy mt5">
221+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
222+
that always moves faster than light.
223+
The word comes from the Greek:
224+
<br> <br>
225+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
226+
</small>
227+
</footer>
228+
229+
<script>
230+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
231+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
232+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
233+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
234+
235+
ga('create', 'UA-55773803-1', 'auto');
236+
ga('send', 'pageview');
237+
238+
</script>
239+
240+
</body>
241+
</html>

‎lib/opacity.js

Lines changed: 35 additions & 0 deletions
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-opacity/package.json')
9+
var moduleCss = fs.readFileSync('node_modules/tachyons-opacity/css/tachyons-opacity.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/_opacity.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/opacity/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/themes/opacity/index.html', html)

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"tachyons-lists": "^2.0.3",
8282
"tachyons-max-widths": "^3.1.0",
8383
"tachyons-overflow": "^3.0.0",
84+
"tachyons-opacity": "^1.0.0",
8485
"tachyons-position": "^5.0.0",
8586
"tachyons-queries": "^0.3.1",
8687
"tachyons-skins": "^3.0.0",

‎readme.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Documentation for Tachyons -- a performant, mobile-first, and 100% responsive mo
44

55
#### Stats
66

7-
12166 | 1400 | 1561
7+
12244 | 1412 | 1573
88
---|---|---
99
bytes | selectors | declarations
1010

@@ -702,6 +702,23 @@ code, .code { font-family: Consolas, monaco, monospace; }
702702
703703
*/
704704
.list { list-style-type: none; }
705+
/*
706+
707+
Opacity
708+
709+
*/
710+
.o-100 { opacity: 1; }
711+
.o-90 { opacity: .9; }
712+
.o-80 { opacity: .8; }
713+
.o-70 { opacity: .7; }
714+
.o-60 { opacity: .6; }
715+
.o-50 { opacity: .5; }
716+
.o-40 { opacity: .4; }
717+
.o-30 { opacity: .3; }
718+
.o-20 { opacity: .2; }
719+
.o-10 { opacity: .1; }
720+
.o-05 { opacity: .05; }
721+
.o-025 { opacity: .025; }
705722
/*
706723
707724
MAX WIDTHS

‎src/css/tachyons.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
@import './_line-height';
3535
@import './_links';
3636
@import './_lists';
37+
@import './_opacity';
3738
@import './_max-widths';
3839
@import './_widths';
3940
@import './_overflow';

0 commit comments

Comments
 (0)