Quick: GH-253: Tweak Style Guide CSS

[wesleyboar]

Overview

Tweak styles for manual pattern library a.k.a. style guide.

Changes

• Do not rely on <section> tags.
• Space content via heading tags.
• Include breadcrumbs (and extend standard).

Testing

1. Add ('style_guide.html', 'Style Guide'), entry to _CMS_TEMPLATES in secrets.py.

2. Select "Style Guide" as template for a test page.

3. On the test Style Guide page, add sections and multiple headings of different levels.

   Samples

   • c-data-list.html.txt
   • a Snippet plugin with:
     • HTML: (none)
     • Template: snippets/typography-guide.html

4. (Optional) On the test Style Guide page, perform manual testing of complex CSS:

   Markup & Checks

   • heading as direct, first child of a <section> that is not an .o-section*
     • has margin top from style guide CSS
     • has margin bottom from style guide CSS
   • heading as direct, first child of a <section class="o-section">*
     • no margin top from style guide CSS
     • has margin bottom from style guide CSS
   • heading as direct, not first child of a <section class="o-section">*
     • no margin top from style guide CSS
     • has margin bottom from style guide CSS
   • heading immediately after a non-heading, both as direct children of a <section>
     • has margin top from style guide CSS
     • has margin bottom from style guide CSS
   • heading immediately after a non-heading, both not direct children of a <section>
     • no margin top from style guide CSS
     • no margin bottom from style guide CSS
   • heading immediately after a non-heading, both as direct children of a <section>
     • no margin top from style guide CSS
     • has margin bottom from style guide CSS
   • heading immediately after a non-heading, both not direct children of a <section>
     • no margin top from style guide CSS
     • no margin bottom from style guide CSS

* An .o-section first, direct child heading should not have margin-top, because the section already adds large padding.

Screenshots

The structure of these pages has this content in this hierarchy:

• Style with both "Advanced settings > ADDITIONAL CLASSES: o-section, o-section--style-light" and "TAG TYPE: section"
  • Text with <h1>Some title</h1>
    • content with headings, all optionally grouped within Style with "TAG TYPE: section"

• Style Guide CSS Tweaks - one Section
• Style Guide CSS Tweaks - many Sections
• Style Guide CSS Tweaks - Data List Components
• Style Guide CSS Tweaks - Typography

[wesleyboar]

Self-merging because:

• I have tested it well.
• I have documented the changes well.
• There are more important PRs for others to review.
• Use of this is for a manual pattern library which is not heavily used nor visited nor advertised; nor is it public.
• I have started a bad habit of doing this.