Task/FP-1289 Image Grid Pattern

[wesleyboar]

Overview

Create class for CMS editors to use to create image grids (but not galleries).

Issue

FP-1289

Changes

• New o-grid CSS class (and sample markup).
• New snippet (symlink to CSS sample markup).
• New global variable for grid gap (match Bootstrap value).
• New x-grid CSS mixin.

Demos

Demo	Notes
Core CMS Dev Pattern Library	supports .o-grid via Core
Automated Pattern Library	test of ugly KSS software
Core CMS Live Pattern Library	supports .o-grid via snippet

Screenshots

All Snippets	Example Gallery

Testing

Remote:

Jenkins Jobs

• Build: https://jenkins01.tacc.utexas.edu/job/Core_CMS/322
• Deploy: https://jenkins01.tacc.utexas.edu/job/Core_Portal_Deploy/939/

1. Open https://dev.cep.tacc.utexas.edu/design-system/pattern-library/o-grid/.
2. If this branch is deployed, then the page should load many sets of collapsed galleries.
3. Follow "Remote & Local" steps.

Local:

Snippets to Make

NAME: UI: O-Grid: fill, auto
HTML: o-grid--image-fill o-grid--col-auto-count
TEMPLATE: snippets/manual-pattern-library/o-grid.html

NAME: UI: O-Grid: center, auto
HTML: o-grid--center-align o-grid--col-auto-count
TEMPLATE: snippets/manual-pattern-library/o-grid.html

NAME: UI: O-Grid: fill, auto
HTML: o-grid--image-fill o-grid--col-auto-count
TEMPLATE: snippets/manual-pattern-library/o-grid.html

NAME: UI: O-Grid: fill, min
HTML: o-grid--center-align o-grid--col-min-width
TEMPLATE: snippets/manual-pattern-library/o-grid.html

1. Be familiar with how to Test CMS Changes.
2. Create snippets that uses template snippets/manual-pattern-library/o-grid.html.
3. Follow "Remote & Local" steps.

Remote & Local:

1. Expand each gallery within each section/snippet.
2. Confirm that each class combination¹ does what each class says it should.
   • To test each class individually, you can reduce the classnames passed in the HTML snippets.²
   • To test number of columns, resize window. For o-grid--col-auto-count, test standard breakpoints.

Footnotes

1. Most uses of o-grid will likely have two of these modifier classes. ↩

2. To preview this, see tacc-wbomar-css-pattern-library-kss.surge.sh. ↩

[wesleyboar]

Added notes for reviewers.

[duckonomy]

Was able to follow the testing steps locally with snippets and through the deployed branch!
LGTM!
Thanks for redeploying by the way!