Skip to content

Commit 046d417

Browse files
author
mrmrs
committed
New component source
1 parent 58fb85f commit 046d417

File tree

8 files changed

+124
-10
lines changed

8 files changed

+124
-10
lines changed

‎src/components/articles/title-highlight-header-cover.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<article>
5+
<header class="bg-gold sans-serif">
6+
<div class="mw9 center pa4 pt5-ns ph7-l">
7+
<time class="f6 mb2 dib ttu tracked"><small>27 July, 2015</small></time>
8+
<h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
9+
<span class="bg-black-90 lh-copy white pa1 tracked-tight">
10+
Too many tools and frameworks
11+
</span>
12+
</h3>
13+
<h4 class="f3 fw1 georgia i">The definitive guide to the javascript tooling landscape in 2015.</h4>
14+
<h5 class="f6 ttu tracked black-80">By Adam Morse</h5>
15+
</div>
16+
</header>
17+
<div class="pa4 ph7-l georgia mw9-l center">
18+
<p class="f5 f3-ns lh-copy measure georgia">
19+
Theodore Sturgeon was a science fiction author, critic, and the basis for Kurt Vonnegut's recurring character Kilgore Trout. He was prolific, authoring over 200 pieces himself and critiquing around 400 others.
20+
</p>
21+
<p class="f5 f3-ns lh-copy measure georgia">
22+
In 1958 he published a piece in Venture proclaiming what he called "Sturgeon's Revelation"
23+
</p>
24+
<p class="f6 f5-ns lh-copy measure i pl4 bl bw1 b--gold mb4">
25+
I repeat Sturgeon's Revelation, which was wrung out of me after twenty years of wearying defense of science fiction against attacks of people who used the worst examples of the field for ammunition, and whose conclusion was that ninety percent of SF is crud. Using the same standards that categorize 90% of science fiction as trash, crud, or crap, it can be argued that 90% of film, literature, consumer goods, etc. is crap. In other words, the claim (or fact) that 90% of science fiction is crap is ultimately uninformative, because science fiction conforms to the same trends of quality as all other artforms.
26+
</p>
27+
<p class="f5 f4-ns lh-copy measure mb4">
28+
You don't have to bounce a tennis ball very far in San Francisco before it will hit two developers complaining about how many js tools/frameworks there are for development in 2015 and how much unneccessary complexity they add. Doing a search on twitter for 'too many js tools' or 'yet another js framework' returns... a lot of people lamenting the current state of affairs.
29+
</p>
30+
31+
<p class="f5 f4-ns lh-copy measure">
32+
This is most likely, the wrong conversation for us as a community, to be having. The presence of bad tools - shouldn't discourage us from wanting more tools or frameworks. There are more books published in a single day than I will ever be able to read in my lifetime. But this does not make me sad. Or overwhelm me. Mostly I think about how excited I am to read the best books that are being published. And this is where we should push the conversation. How do we build better tools? What does that look like?
33+
</p>
34+
</div>
35+
</article>

‎src/components/banners/info.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{{{
2+
"bodyClass" : "bg-white pt5"
3+
}}}
4+
<div class="flex items-center justify-center pa4 bg-lightest-blue navy">
5+
<svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
6+
<title>info icon</title>
7+
<path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
8+
</svg>
9+
<span class="ml3">Some info that you want to call attention to.</span>
10+
</div>

‎src/components/buttons/basic-previous-next.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{{{
2+
"bodyClass" : "bg-white pt5"
3+
}}}
4+
5+
<div class="flex items-center justify-center pb5">
6+
<a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box mr4">
7+
<svg class="w1" data-icon="chevronLeft" viewBox="0 0 32 32" style="fill:currentcolor">
8+
<title>chevronLeft icon</title>
9+
<path d="M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z"></path>
10+
</svg>
11+
<span class="pl1">Previous</span>
12+
</a>
13+
<a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box">
14+
<span class="pr1">Next</span>
15+
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
16+
<title>chevronRight icon</title>
17+
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
18+
</svg>
19+
</a>
20+
</div>

‎src/components/error-pages/404.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<section class="vh-100 bg-washed-blue baskerville">
5+
<header class="tc ph5 lh-copy">
6+
<h1 class="f1 f-headline-l code mb3 fw9 dib tracked-tight light-purple">404</h1>
7+
<h2 class="tc f1-l fw1">Sorry, we can't find the page you are looking for.</h2>
8+
</header>
9+
<p class="fw1 i tc mt4 mt5-l f4 f3-l">Are you looking for one of these?</p>
10+
<ul class="list tc pl0 w-100 mt5">
11+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/">Home</a></li>
12+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/about">About</a></li>
13+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/careers">Careers</a></li>
14+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/contact">Contact</a></li>
15+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/signup">Sign Up</a></li>
16+
<li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/help">Help</a></li>
17+
</ul>
18+
</section>

‎src/components/footers/inline-text.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{{{
2+
"bodyClass": "bg-white"
3+
}}}
4+
5+
<footer class="bg-near-black white-80 pv5 pv6-l ph4">
6+
<p class="f6"><span class="dib mr4 mr5-ns">©2048 Your Company LLC, Inc.</span>
7+
<a class="link white-80 hover-light-purple" href="/terms">Terms</a> /
8+
<a class="link white-80 hover-gold" href="/privacy"> Privacy </a> /
9+
<a class="link white-80 hover-green" href="#">hi@yourcompany.com </a>
10+
</p>
11+
</footer>

‎src/components/forms/password.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
"bodyClass" : "bg-white"
33
}}}
44
<form class="pa4 black-80">
5-
<div class="measure">
6-
<label for="comment" class="f6 b db mb2">Name <span class="normal black-60">(optional)</span></label>
5+
<div class="measure-narrow">
6+
<label for="" class="f6 b db mb2">Password</label>
77
<input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password">
8-
<small class="f6 black-60 db mb2">Helper text for the form control.</small>
8+
<small class="f6 lh-copy black-60 db mb2">
9+
Must be 9 characters long and contain both a number and an uppercase
10+
character.
11+
</small>
912
</div>
1013
</form>

‎src/templates/components-nav.html

+17
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ <h2 class="f6 fw6 mb2 ttc black-70">articles</h2>
2929

3030
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/articles/single-column-large-title/index.html">Single Column Large Title</a>
3131

32+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/articles/title-highlight-header-cover/index.html">Title Highlight Header Cover</a>
33+
3234
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/articles/title-text-image/index.html">Title Text Image</a>
3335

3436
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/articles/title-text/index.html">Title Text</a>
@@ -59,13 +61,17 @@ <h2 class="f6 fw6 mb2 ttc black-70">banners</h2>
5961

6062
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/banners/basic/index.html">Basic</a>
6163

64+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/banners/info/index.html">Info</a>
65+
6266
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/banners/single-cta/index.html">Single Cta</a>
6367

6468
</div>
6569

6670
<div>
6771
<h2 class="f6 fw6 mb2 ttc black-70">buttons</h2>
6872

73+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/buttons/basic-previous-next/index.html">Basic Previous Next</a>
74+
6975
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/buttons/basic-rounded-extra-small/index.html">Basic Rounded Extra Small</a>
7076

7177
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/buttons/basic-rounded-small/index.html">Basic Rounded Small</a>
@@ -129,11 +135,20 @@ <h2 class="f6 fw6 mb2 ttc black-70">definition-lists</h2>
129135

130136
</div>
131137

138+
<div>
139+
<h2 class="f6 fw6 mb2 ttc black-70">error-pages</h2>
140+
141+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/error-pages/404/index.html">404</a>
142+
143+
</div>
144+
132145
<div>
133146
<h2 class="f6 fw6 mb2 ttc black-70">footers</h2>
134147

135148
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/footers/centered-icons-hover-glow/index.html">Centered Icons Hover Glow</a>
136149

150+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/footers/inline-text/index.html">Inline Text</a>
151+
137152
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/footers/simple-large-type/index.html">Simple Large Type</a>
138153

139154
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/footers/small-print/index.html">Small Print</a>
@@ -157,6 +172,8 @@ <h2 class="f6 fw6 mb2 ttc black-70">forms</h2>
157172

158173
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/newsletter-subscription/index.html">Newsletter Subscription</a>
159174

175+
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/password/index.html">Password</a>
176+
160177
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/sign-in/index.html">Sign In</a>
161178

162179
<a class="f6 f5-ns fw4 dib mr3 mb2 black-70 link hover-blue dim" href="/components/forms/sign-up/index.html">Sign Up</a>

‎src/templates/footer.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
22
<div class="mw9 center">
3-
<div class="mb5">
4-
<a class="black-70 link dim b dib mr3" href="/" title="Home">
3+
<div class="mb5 lh-copy">
4+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/" title="Home">
55
Home
66
</a>
7-
<a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
7+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/docs" title="Docs">
88
Docs
99
</a>
10-
<a class="black-70 link dim b dib mr3" href="/components/" title="Components">
10+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/components/" title="Components">
1111
Components
1212
</a>
13-
<a class="black-70 link dim b dib mr3" href="/gallery/" title="Gallery of Sites built with Tachyons">
13+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/gallery/" title="Gallery of Sites built with Tachyons">
1414
Gallery
1515
</a>
16-
<a class="black-70 link dim b dib mr3" href="/resources/" title="Resources related to Tachyons">
16+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/resources/" title="Resources related to Tachyons">
1717
Resources
1818
</a>
19-
<a class="black-70 link dim b dib mr3" href="/xray/" title="The X-Ray chrome extension for aligning things to a grid.">
19+
<a class="black-70 link hover-blue b dib mr3 mb3" href="/xray/" title="The X-Ray chrome extension for aligning things to a grid.">
2020
X-Ray
2121
</a>
2222
</div>

0 commit comments

Comments
 (0)