GD.CSS
An accessible alternative to HTML5 CSS resets
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.
Getting started
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):
<link rel="stylesheet" href="https://hawkz.github.com/gdcss/gd.css">
Just write HTML
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.
Simple patterns
The combinations and relative positions of tags like header and nav automatically turn into masthead and breadcrumb trails. Just enought to get you going.
Resets are ok
Rather than focussing on similarity between browser rending to normalise the experience. GDCSS focusses on making the experience accessible and clear.
I couldn't figure out how to setup the GOV.UK prototype toolkit, so writing this seemed like the simple thing to do.
- Steve Hawkes (author)
Feedback welcome
Features
Key stats
157 CSS selectors
105 documented tag styles
~120 HTML5 tags considered
~90 HTML5 tags are visible
Only 21kb uncompressed
Only one class (accessible hide)
Lighthouse audit results
💯 Performance
💯 Accessibility
💯 Best Practice
💯 SEO
Tested to WCAG 2.0 AA