SASS Containers: Solved Runners

Every runner from the lesson, solved with only OCS container grammar.

Example A: Container and Card

View example code

<div class="ocs__container">
  <h2 class="ocs__section-title">Poway Scripps Rotary Club</h2>
  <div class="ocs__card">
    <p class="ocs__description">Neighbors serving Poway together through weekly fellowship and local service projects.</p>
  </div>
</div>

Poway Scripps Rotary Club

Neighbors serving Poway together through weekly fellowship and local service projects.

Example B: Container + Grid

View example code

<div class="ocs__container">
  <div class="ocs__card">
    <h3 class="ocs__section-title">Rotary Service Projects</h3>
    <div class="ocs__grid ocs__grid--standard cols-2">
      <div class="ocs__grid-cell">Parade: The club hosts the annual Poway Rotary Parade on Poway Road.</div>
      <div class="ocs__grid-cell">Service: Members fund scholarships, park cleanups, and food drives.</div>
    </div>
  </div>
</div>

Rotary Service Projects

Parade: The club hosts the annual Poway Rotary Parade on Poway Road.

Service: Members fund scholarships, park cleanups, and food drives.

Example C: Full Container Composition

View example code

<div class="ocs__container">
  <h2 class="ocs__section-title">Poway Rotary Parade Hub</h2>
  <div class="ocs__card">
    <div class="ocs__grid ocs__grid--standard cols-2">
      <div class="ocs__grid-cell ocs__grid-cell--accent">Parade Day: Saturday at 9:00AM on Poway Road</div>
      <div class="ocs__grid-cell">Volunteers: Greeters, setup crew, and cleanup team</div>
    </div>
    <div class="ocs__table-wrap">
      <table class="ocs__table">
        <tr><th>Event</th><th>Status</th></tr>
        <tr><td>Parade Floats</td><td>Confirmed</td></tr>
        <tr><td>Food Drive</td><td>Collecting donations</td></tr>
      </table>
    </div>
    <div class="ocs__callout">One Rotary container holds the whole Parade hub — same styling on phones and computers, no custom CSS needed.</div>
  </div>
</div>

Poway Rotary Parade Hub

Parade Day: Saturday at 9:00AM on Poway Road

Volunteers: Greeters, setup crew, and cleanup team

Event	Status
Parade Floats	Confirmed
Food Drive	Collecting donations

One Rotary container holds the whole Parade hub — same styling on phones and computers, no custom CSS needed.

Live Example: Three-Column Grid

View example code

<div class="ocs__container">
  <div class="ocs__card">
    <h3 class="ocs__section-title">Rotary Events Resize With You</h3>
    <p class="ocs__description">One Rotary container holds every event update. The standard grid splits it into columns that stretch and wrap.</p>
    <div class="ocs__grid ocs__grid--standard cols-3">
      <div class="ocs__grid-cell">Parade gathers crowds down Poway Road.</div>
      <div class="ocs__grid-cell">Service projects fund scholarships.</div>
      <div class="ocs__grid-cell">Weekly meetings connect volunteers.</div>
    </div>
  </div>
</div>

Rotary Events Resize With You

One Rotary container holds every event update. The standard grid splits it into columns that stretch and wrap.

Parade gathers crowds down Poway Road.

Service projects fund scholarships.

Weekly meetings connect volunteers.

Popcorn Hack: Parade Invite Rescue

Rebuilt with one container, one card, and a three-cell standard grid.

View example code

<div class="ocs__container">
  <div class="ocs__card">
    <h2 class="ocs__section-title">Poway Rotary Parade Invite</h2>
    <p class="ocs__description">Join us on Poway Road for a morning of floats, service, and community.</p>
    <div class="ocs__grid ocs__grid--standard cols-3">
      <div class="ocs__grid-cell ocs__grid-cell--accent">Location: Poway Road</div>
      <div class="ocs__grid-cell">Start time: 9:00AM</div>
      <div class="ocs__grid-cell">What you get: An invaluable local and cultural experience!</div>
    </div>
  </div>
</div>

Poway Rotary Parade Invite

Join us on Poway Road for a morning of floats, service, and community.

Location: Poway Road

Start time: 9:00AM

What you get: An invaluable local and cultural experience!

Homework Hack: Parade Hub Page

One container, one card, header/accent/muted cells, a wrapped table, and a callout.

View example code

<div class="ocs__container">
  <div class="ocs__card">
    <h2 class="ocs__section-title">Poway Rotary Parade</h2>
    <p class="ocs__description">Location, start time, and parade details for the Poway Scripps Rotary Parade.</p>
    <div class="ocs__grid ocs__grid--standard cols-3">
      <div class="ocs__grid-cell ocs__grid-cell--header">Parade Hub</div>
      <div class="ocs__grid-cell ocs__grid-cell--accent">Location: Poway Road</div>
      <div class="ocs__grid-cell">Start time: 9:00AM</div>
      <div class="ocs__grid-cell ocs__grid-cell--muted">Parade floats: Confirmed</div>
    </div>
    <div class="ocs__table-wrap">
      <table class="ocs__table">
        <tr><th>Entry</th><th>Status</th></tr>
        <tr><td>Parade Floats</td><td>Open</td></tr>
        <tr><td>Food Drive</td><td>Collecting donations</td></tr>
      </table>
    </div>
    <div class="ocs__callout">One container and one card hold the whole Parade hub. Resize the window to check the grid on a phone.</div>
  </div>
</div>

Poway Rotary Parade

Location, start time, and parade details for the Poway Scripps Rotary Parade.

Location: Poway Road

Start time: 9:00AM

Parade floats: Confirmed

Entry	Status
Parade Floats	Open
Food Drive	Collecting donations

One container and one card hold the whole Parade hub. Resize the window to check the grid on a phone.