-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstylestage.html
More file actions
337 lines (335 loc) · 12.8 KB
/
Copy pathstylestage.html
File metadata and controls
337 lines (335 loc) · 12.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[Your Style Title] by [Your Name] | Style Stage</title>
<meta name="description" content="[Your optional description]" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<div class="container">
<h1>Style Stage</h1>
<h2>A modern CSS showcase styled by community contributions</h2>
<p>
Maintained by
<a href="https://twitter.com/5t3ph">Stephanie Eckles</a> of
<a href="https://moderncss.dev">ModernCSS.dev</a>
</p>
<a href="https://github.com/5t3ph/stylestage" class="link-github"
><span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
</span>
Star on Github</a
>
</div>
</header>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#guidelines">Guidelines</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#files">Files</a></li>
<li><a href="/styles/">All Styles</a></li>
<li><a href="/resources/">Resources</a></li>
</ul>
</nav>
<main id="main" tabIndex="-1">
<div class="container">
<article id="about">
<section class="container">
<h2>Setting the Stage</h2>
<p>
In 2003,
<a href="http://daveshea.com/projects/zen/">Dave Shea</a> began a
legendary project called
<a href="http://www.csszengarden.com/">CSS Zen Garden</a> that
provided a demonstration of "what can be accomplished through
CSS-based design" until submissions stopped in 2013.
</p>
<p>
<strong>Style Stage</strong> seeks to rekindle that spirit by
providing this page as the base HTML for contributors - like you!
- to re-style by submitting an alternate stylesheet.
</p>
<blockquote>
<p>
<strong>How it works:</strong> Visit the
<a href="/styles/">"All Styles"</a> directory page and select a
style to view. A page with identical content to this one will be
presented with a new design provided from a contributed
stylesheet. CSS practitioners of any skill level are invited to
<a href="#contribute">submit a stylesheet</a>!
</p>
</blockquote>
<p>
The HTML for this page was created to be semantic, accessible, and
free of nearly all other opinions. Nested sectioning elements with
the class `.container` serve as additional style aids since you do
not have access to alter the base HTML. IDs are included where
needed for nav anchors or accessibility, and a small number of
additional classes are provided for key elements without IDs.
Don't forget the `.skip-link`!
</p>
</section>
<section class="container">
<h2>Modern CSS Under the Spotlight</h2>
<p>
Modern CSS has increased and improved the available CSS properties
and layout behaviors, and browser support is nearly in sync for
most high-touch features.
</p>
<p>Some examples of modern CSS include:</p>
<ul>
<li>Flexbox</li>
<li>Grid</li>
<li>custom variables</li>
<li>@supports()</li>
<li>gradients</li>
<li>animation</li>
<li>3D transforms</li>
<li>object-fit</li>
<li>:focus-within</li>
<li>calc()</li>
<li>min() / max() / clamp()</li>
<li>viewport units</li>
<li>scroll-(margin/padding/snap)</li>
<li>position: sticky</li>
<li>two-value display</li>
<li>expanded media query values</li>
<li>variable fonts</li>
</ul>
<p>
We also collectively have an improved understanding of what it
takes to make accessible experiences.
</p>
<p>
<a href="#contribute">Join Style Stage as a contributor</a> to
refresh your CSS skills, and learn from others!
</p>
</section>
</article>
<article id="guidelines">
<section class="container">
<h2>Guidelines</h2>
<p>
Contributing a stylesheet to Style Stage means you agree to abide
by
<a href="/guidelines/">our full guidelines</a>.
</p>
<h3>TL;DR</h3>
<p>
All submissions will be autoprefixed and prepended with the
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
>CC BY-NC-SA license</a
>
as well as attribution using the metadata you provide. You may use
any build setup you prefer, but the final submission should be the
compiled, unminified CSS. You retain the copyright to original
graphics and must ensure all graphics used are appropriately
licensed. All asset links, including fonts, must be absolute to
external resources. Stylesheets will be saved into the Github
repo, and detected changes that violate the guidelines are cause
for removal.
</p>
<p>
Ensure your design is responsive, and that it passes accessible
contrast (we'll be using aXe to verify). Animations should be
removed via `prefers-reduced-motion`. Cutting-edge techniques
should come with a fallback if needed to not severely impact the
user experience. No content may be permanently hidden, and hidden
items must come with an accessible viewing technique. Page load
time should not exceed 3 seconds.
</p>
<p>
Most importantly - have fun and learn something new! Check out the
<a href="/resources/">resources</a> for tips and inspiration.
</p>
<a href="/guidelines/" class="link-guidelines"
>Review full guidelines</a
>
</section>
</article>
<article id="contribute">
<section class="container">
<h2>Contribute</h2>
<p>
All who enjoy the craft of writing CSS are welcome to contribute!
</p>
<p>
By participating as a contributor, your work will be shared with
your provided attribution as long as Style Stage is online, your
stylesheet link and any asset links remain valid, and all
<a href="/guidelines/">contributor guidelines</a> are adhered to.
</p>
</section>
<section class="container">
<h3>Steps to Contribute</h3>
<ol>
<li>
Download the source files listed below to use as a reference to
build your stylesheet.
</li>
<li>
Host your completed stylesheet at a public URL, and ensure all
asset links are absolute URLs to external resources.
</li>
<li>
<a href="https://github.com/5t3ph/stylestage"
>Create a pull request</a
>
to add your information as a unique .json file to:
src/_data/styles. The schema is detailed in the repo README, and
you can review the FAQ on
<a href="/guidelines/#how-do-i-create-a-pull-request-pr"
>creating a pull request</a
>.
</li>
<li>
If your contribution abides by the previously listed guidelines,
your submission will be added!
</li>
</ol>
</section>
<footer id="files">
<div class="container">
<h3>Source Files</h3>
<a
href="/source-files/style.css"
class="link-downloadcss"
download
>Download CSS</a
>
<a
href="/source-files/stylestage.html"
class="link-downloadhtml"
download
>Download HTML</a
>
<a
href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291"
class="link-codepen"
download
>Fork the CodePen</a
>
</div>
</footer>
</article>
</div>
</main>
<aside class="profile" aria-labelledby="profile-title">
<div class="container">
<h4 id="profile-title">Currently Staged Style</h4>
<ul>
<li class="profile-title">
<span>Title:</span> <span>Sysfonts</span>
</li>
<li class="profile-author">
<span>Author:</span> <span>Halvor William Sanden</span>
</li>
<li class="profile-twitter">
<span>Twitter:</span>
<span><a href="https://twitter.com/8yard">8yard</a></span>
</li>
<li class="profile-website">
<span>Website:</span>
<span><a href="https://8yd.no">8yd.no</a></span>
</li>
</ul>
<a href="/styles/css/sysfonts.css">View Stylesheet</a>
</div>
</aside>
<aside id="styles">
<div class="container">
<h2>Featured Styles</h2>
<ul class="features">
<li>
<span>
<a href="/styles/transparency"
>Transparency<span aria-hidden="true"></span
></a>
<span>by Jens Oliver Meiert</span>
</span>
</li>
<li>
<span>
<a href="/styles/emphasis"
>Emphasis<span aria-hidden="true"></span
></a>
<span>by d-cs</span>
</span>
</li>
<li>
<span>
<a href="/styles/propaganda"
>Propaganda<span aria-hidden="true"></span
></a>
<span>by Maryam Hanafiah</span>
</span>
</li>
</ul>
<a href="/styles/" class="link-allstyles">View All Styles</a>
</div>
</aside>
<footer class="page-footer">
<div class="container">
<p>
Created and maintained by
<a href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>
</p>
<ul>
<li>
<a href="https://twitter.com/5t3ph" class="link-twittercontact"
>Contact on Twitter</a
>
</li>
<li>
<a href="https://github.com/5t3ph/stylestage" class="link-github"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
Star on Github</a
>
</li>
<li><a href="/feed/" class="link-rss">RSS Feed</a></li>
<li>
<a href="/subscribe/" class="link-support">Subscribe to Updates</a>
</li>
</ul>
<p>
Crafted with semantic, accessible HTML and CSS,
<strong>Style Stage</strong> is generated with
<a href="https://11ty.dev">11ty</a> and hosted on
<a href="https://netlify.com">Netlify</a>. This project uses
<a href="https://postcss.org/">PostCSS</a> with
<a href="https://github.com/postcss/autoprefixer">autoprefixer</a>.
</p>
<p>
Contributors retain copyright of all graphics used, and styles are
available under
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
>CC BY-NC-SA</a
>
</p>
</div>
</footer>
</body>
</html>