OCS SASS Containers Grammar HW
Popcorn Hack: Parade Invite Rescue
Click Run in the UI runner to render the rescued invite. The page-wrap div, the purple inline title, and the hand-made flex row are replaced with one ocs__container, one ocs__card, and a 3-column standard grid with one accent cell. There are no inline styles or made-up classes.
Challenge
Popcorn Hack - Parade Invite Rescue
Homework Hack: Parade Hub Page
Click Run in the UI runner to render the rebuilt Parade hub. It uses exactly one ocs__container holding one ocs__card, a section title with a one-line description, a 3-column standard grid with a header, accent, and muted cell, a table built with ocs__table-wrap and ocs__table, and a closing callout. Resize the window to check that the grid collapses cleanly on narrow screens.
Challenge
Homework Hack - Poway Rotary Parade Hub
Containers Explanation
The ocs__container sets one centered page boundary, and every other OCS block nests inside it: the card groups related content, the grid splits it into responsive columns, and the table and callout reuse shared styles. Because the global SASS handles widths, spacing, and colors, the page needs no inline styles or invented classes, and it adapts to phone and computer screens automatically. This is the same idea as abstraction in AP CSP: the container hides the layout details so I can focus on the content.