Update example page design

[ZoeBijl]

The pages can use a more inviting look. The current design is bit dull, dark, and too compact.

Some ideas:

• Brighter colours for headings
• Syntax highlighting for code blocks
• Modern anchor hover/focus styles
• A style for <kbd> that stands out
• Easier to read body copy
• More white space around certain elements, like the example itself
• Add breadcrumb to each page, currently there’s one link to the APG at the bottom, hierarchy can be made more clear

Feel free to give feedback in this issue.

This issue is related to issue #168.

[ZoeBijl]

Instead of creating something complete new, why don’t we include the base.css that is used on all specs? I’ve tried this on my local machine and it works pretty well, it’ll need some customisations here and there to fit our content, but other than that, it could save a lot of time while also making the example pages’s design more in line with the spec itself.

Thoughts @mcking65 @jnurthen?

[ZoeBijl]

I’ve created an example of what I stated in my previous comment: Tabs example page with new design

Changes:

• Added breadcrumb right after the title
• Included default spec stylesheet
• Added a style for <kbd>
• Added some fixes on top of the default spec sheet to fix table styles

Please let me know what you think.

[mcking65]

Michiel,

It's Definitely important to do what we can to make the content easy to read and visually consistent. So, thank you, thank you for raising the issue and working on a proposal!

Borrowing from the spec styles seems like a good idea. And, the style changes you list "sound" great :).

I too would like to have breadcrumbs, but I would like to add them separately and later.

Because the guide will balloon in size and get much more difficult to navigate by the time we cover everything in scope, after our next heartbeat publication, I am planning to introduce a concept proposal for a new information architecture and structure to make it easier to use. One aspect of the concept is dividing the guide into a few major sections that each have their own page. If we go that route, it would effect the breadcrumb links. So, to avoid potential rework, I'd like to hold off on adding breadcrumbs to example pages.

When we do implement breadcrumbs, however, the nav element should be before main, not inside main, and it may be inside of a banner that also includes a W3C logo like on the main doc.

[ZoeBijl]

Matt,

That sounds good to me. Since all changes aside from the breadcrumbs are CSS related this can be implemented fairly easily.

If there are no further objections I’ll implement this (excluding breadcrumbs) over the weekend.

Update: All example pages have been updated in the design branch. I’ll double check them after I’ve had some sleep. Will merge after that.

[ZoeBijl]

This is now done.

[jnurthen]

@MichielBijl class="hljs-attr" on the #f8f8f8 background only has a 4.49:1 ratio according to aXe. Can we tweak this so that it definitively passes. I don't think we should have anything which is borderline

[ZoeBijl]

Will do!

• Tweak code background to pass 4.5:1 colour contrast.

[ZoeBijl]

@jnurthen’s issue is resolved in 6e95c37