Skip to content

Commit 84a1b42

Browse files
author
mrmrs
committed
Update homepage with some new testimonials
1 parent 9a93b0b commit 84a1b42

File tree

3 files changed

+66
-214
lines changed

3 files changed

+66
-214
lines changed

‎build.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
require('./src/components-build')()
2-
console.log('components build complete')
3-
require('./src/table-of-styles-build')()
4-
console.log('table of styles build complete')
5-
require('./src/table-of-properties-build')()
6-
console.log('table of properties build complete')
1+
//require('./src/components-build')()
2+
//console.log('components build complete')
3+
//require('./src/table-of-styles-build')()
4+
//console.log('table of styles build complete')
5+
//require('./src/table-of-properties-build')()
6+
//console.log('table of properties build complete')
77
require('./src/home-build')()
88
console.log('home build complete')

‎index.html

+30-104
Original file line numberDiff line numberDiff line change
@@ -355,12 +355,12 @@ <h3 class="f6 fw6 mt5 pt2 mb4 tc ttu tracked">Gallery</h3>
355355
<div class="ph3 ph5-ns">
356356
<h3 class="f5 fw6 ttu tracke">Testimonials</h3>
357357
<div class="cf w-100">
358-
<blockquote class="fl w-100 mh0 mb2 mb5-ns border-box pb5 bw1 bn bb-ns b--black-50">
358+
<blockquote class="fl w-100 mh0 mb4 mb5-ns border-box pb5 bb b--black-50">
359359
<p class="f4 f2-m mt0 db fl w-100 f-subheadline-l lh-copy lh-title-l measure mb4 fw6">
360360
Here’s why I think designing systems with tools/frameworks like Tachyons
361361
is a Good Idea™.
362362
</p>
363-
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure lh-copy">
363+
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure lh-copy f5 f4-l">
364364
Design Systems break as they scale (either scaling org or
365365
scaling product) because new components/variants of a component
366366
are introduced. Those variants sometimes (read: often) go
@@ -372,7 +372,7 @@ <h3 class="f5 fw6 ttu tracke">Testimonials</h3>
372372
documenting and limiting *properties* of components. (I like
373373
to think of this as “subatomic” design.)
374374
</p>
375-
<p class="fl w-100 w-50-l mh0 mt0 pl0 pl3-l measure lh-copy">
375+
<p class="fl w-100 w-50-l mh0 mt0 pl0 pl3-l measure lh-copy f5 f4-l">
376376
You then create
377377
components by composing subatomic components (properties).
378378
Rather than creating a component and its variants, you simply
@@ -382,113 +382,39 @@ <h3 class="f5 fw6 ttu tracke">Testimonials</h3>
382382
components are numerous, but constrained to a set of acceptable
383383
values (our subatomic components).”
384384
</p>
385-
386-
<footer class="fl w-100 mt2">
387-
<cite class="f5 f4-m f3-l fs-normal">
388-
<span class="fw6">Daniel Eden</span>
389-
<span class="db f5">Designer / Engineer at Facebook</span>
390-
</cite>
391-
</footer>
392-
393-
</blockquote>
394-
<blockquote class="fl w-100 w-50-l mh0 pr0 pr3-l border-box">
395-
<p class="f6 f5-ns measure lh-copy pr1 pr0-l i">
396-
After I embraced the “lots of little classes” way of styling, my anger at css
397-
almost completely went away and I was much more easily able to style and modify
398-
a design... you really have to try it.
399-
</p>
400-
<footer>
401-
<p>
402-
<span class="b">Dave Copeland</span> - <i>Software Engineer at StitchFix</i>
403-
</p>
404-
</footer>
405-
</blockquote>
406-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
407-
<p class="f6 f5-ns measure lh-copy i">
408-
It turns out composing utilities together like that is a really nice way to style things.
409-
Adam Morse has taken this to its logical conclusion with Tachyons...
410-
</p>
411-
<footer>
412-
<p>
413-
<span class="b">Ben Smithett</span> - <i>Developer</i>
414-
</p>
415-
</footer>
416-
</blockquote>
417-
</div>
418-
<div class="cf w-100">
419-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
420-
<p class="f6 f5-ns measure lh-copy i">
421-
It seems silly at first to write code that looks like inline HTML
422-
styling but Tachyons works. Instead of wasting time hunting down
423-
and dealing with css overrides, I now spend time iterating on the
424-
design... which is what we're supposed to be doing in the first
425-
place :)
426-
</p>
427-
<footer>
428-
<p>
429-
<span class="b">Jason Li</span> - <i>Illustrator &amp; Designer</i>
430-
</p>
431-
</footer>
432-
</blockquote>
433-
<blockquote class="fl w-100 w-50-l mh0 pl0 pl3-l border-box">
434-
<p class="f6 f5-ns measure lh-copy pl1 pl0-l i">
435-
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.
436-
</p>
437-
<footer>
438-
<p>
439-
<span class="b">Cole Peters</span> - <i>Designer</i>
440-
</p>
441-
</footer>
385+
<cite class="fl w-100 mt2 f5 f4-m f3-l fs-normal">
386+
<span class="fw6">Daniel Eden</span>
387+
<span class="db f5">Designer at Facebook</span>
388+
</cite>
442389
</blockquote>
443-
</div>
444-
<div class="cf w-100">
445-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
446-
<p class="f6 f5-ns measure lh-copy i">
447-
css frameworks shouldn't be one-size-fits-all. Tachyons nails it
448-
with its modular approach, eliminating bloat from day one.
390+
<blockquote class="fl w-100 ph0 border-box mh0 mb4 mb5-ns pb5 bb b--black-50">
391+
<p class="f3 f1-ns measure fw7 lh-title mt0">
392+
Tachyons has seriously blown my mind. Making landing pages responsive is now… somehow… actually fun?!
449393
</p>
450-
<footer>
451-
<p>
452-
<span class="b">Philip Ardeljan</span> - <i>Designer</i>
453-
</p>
454-
</footer>
394+
<cite class="mtw f5 f4-m f3-l fs-normal">
395+
<span class="fw6">Ian Storm Taylor</span>
396+
<span class="db f5">Co-founder of <a class="link black-70 dim href="https://segment.com" title="Segment.com">Segment.com</a></span>
397+
</cite>
455398
</blockquote>
456-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
457-
<p class="f6 f5-ns measure lh-copy i">
458-
Tachyons nails everything you need from a css framework.
459-
Development goes faster, designs are more consistent, and best of
460-
all it’s a ton of fun to play with.
461-
</p>
462-
<footer>
463-
<p>
464-
<span class="b">Lachlan Campbell </span> - <i>Designer / Developer</i>
465-
</p>
466-
</footer>
467-
</blockquote>
468-
</div>
469-
<div class="cf w-100">
470-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
471-
<p class="f6 f5-ns measure lh-copy i">
472-
I never understood how people did font ratios and table layouts nicely with css until @mrmrs showed me the light.
399+
<blockquote class="fl w-100 ph0 border-box mh0 mb4 mb5-ns pb5 bb b--black-50">
400+
<p class="f3 f1-ns measure fw7 lh-title mt0">
401+
I used Tachyons for the first time on <a class="link dim black-80 underline"
402+
href="http://goldenstaterecord.com">goldenstaterecord.com</a>.
403+
Really fast to make big changes to the design in-flight. 👍
473404
</p>
474-
<footer>
475-
<p>
476-
<span class="b">Nat Welch</span> - <i>Software Engineer at Hillary for America</i>
477-
</p>
478-
</footer>
405+
<cite class="mtw f5 f4-m f3-l fs-normal">
406+
<span class="fw6">Wilson Miner</span>
407+
<span class="db f5">Digital Design - The California Sunday Magazine</span>
408+
</cite>
479409
</blockquote>
480-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
481-
<p class="f6 f5-ns i measure lh-copy pr1 pr0-l i">
482-
Tachyons enabled the aboutLife team to more easily reason
483-
about, debug, and change visual styles all while thinking
484-
_less_ about css. We’re able to achieve our desired
485-
designs more quickly than ever before.
410+
<blockquote class="fl w-100 ph0 border-box mh0 pb5">
411+
<p class="f3 f1-ns measure fw7 lh-title mt0">
412+
Tachyons is powerful, obvious, and well documented. It's made me rethink my approach to building organized and componentized CSS. I highly recommend you try it.
486413
</p>
487-
<footer>
488-
<p>
489-
<span class="b">Parsha Pourkhomami</span> - <i>Software Engineer</i>
490-
</p>
491-
</footer>
414+
<cite class="mtw f5 f4-m f3-l fs-normal">
415+
<span class="fw6">Dustin Senos</span>
416+
<span class="db f5">Designer</span>
417+
</cite>
492418
</blockquote>
493419
</div>
494420
</div>

‎src/templates/index.html

+30-104
Original file line numberDiff line numberDiff line change
@@ -314,12 +314,12 @@ <h3 class="f6 fw6 mt5 pt2 mb4 tc ttu tracked">Gallery</h3>
314314
<div class="ph3 ph5-ns">
315315
<h3 class="f5 fw6 ttu tracke">Testimonials</h3>
316316
<div class="cf w-100">
317-
<blockquote class="fl w-100 mh0 mb2 mb5-ns border-box pb5 bw1 bn bb-ns b--black-50">
317+
<blockquote class="fl w-100 mh0 mb4 mb5-ns border-box pb5 bb b--black-50">
318318
<p class="f4 f2-m mt0 db fl w-100 f-subheadline-l lh-copy lh-title-l measure mb4 fw6">
319319
Here’s why I think designing systems with tools/frameworks like Tachyons
320320
is a Good Idea™.
321321
</p>
322-
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure lh-copy">
322+
<p class="fl w-100 w-50-l mh0 mt0 pr0 pr3-l measure lh-copy f5 f4-l">
323323
Design Systems break as they scale (either scaling org or
324324
scaling product) because new components/variants of a component
325325
are introduced. Those variants sometimes (read: often) go
@@ -331,7 +331,7 @@ <h3 class="f5 fw6 ttu tracke">Testimonials</h3>
331331
documenting and limiting *properties* of components. (I like
332332
to think of this as “subatomic” design.)
333333
</p>
334-
<p class="fl w-100 w-50-l mh0 mt0 pl0 pl3-l measure lh-copy">
334+
<p class="fl w-100 w-50-l mh0 mt0 pl0 pl3-l measure lh-copy f5 f4-l">
335335
You then create
336336
components by composing subatomic components (properties).
337337
Rather than creating a component and its variants, you simply
@@ -341,113 +341,39 @@ <h3 class="f5 fw6 ttu tracke">Testimonials</h3>
341341
components are numerous, but constrained to a set of acceptable
342342
values (our subatomic components).”
343343
</p>
344-
345-
<footer class="fl w-100 mt2">
346-
<cite class="f5 f4-m f3-l fs-normal">
347-
<span class="fw6">Daniel Eden</span>
348-
<span class="db f5">Designer / Engineer at Facebook</span>
349-
</cite>
350-
</footer>
351-
352-
</blockquote>
353-
<blockquote class="fl w-100 w-50-l mh0 pr0 pr3-l border-box">
354-
<p class="f6 f5-ns measure lh-copy pr1 pr0-l i">
355-
After I embraced the “lots of little classes” way of styling, my anger at css
356-
almost completely went away and I was much more easily able to style and modify
357-
a design... you really have to try it.
358-
</p>
359-
<footer>
360-
<p>
361-
<span class="b">Dave Copeland</span> - <i>Software Engineer at StitchFix</i>
362-
</p>
363-
</footer>
364-
</blockquote>
365-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
366-
<p class="f6 f5-ns measure lh-copy i">
367-
It turns out composing utilities together like that is a really nice way to style things.
368-
Adam Morse has taken this to its logical conclusion with Tachyons...
369-
</p>
370-
<footer>
371-
<p>
372-
<span class="b">Ben Smithett</span> - <i>Developer</i>
373-
</p>
374-
</footer>
375-
</blockquote>
376-
</div>
377-
<div class="cf w-100">
378-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
379-
<p class="f6 f5-ns measure lh-copy i">
380-
It seems silly at first to write code that looks like inline HTML
381-
styling but Tachyons works. Instead of wasting time hunting down
382-
and dealing with css overrides, I now spend time iterating on the
383-
design... which is what we're supposed to be doing in the first
384-
place :)
385-
</p>
386-
<footer>
387-
<p>
388-
<span class="b">Jason Li</span> - <i>Illustrator &amp; Designer</i>
389-
</p>
390-
</footer>
391-
</blockquote>
392-
<blockquote class="fl w-100 w-50-l mh0 pl0 pl3-l border-box">
393-
<p class="f6 f5-ns measure lh-copy pl1 pl0-l i">
394-
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.
395-
</p>
396-
<footer>
397-
<p>
398-
<span class="b">Cole Peters</span> - <i>Designer</i>
399-
</p>
400-
</footer>
344+
<cite class="fl w-100 mt2 f5 f4-m f3-l fs-normal">
345+
<span class="fw6">Daniel Eden</span>
346+
<span class="db f5">Designer at Facebook</span>
347+
</cite>
401348
</blockquote>
402-
</div>
403-
<div class="cf w-100">
404-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
405-
<p class="f6 f5-ns measure lh-copy i">
406-
css frameworks shouldn't be one-size-fits-all. Tachyons nails it
407-
with its modular approach, eliminating bloat from day one.
349+
<blockquote class="fl w-100 ph0 border-box mh0 mb4 mb5-ns pb5 bb b--black-50">
350+
<p class="f3 f1-ns measure fw7 lh-title mt0">
351+
Tachyons has seriously blown my mind. Making landing pages responsive is now… somehow… actually fun?!
408352
</p>
409-
<footer>
410-
<p>
411-
<span class="b">Philip Ardeljan</span> - <i>Designer</i>
412-
</p>
413-
</footer>
353+
<cite class="mtw f5 f4-m f3-l fs-normal">
354+
<span class="fw6">Ian Storm Taylor</span>
355+
<span class="db f5">Co-founder of <a class="link black-70 dim href="https://segment.com" title="Segment.com">Segment.com</a></span>
356+
</cite>
414357
</blockquote>
415-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
416-
<p class="f6 f5-ns measure lh-copy i">
417-
Tachyons nails everything you need from a css framework.
418-
Development goes faster, designs are more consistent, and best of
419-
all it’s a ton of fun to play with.
420-
</p>
421-
<footer>
422-
<p>
423-
<span class="b">Lachlan Campbell </span> - <i>Designer / Developer</i>
424-
</p>
425-
</footer>
426-
</blockquote>
427-
</div>
428-
<div class="cf w-100">
429-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pr0 pr3-l border-box">
430-
<p class="f6 f5-ns measure lh-copy i">
431-
I never understood how people did font ratios and table layouts nicely with css until @mrmrs showed me the light.
358+
<blockquote class="fl w-100 ph0 border-box mh0 mb4 mb5-ns pb5 bb b--black-50">
359+
<p class="f3 f1-ns measure fw7 lh-title mt0">
360+
I used Tachyons for the first time on <a class="link dim black-80 underline"
361+
href="http://goldenstaterecord.com">goldenstaterecord.com</a>.
362+
Really fast to make big changes to the design in-flight. 👍
432363
</p>
433-
<footer>
434-
<p>
435-
<span class="b">Nat Welch</span> - <i>Software Engineer at Hillary for America</i>
436-
</p>
437-
</footer>
364+
<cite class="mtw f5 f4-m f3-l fs-normal">
365+
<span class="fw6">Wilson Miner</span>
366+
<span class="db f5">Digital Design - The California Sunday Magazine</span>
367+
</cite>
438368
</blockquote>
439-
<blockquote class="fl w-100 w-50-l mh0 mb2 mb5-l pl0 pl3-l border-box">
440-
<p class="f6 f5-ns i measure lh-copy pr1 pr0-l i">
441-
Tachyons enabled the aboutLife team to more easily reason
442-
about, debug, and change visual styles all while thinking
443-
_less_ about css. We’re able to achieve our desired
444-
designs more quickly than ever before.
369+
<blockquote class="fl w-100 ph0 border-box mh0 pb5">
370+
<p class="f3 f1-ns measure fw7 lh-title mt0">
371+
Tachyons is powerful, obvious, and well documented. It's made me rethink my approach to building organized and componentized CSS. I highly recommend you try it.
445372
</p>
446-
<footer>
447-
<p>
448-
<span class="b">Parsha Pourkhomami</span> - <i>Software Engineer</i>
449-
</p>
450-
</footer>
373+
<cite class="mtw f5 f4-m f3-l fs-normal">
374+
<span class="fw6">Dustin Senos</span>
375+
<span class="db f5">Designer</span>
376+
</cite>
451377
</blockquote>
452378
</div>
453379
</div>

0 commit comments

Comments
 (0)