OCS SASS Containers Grammar

Source lesson: navigation/sass/containers/lesson

Nesting order used on every page: ocs__container → ocs__card → ocs__grid → ocs__grid-cell, with ocs__table-wrap and ocs__callout also inside the card.

Popcorn Hack: Parade Invite Rescue

• page-wrap + inline max-width → one ocs__container
• purple inline <h1> → ocs__section-title inside an ocs__card, plus a one-line ocs__description
• inline flex row + box divs → ocs__grid ocs__grid--standard cols-3 with three ocs__grid-cells, the start time as --accent
• no style attributes or made-up classes left

Poway Rotary Parade Invite

You're invited to the Poway Scripps Rotary Parade, a morning of floats, music and neighbors on Poway Road.

Location: Poway Road

Start time: 9:00 AM

What you get: An invaluable local and cultural experience!

Poway Rotary Parade Invite

You're invited to the Poway Scripps Rotary Parade, a morning of floats, music and neighbors on Poway Road.

Location: Poway Road

Start time: 9:00 AM

What you get: An invaluable local and cultural experience!

Test: at full width the three cells sit side by side. At phone width the standard grid wraps to fewer columns on its own. Nothing in the markup sets a width, so the container’s max-width and the grid handle both sizes.

Homework Hack: Parade Hub Page

Every required piece, in order:

Requirement	Where
exactly one ocs__container holding one ocs__card	outer two divs
title + one-line description	ocs__section-title, ocs__description
cols-3 standard grid with a --header, an --accent and a --muted cell	the grid
table rebuilt with ocs__table-wrap + ocs__table, header row + two body rows	the table
one ocs__callout at the end	last element in the card

The teal inline <h1>, wrap / tile classes, display: flex and border='1' table are all gone.

Poway Rotary Parade

Everything you need for parade day, from where to stand to which floats are confirmed.

Parade Day at a Glance

Location: Poway Road

Start time: 9:00 AM

Parade floats: line-up begins at 7:30 AM

Entry	Status
Rotary Club float	Open for volunteers
Poway High marching band	Confirmed

Arrive early: Poway Road closes to traffic at 8:00 AM, and the best viewing spots fill up fast.

Poway Rotary Parade

Everything you need for parade day, from where to stand to which floats are confirmed.

Parade Day at a Glance

Location: Poway Road

Start time: 9:00 AM

Parade floats: line-up begins at 7:30 AM

Entry	Status
Rotary Club float	Open for volunteers
Poway High marching band	Confirmed

Arrive early: Poway Road closes to traffic at 8:00 AM, and the best viewing spots fill up fast.

Test (narrow and wide): wide, the header spans the top row and the three detail cells sit beneath it. Narrow, the grid wraps and the table stays inside ocs__table-wrap, so it lines up with the card instead of overflowing the page.

Why the cell types fit: the header labels the whole grid. The start time is the one detail everyone needs, so it’s accented. The float line-up time is for participants, not spectators, so it’s muted.