SASS Containers HW
Goal
Rebuild the Poway Scripps Rotary Parade invite and hub using only OCS container grammar. Each runner is a separate example with exactly one container and one card. All content belongs inside that card, with no inline styles or made-up classes.
The schedule and statuses below are sample content from the exercise, not a verified announcement of an upcoming event.
Popcorn Hack: Parade Invite Rescue
The outer page-wrap becomes ocs__container, and one card groups the title, my own description, and the schedule. Three ocs__grid-cell elements replace the flex row and box classes. I accented the start time so visitors can quickly find when to arrive. The shared standard grid handles the responsive layout.
Challenge
Popcorn Hack: Parade Invite Rescue
Homework Hack: Parade Hub Page
The header cell labels the whole grid. The accented cell emphasizes arrival time, the regular cell gives the location, and the muted cell supplies a secondary volunteer reminder. The table wrapper groups the activity/status table, which has a header row and exactly two body rows. The final callout gives visitors a clear takeaway.
Challenge
Homework Hack: Parade Hub Page
Design thinking
Empathize: A visitor needs to locate the parade’s time and place quickly, including while reading on a phone. A volunteer also needs secondary reminders without losing the main event details.
Define: Keep the hub inside one readable boundary, group related information in one card, and distinguish the schedule, activity statuses, and final takeaway.
Ideate: Use the standard grid for short event details and a table for repeated activity/status pairs. Give the most urgent schedule information an accent and keep the volunteer reminder muted.
Prototype: Replace the broken wrapper and tile classes with the shared container, card, grid, table, and callout grammar. Use semantic headings and scoped table headers.
Test and revise: Check the markup against the required structure first. Next, run both examples in the browser at wide and narrow widths; look for clipped text, horizontal page overflow, and an unreadable table. Browser verification is still pending, so no phone or desktop visual pass is claimed.
Why the container matters
The container sets the outer page boundary. A card groups related content inside that boundary; the grid and table organize different kinds of content inside the card. Shared styles provide consistent spacing and theme preferences. Reusing a class is a styling abstraction, while procedural abstraction specifically involves reusable procedures.
Validation
The completed markup has no style attributes, embedded stylesheets, legacy border attributes, or invented classes. Each example has one container and one card. The homework has one standard cols-3 grid, header/accent/muted cells, a wrapped table with two body rows, and one final callout.
The optional SCSS variant is omitted so the submission stays within the required OCS grammar. No site stylesheet, layout, or shared component is changed for this homework. The local checkout may lack some of the lesson’s shared OCS styles; the markup relies on that styling being available in the lesson/site environment.
Browser checks before submission
- Press Run on each example and confirm that its content appears.
- At a wide width, verify that the invite has three schedule columns and the hub header spans its grid.
- At a narrow width, check that the site’s shared grid rules reduce columns and keep the text readable.
- Confirm the table’s two activity rows remain readable without overflowing the page.
- Change the site’s theme preferences and check that shared OCS elements follow them.
These browser checks have not been performed in this session.