Skip to content

Commit 3b8ee72

Browse files
author
mrmrs
committed
Better information density on home page.
1 parent 3cbf42b commit 3b8ee72

File tree

2 files changed

+193
-186
lines changed

2 files changed

+193
-186
lines changed

‎index.html

Lines changed: 96 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -63,120 +63,122 @@ <h1>Getting Started</h1>
6363
<div class="ph3 ph5-ns tl tl-ns">
6464
<h1 class="f4 ttu tracked fw4">Principles</h1>
6565
<section class="list pln lh-copy mt0">
66-
<article class="pv2">
67-
<h2 class="f4 f3-ns fw6 mb0">Everything should be 100% responsive</h2>
68-
<p class="f5 f4-ns measure lh-copy mt0">
69-
Your website should work regardless of a users
70-
device or screensize. Don't break the functionality of HTML
71-
with CSS.
72-
</p>
73-
</article>
74-
<article class="pv2">
75-
<h2 class="f4 f3-ns fw6 mb0">Everything should always be readable</h2>
76-
<p class="f5 f4-ns measure lh-copy mt0">
77-
No matter the lighting, or the device, font-sizes should be large enough and contrast should be high enough.
78-
</p>
79-
</article>
80-
<article class="pv2">
81-
<h2 class="f4 f3-ns fw6 mb0">Everything should be as performant as possible</h2>
82-
<p class="f5 f4-ns measure lh-copy mt0">
83-
Code isn't for making a developers life easier. It's for
84-
improving the lives of our users. If it's not doing that, why
85-
write it. A developer's time is not precious. A user's time is.
86-
</p>
87-
</article>
88-
<article class="pv2">
89-
<h2 class="f4 f3-ns fw6 mb0">Designing in the browser should be easy</h2>
90-
<p class="f5 f4-ns measure lh-copy mt0">
91-
If a computer can do it, you shouldn't have to.
92-
</p>
93-
</article>
94-
<article class="pv2">
66+
<div class="cf">
67+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
68+
<h2 class="f4 f3-ns fw6 mb0">Responsive</h2>
69+
<p class="f5 measure lh-copy mt0">
70+
Everything should be 100% responsive. Your website should work regardless of a users
71+
device or screensize. Don't break the functionality of HTML with CSS.
72+
</p>
73+
</article>
74+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
75+
<h2 class="f4 f3-ns fw6 mb0">Readable</h2>
76+
<p class="f5 measure lh-copy mt0">
77+
No matter the lighting, or the device, font-sizes should be
78+
large enough and contrast should be high enough.
79+
</p>
80+
</article>
81+
</div>
82+
<div class="cf">
83+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
84+
<h2 class="f4 f3-ns fw6 mb0">Performant</h2>
85+
<p class="f5 measure lh-copy mt0">
86+
Code isn't for making a developers life easier. It's for
87+
improving the lives of our users. If it's not doing that, why
88+
write it. A developer's time is not precious. A user's time is.
89+
Code should be optimized for performance.
90+
</p>
91+
</article>
92+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
93+
<h2 class="f4 f3-ns fw6 mb0">Easy</h2>
94+
<p class="f5 measure lh-copy mt0">
95+
Designing in the browser should be easy.
96+
If a computer can do it, you shouldn't have to.
97+
</p>
98+
</article>
99+
</div>
100+
<div class="cf">
101+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
95102
<h2 class="f4 f3-ns fw6 mb0">
96-
Doing one thing extremely well promotes reusability
103+
Reusable
97104
</h2>
98-
<p class="f5 f4-ns measure lh-copy mt0">
99-
Single purpose classes that are easy to remember and won't add weight to the cascade. Spend less time debugging and more time building.
105+
<p class="f5 measure lh-copy mt0">
106+
Doing one thing well, promotes reusability and reduces redundancy in a codebase.
100107
</p>
101108
</article>
102-
<article class="pv2">
109+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
103110
<h2 class="f4 f3-ns fw6 mb0">
104-
Modules > Monoliths
111+
Modular
105112
</h2>
106-
<p class="f5 f4-ns measure lh-copy mt0">
107-
Tachyons isn't a monolithic framework. It's a collection of 0 self contained modules
108-
that can be mixed and matched or used independently. Pick what you want, leave the rest.
113+
<p class="f5 measure lh-copy mt0">
114+
Modules &gt; Monoliths
115+
Tachyons isn't a monolithic framework. It's a collection of self contained modules
116+
that can be mixed and matched or used independently. Use what you want, leave what you don't.
109117
</p>
110118
</article>
119+
</div>
120+
<div class="cf">
111121
</section>
112122
<h1 class="f4 ttu fw4 mtx tracked">Features</h1>
113-
<section class="list pln lh-copy mt0">
114-
<article class="pv2">
123+
<section class="list pl0 lh-copy mt0 cf">
124+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
115125
<h2 class="f4 f3-ns fw6 mb0 mv0">
116-
Runs on Postcss
126+
Runs on <a href="https://github.com/postcss/postcss" class="link dim near-black">Postcss</a>
117127
</h2>
118-
<p class="mv0 f5 f4-ns lh-copy measure">
119-
A flexible plugin framework for preprocessing css.
120-
<a href="https://github.com/postcss/postcss" class="link
128+
<p class="mv0 f5 lh-copy measure">
129+
A flexible plugin framework for post-processing css.
130+
<a href="https://github.com/postcss/postcss" class="link dn
121131
dim f6 db mid-gray">View on Github</a>
122132
</p>
123133
</article>
124-
<article class="pv2">
125-
<h2 class="f4 f3-ns fw6 mb0">Mobile-first css architecture </h2>
126-
<p class="f5 f4-ns measure lh-copy mt0">
134+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
135+
<h2 class="f4 f3-ns fw6 mv0">Mobile-first architecture </h2>
136+
<p class="f5 measure lh-copy mt0">
127137
Base classes are mobile by default. Can be overridden by
128138
namespaced classes targeting larger breakpoints.
129139
</p>
130140
</article>
131-
<article class="pv2">
132-
133-
<h2 class="f4 f3-ns fw6 mb0 mvn">
134-
Default colors for rapid theming
135-
</h2>
136-
<p class="f5 f4-ns measure lh-copy mt0">
137-
Who cares about colors. Unless you're painting a bikeshed.
138-
</p>
139-
140-
</article>
141-
<article class="pv2">
142-
<h2 class="f4 f3-ns fw6 mb0">
143-
CSS layout debugging utilities.
141+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
142+
<h2 class="f4 f3-ns fw6 mv0">
143+
Layout debugging
144144
</h2>
145-
<p class="f5 f4-ns measure lh-copy mt0">
145+
<p class="f5 measure lh-copy mt0">
146146
Small css modules for debugging stacking and layout issues.
147147
Can easily be turned on or off during development.
148148
</p>
149149
</article>
150-
<article class="pv2">
151-
<h2 class="f4 f3-ns fw6 mb0">
150+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
151+
<h2 class="f4 f3-ns fw6 mv0">
152152
Composable classes
153153
</h2>
154-
<p class="f5 f4-ns measure lh-copy mt0">
154+
<p class="f5 measure lh-copy mt0">
155155
Construct anything from complex layouts to responsive components with a series of
156156
single purpose classes.
157157
</p>
158158
</article>
159-
<article class="pv2">
160-
<h2 class="f4 f3-ns fw6 mb0 mvn">Ratio-based scale design systems</h2>
161-
<p class="f5 f4-ns f3-ns measure lh-copy mt0">
162-
Powers of two. Starting at .25
159+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
160+
<h2 class="f4 f3-ns fw6 mv0">Cohesive design system</h2>
161+
<p class="f5 measure lh-copy mt0">
162+
Scale based on the powers of two. Starting at .25
163163
</p>
164164
</article>
165-
<article class="pv2">
166-
<h2 class="f4 f3-ns fw6 mb0">
167-
Easy to customize or extend
168-
</h2>
169-
<p class="f5 f4-ns measure lh-copy mt0">
170-
Tachyons is meant to be edited and customized to meet the needs of your product. It's just css. It isn't precious.
171-
Don't be afraid to add new modules, media queries, breakpoints, or values to existing modules.
172-
</p>
173-
</article>
174-
<article class="pv2">
175-
<h2 class="f4 f3-ns fw6 mb0">Responsive Grid</h2>
176-
<p class="f5 f4-ns measure lh-copy mt0">
165+
<article class="pv2 fl w-100 w-50-ns pl0 pl2-ns">
166+
<h2 class="f4 f3-ns fw6 mv0">Responsive Grid</h2>
167+
<p class="f5 measure lh-copy mt0">
177168
Infinitely nestable. Fully fluid. Extremely light-weight.
178169
</p>
179170
</article>
171+
<article class="pv2 fl w-100 w-50-ns pr0 pr2-ns">
172+
<h2 class="f4 f3-ns fw6 mv0">
173+
Customize, or extend
174+
</h2>
175+
<p class="f5 measure lh-copy mt0">
176+
Tachyons is meant to be edited and customized to meet the
177+
needs of your product. It's just css. It isn't precious.
178+
Don't be afraid to change: class names, media queries,
179+
breakpoints, or values.
180+
</p>
181+
</article>
180182
</section>
181183
</div>
182184
</div>
@@ -186,7 +188,7 @@ <h2 class="f4 f3-ns fw6 mb0">Responsive Grid</h2>
186188
<h1 class="f5 fw6 ttu tracked">Testimonials</h1>
187189
<div class="cf w-100">
188190
<blockquote class="fl w-100 w-50-ns mh0 pr0 pr3-ns border-box">
189-
<p class="f6 f5-ns measure lh-copy pr1 pr0-l">
191+
<p class="f6 f5-ns measure lh-copy pr1 pr0-l i">
190192
After I embraced the “lots of little classes” way of styling, my anger at CSS
191193
almost completely went away and I was much more easily able to style and modify
192194
a design... you really have to try it.
@@ -198,7 +200,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
198200
</footer>
199201
</blockquote>
200202
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pl0 pl3-ns border-box">
201-
<p class="f6 f5-ns measure lh-copy">
203+
<p class="f6 f5-ns measure lh-copy i">
202204
It turns out composing utilities together like that is a really nice way to style things.
203205
Adam Morse has taken this to its logical conclusion with Tachyons...
204206
</p>
@@ -211,7 +213,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
211213
</div>
212214
<div class="cf w-100">
213215
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pr0 pr3-ns border-box">
214-
<p class="f6 f5-ns measure lh-copy">
216+
<p class="f6 f5-ns measure lh-copy i">
215217
It seems silly at first to write code that looks like inline HTML
216218
styling but Tachyons works. Instead of wasting time hunting down
217219
and dealing with CSS overrides, I now spend time iterating on the
@@ -225,7 +227,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
225227
</footer>
226228
</blockquote>
227229
<blockquote class="fl w-100 w-50-ns mh0 pl0 pl3-ns border-box">
228-
<p class="f6 f5-ns measure lh-copy pl1 pl0-l">
230+
<p class="f6 f5-ns measure lh-copy pl1 pl0-l i">
229231
I’ve found extremely low-level “frameworks” like BassCSS and Tachyons useful recently. They let you do the whole “just add and remove classes to create elements” thing but also don’t lock you into the constraints and issues of higher level frameworks like Bootstrap.
230232
</p>
231233
<footer>
@@ -237,7 +239,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
237239
</div>
238240
<div class="cf w-100">
239241
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pr0 pr3-ns border-box">
240-
<p class="f6 f5-ns measure lh-copy">
242+
<p class="f6 f5-ns measure lh-copy i">
241243
CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it
242244
with its modular approach, eliminating bloat from day one.
243245
</p>
@@ -248,7 +250,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
248250
</footer>
249251
</blockquote>
250252
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pl0 pl3-ns border-box">
251-
<p class="f6 f5-ns measure lh-copy">
253+
<p class="f6 f5-ns measure lh-copy i">
252254
Tachyons nails everything you need from a CSS framework.
253255
Development goes faster, designs are more consistent, and best of
254256
all it’s a ton of fun to play with.
@@ -262,7 +264,7 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
262264
</div>
263265
<div class="cf w-100">
264266
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pr0 pr3-ns border-box">
265-
<p class="f6 f5-ns measure lh-copy">
267+
<p class="f6 f5-ns measure lh-copy i">
266268
I never understood how people did font ratios and table layouts nicely with CSS until @mrmrs showed me the light.
267269
</p>
268270
<footer>
@@ -272,15 +274,15 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
272274
</footer>
273275
</blockquote>
274276
<blockquote class="fl w-100 w-50-ns pl0 Pl3-ns mh0 border-box">
275-
<p class="f6 f5-ns i measure lh-copy pr1 pr0-l">
277+
<p class="f6 f5-ns i measure lh-copy pr1 pr0-l i">
276278
Tachyons enabled the aboutLife team to more easily reason
277279
about, debug, and change visual styles all while thinking
278280
_less_ about CSS. We’re able to achieve our desired
279281
designs more quickly than ever before.
280282
</p>
281283
<footer>
282284
<p>
283-
<span class="b">Parsha</span> - <i>Software Engineer</i>
285+
<span class="b">Parsha Pourkhomami</span> - <i>Software Engineer</i>
284286
</p>
285287
</footer>
286288
</blockquote>
@@ -291,13 +293,14 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
291293
<div class="fl w-100">
292294
<div class="">
293295
<h3 class="f5 fw6 ttu tracked"><a href="#npm" class="link mid-gray">Tachyons on NPM</a></h3>
294-
<p class="f4 f3-ns lh-copy mt0 mb4 measure">
295-
Tachyons is just a series of css modules. They are available on npm and github so that you can
296-
mix and match to suit your project's needs. Since tachyons module architecture optimizes for gzip compression
296+
<p class="f5 f3-ns lh-copy mt0 mb4 measure">
297+
The main tachyons repo is just a group of of encapsulated css modules available on npm and github.
298+
You can grab the entire toolkit, or just a few selected modules.
299+
Mix and match them to suit your project's specific needs. Since tachyons modules are very focused on doing one thing well,
297300
most of them are extremely small (well under a kilobyte) so you
298-
can start using them without adding bloat to your css.
301+
can start using some or all of them without adding bloat to your css.
299302
</p>
300-
<code class="db mb4 ba b--light-gray f6 ph2 pv3" style="background-color: #d1ffff;">npm install --save-dev tachyons-module-name</code>
303+
<code class="dib mb4 ba b--light-gray f6 ph2 pv3" style="background-color: #d1ffff;">npm install --save-dev tachyons-module-name</code>
301304
</div>
302305
<div class=" mb3 fl w-100 w-50-m w-33-l">
303306
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-background-size">tachyons-background-size </a>

0 commit comments

Comments
 (0)