FP-1318: Revisit Section Pattern

[wesleyboar]

Overview

Clean up existing TACC Section pattern.

Design has approved (via private review), but implementations should have dev review.

Wasn't There Gonna be a Section Plugin?

Yes, but not now, because simpler options exist:

• FP-1318: Create Section Pattern via Style Plugin #430
• FP-1318: Create Section Pattern via Bootstrap Container Plugin #431

Requires:

• FP-1318: Revisit Section Pattern (Frontera) (UTRC) Core-CMS-Resources#112

Tickets

• FP-1318

Changes

Simplify the code, document it better, and support automated pattern library.

Move Callout title color styling to Callout stylesheet.

Though Section code is relevant, the change is to Callout element, so the code belongs with Callout. This is the logic I now follow for deciding where to place cross-pattern styles.

Document Section CSS.

This CSS "docblock" is required by the automated pattern library.

Use less verbose selectors.

• (now) .o-section — Matches exact standalone class, so light Section must now be labeled with two classes o-section o-section--style-light
• (before) [class*="o-section--"] — Matches any modifier class, so light Section was before able to be labeled with one classes o-section--style-light

Simplify spacing code.

• space variables added unnecessary verbosity
• margin management was unnecessary
• padding management can use shorthand

Explain the "empty" selector code.

This code supports an odd feature specific to section intros. (FP-1463 will extract the code.)

Do not hide vertical overflow on page.

• A 1px vertical overflow was on any page with 2 same-color sections.
• Instead of overlapping section atop border, make border transparent.
• And isolate updated code used to prevent borders on banners.

Style nested sections.

Section within a section:

• less vertical padding
• less width expansion

Mention FP-1462 and FP-1463.

These tickets will extract code from Section into new patterns.

Update Section's sample markup.

These changes support automated pattern library and section snippets.

Add manual pattern library snippet.

This allows creation of a snippet for consistently generating Section markup (for testing).

Move overflow-hiding code from templates to Core.

I am now confident that this code in global styles will not break any v1 sites (because only horizontal overflow is hidden, now).

Demos

Demo	Notes
Core CMS Dev Pattern Library	supports new .o-section code
Automated Pattern Library	test of ugly KSS software

Screenshots

Manual Pattern Library	Frontera Home Page

Testing

You may test locally or remote. Or do both if it makes you happy.

local: instructions
remote (core): https://dev.cep.tacc.utexas.edu/ (build, deploy)
remote (frontera): https://dev.fronteraweb.tacc.utexas.edu/ (build, deploy)

Remote:

1. Open Frontera home page on prod and dev.
   • Confirm black and white sections visually have the same vertical spacing between them.
   • Confirm adjacent black sections have border between them.
   • 🆕 Review both pages (prod, dev) and designs (current, future) for differences in section styles.
   • (Optional) Notice that sections beneath banner are slightly narrower on dev than prod.¹
   • Ignore broken or different images on dev.
2. Open dev.cep manual pattern library.
   • If this branch is deployed, then the page should load sets of Sections.
3. Follow "Remote & Local" steps.

Local:

1. Be familiar with how to Test CMS Changes.

2. Create snippets that uses template snippets/manual-pattern-library/o-grid.html.

   Snippets to Make

   NAME: UI: O-Section: Light
   HTML: o-section--style-light
   TEMPLATE: snippets/manual-pattern-library/o-section.html

   NAME: UI: O-Section: Dark
   HTML: o-section--style-dark
   TEMPLATE: snippets/manual-pattern-library/o-section.html

3. Follow "Remote & Local" steps.

Remote & Local:

1. Review the snippets used to add the content.
2. Confirm that each class does what each class says it should.

Notes

The "sub" patterns of intro, banner, and layout will be extracted in FP-1462 and FP-1463.

To Do

Design Tweaks

• nested section width should extend past parent (example: 95vw, but find a way to still use 100vw) — 210ffe4
• nested section should have some top/bottom padding — 210ffe4
• fix [class*=o-section--style]+[class*=o-section--style] to be color A after color A (never B+A nor A+B) — b682ded
• note in a ticket that gray section style will have the same top/bottom spacing as light and dark — FP-1470

Footnotes

1. This is a fix to match the design. The left-and-right padding is (on most screens) 15px and comes from Bootstrap. ↩

[duckonomy]

Tested locally!
LGTM!

[wesleyboar]

Thanks, @duckonomy.