Skip to content

Commit 9604e36

Browse files
johnojohno
committed
Merge pull request tachyons-css#18 from tachyons-css/components-index
Add a components index page with nav, improve css display
2 parents 83d6771 + b2b639d commit 9604e36

File tree

26 files changed

+2940
-3407
lines changed

26 files changed

+2940
-3407
lines changed

‎components/articles/title-text-image/index.html

+120-44
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h1 class="f2">Title Text with Image</h1>
3737
<h2 class="f5">Module CSS Stats</h2>
3838
<dl class="dib mr4">
3939
<dt class="db f6">Size (Gzipped)</dt>
40-
<dd class="ml0 b f3 f2-ns">327</dd>
40+
<dd class="ml0 b f3 f2-ns">293</dd>
4141
</dl>
4242
<dl class="dib mr4">
4343
<dt class="db f6">Selectors</dt>
@@ -71,44 +71,127 @@ <h2 class="f5">HTML</h2>
7171

7272
</pre>
7373
<h4>CSS</h4>
74-
<pre class="pa3 ba br2 b--black-05">
75-
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
76-
.lh-copy{ line-height:1.6; }
77-
.w-100{ width:100%; }
78-
.pa3{ padding:1rem; }
79-
.f2{ font-size:2.25rem; }
80-
.f5{ font-size:1rem; }
81-
.measure{
82-
max-width:30em;
74+
<pre class="pa3 ba br2 b--black-05">.lh-copy {
75+
line-height: 1.6;
8376
}
84-
.measure-narrow{
85-
max-width:20em;
77+
78+
.w-100 {
79+
width: 100%;
80+
}
81+
82+
.pa3 {
83+
padding: 1rem;
84+
}
85+
86+
.f2 {
87+
font-size: 2.25rem;
88+
}
89+
90+
.f5 {
91+
font-size: 1rem;
92+
}
93+
94+
.measure {
95+
max-width: 30em;
96+
}
97+
98+
.measure-narrow {
99+
max-width: 20em;
100+
}
101+
102+
@media screen and (min-width: 48em) {
103+
.lh-copy-ns {
104+
line-height: 1.6;
105+
}
106+
107+
.w-100-ns {
108+
width: 100%;
109+
}
110+
111+
.pa3-ns {
112+
padding: 1rem;
113+
}
114+
115+
.pa5-ns {
116+
padding: 4rem;
117+
}
118+
119+
.f2-ns {
120+
font-size: 2.25rem;
121+
}
122+
123+
.f5-ns {
124+
font-size: 1rem;
125+
}
126+
127+
.measure-ns {
128+
max-width: 30em;
129+
}
130+
131+
.measure-narrow-ns {
132+
max-width: 20em;
133+
}
134+
}
135+
136+
@media screen and (min-width: 48em) and (max-width: 64em) {
137+
.lh-copy-m {
138+
line-height: 1.6;
139+
}
140+
141+
.w-100-m {
142+
width: 100%;
143+
}
144+
145+
.pa3-m {
146+
padding: 1rem;
147+
}
148+
149+
.f2-m {
150+
font-size: 2.25rem;
151+
}
152+
153+
.f5-m {
154+
font-size: 1rem;
155+
}
156+
157+
.measure-m {
158+
max-width: 30em;
159+
}
160+
161+
.measure-narrow-m {
162+
max-width: 20em;
163+
}
164+
}
165+
166+
@media screen and (min-width: 64em) {
167+
.lh-copy-l {
168+
line-height: 1.6;
169+
}
170+
171+
.w-100-l {
172+
width: 100%;
173+
}
174+
175+
.pa3-l {
176+
padding: 1rem;
177+
}
178+
179+
.f2-l {
180+
font-size: 2.25rem;
181+
}
182+
183+
.f5-l {
184+
font-size: 1rem;
185+
}
186+
187+
.measure-l {
188+
max-width: 30em;
189+
}
190+
191+
.measure-narrow-l {
192+
max-width: 20em;
193+
}
86194
}
87-
@media screen and (min-width: 48em){
88-
.lh-copy-ns{ line-height:1.6; }
89-
.w-100-ns{ width:100%; }
90-
.pa3-ns{ padding:1rem; }
91-
.pa5-ns{ padding:4rem; }
92-
.f2-ns{ font-size:2.25rem; }
93-
.f5-ns{ font-size:1rem; }
94-
.measure-ns{ max-width:30em; }
95-
.measure-narrow-ns{ max-width:20em; } }
96-
@media screen and (min-width: 48em) and (max-width: 64em){
97-
.lh-copy-m{ line-height:1.6; }
98-
.w-100-m{ width:100%; }
99-
.pa3-m{ padding:1rem; }
100-
.f2-m{ font-size:2.25rem; }
101-
.f5-m{ font-size:1rem; }
102-
.measure-m{ max-width:30em; }
103-
.measure-narrow-m{ max-width:20em; } }
104-
@media screen and (min-width: 64em){
105-
.lh-copy-l{ line-height:1.6; }
106-
.w-100-l{ width:100%; }
107-
.pa3-l{ padding:1rem; }
108-
.f2-l{ font-size:2.25rem; }
109-
.f5-l{ font-size:1rem; }
110-
.measure-l{ max-width:30em; }
111-
.measure-narrow-l{ max-width:20em; } }
112195

113196
</pre>
114197

@@ -146,13 +229,6 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
146229

147230
</div>
148231

149-
<div>
150-
<h2 class="f5 mb2 ttc mid-gray">grids</h2>
151-
152-
<a class="f5 dib mr3 blue link dim fw6" href="/components/grids/two-column/index.html">Grids Two Column</a>
153-
154-
</div>
155-
156232
<div>
157233
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
158234

‎components/articles/title-text/index.html

+72-32
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1 class="">Title</h1>
3636
<h2 class="f5">Module CSS Stats</h2>
3737
<dl class="dib mr4">
3838
<dt class="db f6">Size (Gzipped)</dt>
39-
<dd class="ml0 b f3 f2-ns">263</dd>
39+
<dd class="ml0 b f3 f2-ns">222</dd>
4040
</dl>
4141
<dl class="dib mr4">
4242
<dt class="db f6">Selectors</dt>
@@ -69,32 +69,79 @@ <h2 class="f5">HTML</h2>
6969

7070
</pre>
7171
<h4>CSS</h4>
72-
<pre class="pa3 ba br2 b--black-05">
73-
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
74-
.lh-copy{ line-height:1.6; }
75-
.pa3{ padding:1rem; }
76-
.measure{
77-
max-width:30em;
72+
<pre class="pa3 ba br2 b--black-05">.lh-copy {
73+
line-height: 1.6;
7874
}
79-
.measure-narrow{
80-
max-width:20em;
75+
76+
.pa3 {
77+
padding: 1rem;
78+
}
79+
80+
.measure {
81+
max-width: 30em;
82+
}
83+
84+
.measure-narrow {
85+
max-width: 20em;
86+
}
87+
88+
@media screen and (min-width: 48em) {
89+
.lh-copy-ns {
90+
line-height: 1.6;
91+
}
92+
93+
.pa3-ns {
94+
padding: 1rem;
95+
}
96+
97+
.pa5-ns {
98+
padding: 4rem;
99+
}
100+
101+
.measure-ns {
102+
max-width: 30em;
103+
}
104+
105+
.measure-narrow-ns {
106+
max-width: 20em;
107+
}
108+
}
109+
110+
@media screen and (min-width: 48em) and (max-width: 64em) {
111+
.lh-copy-m {
112+
line-height: 1.6;
113+
}
114+
115+
.pa3-m {
116+
padding: 1rem;
117+
}
118+
119+
.measure-m {
120+
max-width: 30em;
121+
}
122+
123+
.measure-narrow-m {
124+
max-width: 20em;
125+
}
126+
}
127+
128+
@media screen and (min-width: 64em) {
129+
.lh-copy-l {
130+
line-height: 1.6;
131+
}
132+
133+
.pa3-l {
134+
padding: 1rem;
135+
}
136+
137+
.measure-l {
138+
max-width: 30em;
139+
}
140+
141+
.measure-narrow-l {
142+
max-width: 20em;
143+
}
81144
}
82-
@media screen and (min-width: 48em){
83-
.lh-copy-ns{ line-height:1.6; }
84-
.pa3-ns{ padding:1rem; }
85-
.pa5-ns{ padding:4rem; }
86-
.measure-ns{ max-width:30em; }
87-
.measure-narrow-ns{ max-width:20em; } }
88-
@media screen and (min-width: 48em) and (max-width: 64em){
89-
.lh-copy-m{ line-height:1.6; }
90-
.pa3-m{ padding:1rem; }
91-
.measure-m{ max-width:30em; }
92-
.measure-narrow-m{ max-width:20em; } }
93-
@media screen and (min-width: 64em){
94-
.lh-copy-l{ line-height:1.6; }
95-
.pa3-l{ padding:1rem; }
96-
.measure-l{ max-width:30em; }
97-
.measure-narrow-l{ max-width:20em; } }
98145

99146
</pre>
100147

@@ -128,13 +175,6 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
128175

129176
</div>
130177

131-
<div>
132-
<h2 class="f5 mb2 ttc mid-gray">grids</h2>
133-
134-
<a class="f5 dib mr3 blue link dim fw6" href="/components/grids/two-column/index.html">Grids Two Column</a>
135-
136-
</div>
137-
138178
<div>
139179
<h2 class="f5 mb2 ttc mid-gray">layout</h2>
140180

0 commit comments

Comments
 (0)