-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
168 lines (148 loc) · 6.21 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GDCSS - An accessible alternative to HTML5 CSS resets</title>
<link rel="stylesheet" href="/gd.min.css">
<meta name="theme-color" content="#0b0c0c">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="16x16 32x32 48x48 128x128 256x256 512x512" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon.icns">
<meta name="og:title" content="GDCSS">
<meta name="description" content="An accessible alternative to HTML5 CSS resets.">
<meta name="og:description" content="An accessible alternative to HTML5 CSS resets.">
</head>
<body>
<a href="#main-content" class="hide">Skip to main content</a>
<a name="top"></a>
<header>
<nav role="navigation">
<a href="/"><img alt="GDCSS" src="/demo/logo.svg" width="280"></a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/docs.html">Documentation</a></li>
<li><a href="/gd.css">Download</a></li>
</ul>
</nav>
</header>
<nav>
<ol>
<li><a href="/">Home</a></li>
</ol>
</nav>
<main id="main-content">
<article>
<hgroup>
<h4>GD.CSS</h4>
<h1>An accessible alternative<br> to HTML5 CSS resets</h1>
</hgroup>
<p>gd.css styles all visible HTML elements in line with modern best practice.
It focusses only on HTML tags so you can just write HTML (no classes) and make pages like this.</p>
<p><input role="link" type="button" value="Download" onclick="javascript:window.location='gd.css'" /> <input role="link" type="submit" value="Documentation" onclick="javascript:window.location='docs.html'"> <input role="link" type="submit" value="Demo" onclick="javascript:window.location='/demo/'"></p>
</article>
<hr />
<h2>Getting started</h2>
<p>Like most CSS libraries, all you need to do is include the library in your HTML. To do this just link to this sheet (or download and link to your own URL):</p>
<pre><link rel="stylesheet" href="https://hawkz.github.com/gdcss/gd.css"></pre>
<hr />
<section>
<aside>
<h3>Just write HTML</h3>
<p>When working on prototypes or simple content, you can now have accessible layouts of pages. No class naming scheme to learn, and less to write. Then later add your own styling or a framework on top.</p>
</aside>
<aside>
<h3>Simple patterns</h3>
<p>The combinations and relative positions of tags like <var>header</var> and <var>nav</var> automatically turn into masthead and breadcrumb trails. Just enought to get you going.</p>
</aside>
<aside>
<h3>Resets are ok</h3>
<p>Rather than focussing on similarity between browser rending to normalise the experience. GDCSS focusses on making the experience accessible and clear.</p>
</aside>
</section>
<blockquote cite="https://govuk-prototype-kit.herokuapp.com/docs">
<q>I couldn't figure out how to setup the GOV.UK prototype toolkit,<br /> so writing this seemed like the simple thing to do.</q>
<cite>- Steve Hawkes (author)</cite>
</blockquote>
<!-- Forms -->
<h2>Feedback welcome</h2>
<form name="feedback" netlify>
<section>
<div>
<p>To demo the form styles, and also get real feedback, this is a little form so you can get in touch.</p>
<p>It would be especially awesome to hear about how and where you've used this!</p>
<h3>How to contribute</h3>
<p>This is a great project to contribute to, no complex tooling setup, just make changes to the gd.css file as pull request on GitHub.</p>
<input role="link" type="submit" value="Go to GitHub" onclick="window.url='https://github.com/hawkz/gdcss'">
</div>
<div>
<fieldset>
<legend>Send feedback</legend>
<p>
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</p>
<p>
<label for="feedback">Feedback or Message</label>
<textarea name="feedback" id="feedback" placeholder="Your feedback here..."></textarea>
</p>
<p>
<button type="submit" id="submit" name="submit">Send Feedback</button>
</p>
</fieldset>
</div>
</section>
</form>
<hr />
<!-- Lists -->
<h2>Features</h2>
<section>
<div>
<h3>Key stats</h3>
<ul>
<li>157 CSS selectors</li>
<li>105 <a href="docs.html">documented tag styles</a></li>
<li>~120 HTML5 tags considered</li>
<li>~90 HTML5 tags are visible</li>
<li>Only 21kb uncompressed</li>
<li>Only one class (accessible hide)</li>
</ul>
</div>
<div>
<h3>Lighthouse audit results</h3>
<ul>
<li>💯 Performance</li>
<li>💯 Accessibility</li>
<li>💯 Best Practice</li>
<li>💯 SEO</li>
<li>Tested to WCAG 2.0 AA</li>
</ul>
</div>
</section>
<div style="text-align:right">
<a href="#top">Back to top</a>
</div>
</main>
<footer>
<main>
<section>
<ul>
<li><a href="/docs.html">Documentation</a></li>
<li><a href="/gd.css">Download</a></li>
<li><a href="https://github.com/hawkz/gdcss">GitHub</a></li>
<li><a href="https://twitter.com/devsociety_">Twitter</a></li>
</ul>
<article>
<p>Made with ❤️ by people from <a href="https://dev.ngo" rel="noopener">The Developer Society</a>.<br />
💡Inspired by the great work at <a href="https://www.gov.uk/government/organisations/government-digital-service" rel="noopener">GOV.UK</a>.<br /><br />
Code licensed <a href="https://github.com/hawkz/gdcss/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>.<br /></p>
</article>
</section>
</main>
</footer>
</body>
</html>