OCS SASS Containers Grammar

Reference Guide

Key Vocabulary: SASS Containers

Part 1: SASS Containers Terms

Source: OCS SASS Containers Grammar lesson notebook (see Sources).

Term	Meaning
Container (`ocs__container`)	The outer page boundary that centers content and holds every other OCS block. Use only one per page.
Card (`ocs__card`)	A framed group that keeps related content together inside the container.
Grid (`ocs__grid`)	A responsive layout that splits content into columns inside a card.
Grid Cell (`ocs__grid-cell`)	One item inside a grid. Each cell is one column slot.
Table Wrap / Table (`ocs__table-wrap`, `ocs__table`)	A styled, aligned table for rows of data. The wrap keeps it lined up with the container.
Callout (`ocs__callout`)	A highlighted line used for a key takeaway or reminder.
Modifier	A class added to an element to change its look or layout, such as `--standard`, `--accent`, or `cols-3`.
Global Styling	Shared styles that apply across the whole site, so you don’t write your own CSS.
Custom / Inline CSS	Style rules you write yourself with `style="..."` or made-up classes like `page-wrap`. This lesson says not to use them.
Nesting	Placing elements inside other elements (cell inside grid inside card inside container).
Child Element	An element placed inside another element (its parent).
Responsive	A layout that adjusts to screen size, such as 3 columns on a computer and fewer on a phone.
`max-width`	A CSS property that limits how wide an element can get (900px for the container).
`margin: 0 auto`	Centers an element horizontally by splitting the leftover space evenly on both sides.
`padding`	The space between an element’s content and its edge.
`rem`	A relative unit equal to the root font size, usually 16px.
CSS Variable (`var(--pref-...)`)	A stored value, like the user’s chosen font or text color, that styles can reuse.
`box-sizing: border-box`	A rule that counts padding and border inside an element’s width instead of adding to it.
*`` (Universal Selector)**	A selector that applies a rule to every element, such as every child of `.ocs__container`.

Part 2: Official College Board CSP Vocabulary

Source: College Board, AP Computer Science Principles Course and Exam Description (CED), Effective Fall 2023. Definitions are paraphrased from the CED; the reference column gives the CED code or page. The CED does not cover SASS or CSS, so these are the CED terms that the lesson’s ideas connect to (organizing a page into reusable pieces, the LxD design cycle, and testing).

Term	Meaning	CED Reference
Abstraction	Reducing complexity by focusing on the main idea and hiding details that don’t matter for the task at hand.	DAT-1.A.5 (p. 46)
Procedural Abstraction	Grouping code into a procedure so it is more readable and reusable. Parameters make the procedure general enough to be used with different inputs.	Big Idea 3 overview (p. 59)
Program	A collection of program statements that performs a specific task when run. Often called software.	CRD-2.B.1 (p. 34)
User Interface	The way a user interacts with a program. A well-designed one makes it clear what data the program needs as input.	Big Idea 1 overview (p. 29); CRD-2.F (p. 37)
Iterative Development	A process that requires refining and revising based on feedback, testing, or reflection throughout, which may mean going back to earlier phases.	CRD-2.E.3 (p. 36)
Incremental Development	Breaking a problem into smaller pieces and making sure each piece works before adding it to the whole.	CRD-2.E.4 (p. 36)
Investigation	Learning a program’s requirements, constraints, and users’ concerns. Methods include surveys, user testing, interviews, and direct observation.	CRD-2.F.1 to CRD-2.F.3 (p. 37)
Testing	Running a program on defined inputs to check that it produces the expected results, then revising based on those results.	CRD-2.J.1 (p. 40)
Variable	An abstraction inside a program that holds a value. Meaningful names make code easier to read.	AAP-1.A.1, AAP-1.A.2 (p. 63)	`outputElement` holds the output area. CSS variables like `--pref-font-family` are a similar idea.

2. LxD Cycle Process

Empathize: Students need to be able to understand and organize pages built by SASS. A lack of organization can lead to confusing content that cannot communicate concepts effectively.

Define:

POV: CSP students want to understand content effectively. Organization via SASS and OCS Containers can help with this.
Learning Goal: Students will not only understand what OCS containers are, but will be able to see how they fit into the broader site & SASS grammar.

Ideate:

HMW Question: How might we get students to ask “How can I use SASS to more effectively organize and understand my page or my lesson?”
HMW Question: How might we show how an OCS Container fits into the broader SASS & OCS ecosystem?

Prototype: Our initial prototype was not interactive, was a bit confusing, and did not illistrate how containers fit with other SASS elements.

Test: Thanks to repeated testing and feedback, we identified what we stated above in prototype and created multiple revisions that were more interactive and easier to understand.

3. College Board Requirements

Under “Big Idea 1” (Topic 1.3) Reference CRD-2.F.7

Organizing the program into models and functional componetnts

This requirement shows the need for modular code to improve organization. SASS & OCS Containers use and allow for modular site-wide styling.

4. Lesson Plan

Learning Objective: Learn how to use OCS SASS Containers and how to put other OCS elements inside them to create a site that follows global styling.
Success Criteria: You have succeeded when you can ideate, build, and test a full webpage or lesson page that uses only OCS SASS grammar with no custom CSS.
Theme: Our lesson theme is the Poway Rotary Club capstone.

OCS Container

The OCS Container is a structural wrapper that establishes the page boundary and provides structure for the content in our page.

How it Fits

flowchart TB
    subgraph container["ocs__container<br/>outer page boundary"]
        direction TB
        subgraph card["ocs__card<br/>framed group"]
            direction TB
            subgraph grid["ocs__grid<br/>repeated layout"]
                direction TB
                cell1["ocs__grid-cell<br/>text + ocs__btn"]
                cell2["ocs__grid-cell<br/>text + status"]
            end
            tablewrap["ocs__table-wrap<br/>ocs__table"]
            callout["ocs__callout"]
        end
        grid --> tablewrap --> callout
        cell1 --> cell2
    end

Key Takeaway: Containers encompass the entire page, and all other SASS elements are “contained” in them.

Tech Talk

We are using a shared OCS container grammar. This means you don’t need to write CSS for your page layout. Instead of writing wrapper styles, you just need to put your code within a ocs_container block. Trust the global system to take care of the styling.

The Rule: Use one ocs__container <div> block per page, with children like ocs__card and ocs__grid. Let the system handle the look.
✅ Do this: <div class="ocs__container"> with <div class="ocs__card"> inside it
✅ Do this: use ocs__grid ocs__grid--standard cols-2 inside a card
✅ Do this: use ocs__table-wrap + ocs__table for tabular content
❌ Don’t do this: <div class="page-wrap" style="max-width: 900px; margin: auto;">
❌ Don’t do this: invented classes like pretty-box, tile, or wrap
❌ Don’t do this: inline styles such as style="display: flex" or style="color: purple"
❌ Don’t do this: <div class="page-wrap" style="max-width: 900px; margin: auto;"> or <div class="pretty-box">

Why do we do this? It ensures our whole project looks consistent, makes our code reusable, and keeps every page responsive without extra work.

SASS Code

You can find the OCS SASS Container code in _sass/open-coding/elements/containers/common.scss (loaded through _main.scss in the same folder). That code is shown below:

// Shared page container for document-style elements.
.ocs__container {
  max-width: 900px; // constrains the page to a readable width(900 pixels)
  margin: 0 auto; //  Centers the container
  padding: 2rem 1.5rem; // 1 rem = 16 pixels; Establishes a border between the text and the edge of the container
  font-family: var(--pref-font-family); // Use the font that the user prefers(the font that you have selected in OCS settings that is stored in the backend)
  color: var(--pref-text-color); // Use the text coor that the user prefers(the font that you have selected in OCS settings that is stored in the backend)
}

.ocs__container,
.ocs__container * { // * makes it so that the rules in the brackets{} are applied to all children of .ocs__container
  box-sizing: border-box;
}

5. Code Examples

How you can use OCS containers in your blogs, projects, and hacks.

A. Simple: Container and Card

<div class="ocs__container">
  <!-- Outer page boundary: keeps content centered and readable -->
  <h2 class="ocs__section-title">Poway Scripps Rotary Club</h2>
  <!-- Shared OCS heading style for the section title -->
  <div class="ocs__card">
    <!-- Card groups related content into one framed block -->
    <p class="ocs__description">Neighbors serving Poway together through weekly fellowship and local service projects.</p>
    <!-- Description text uses the theme-aware OCS text styling -->
  </div>
</div>

Challenge

Press **Run** to render a centered `ocs__container` showing the heading “Poway Scripps Rotary Club” and one framed `ocs__card` with a single description paragraph about Rotary fellowship and service.

Lines: 1 Characters: 0

UI Output

B. Adding a Grid

<div class="ocs__container">
  <!-- Page boundary: all content is inside one centered layout -->
  <div class="ocs__card">
    <!-- Card creates a grouped section with the same OCS framing -->
    <h3 class="ocs__section-title">Rotary Service Projects</h3>
    <!-- Section title kept consistent with the site styling -->
    <div class="ocs__grid ocs__grid--standard cols-2">
      <!-- Grid establishes two equal columns inside the card -->
      <div class="ocs__grid-cell">Parade: The club hosts the annual Poway Rotary Parade on Poway Road.</div>
      <!-- Each cell is one item in the grid layout -->
      <div class="ocs__grid-cell">Service: Members fund scholarships, park cleanups, and food drives.</div>
      <!-- Same pattern for the second column item -->
    </div>
  </div>
</div>

Challenge

Press **Run** to render one `ocs__card` titled “Rotary Service Projects” holding a 2-column standard grid, a Parade cell and a Service cell, that collapses to one column on mobile.

Lines: 1 Characters: 0

UI Output

C. Complex: Full Container Composition

<div class="ocs__container">
  <!-- Root container keeps the whole page in one readable layout -->
  <h2 class="ocs__section-title">Poway Rotary Parade Hub</h2>
  <!-- Standard section heading inside the container -->
  <div class="ocs__card">
    <!-- Card groups the content into one framed section -->
    <div class="ocs__grid ocs__grid--standard cols-2">
      <!-- Grid creates two columns for the main Parade summary -->
      <div class="ocs__grid-cell ocs__grid-cell--accent">Parade Day: Saturday at 9:00AM on Poway Road</div>
      <!-- Accent cell highlights the main status or priority -->
      <div class="ocs__grid-cell">Volunteers: Greeters, setup crew, and cleanup team</div>
      <!-- Regular cell for the secondary item -->
    </div>
    <div class="ocs__table-wrap">
      <!-- Wrap keeps the table aligned with the OCS container layout -->
      <table class="ocs__table">
        <!-- Table uses the shared OCS table style -->
        <tr><th>Event</th><th>Status</th></tr>
        <!-- Header row labels the columns -->
        <tr><td>Parade Floats</td><td>Confirmed</td></tr>
        <!-- Data row shows one entry and its status -->
        <tr><td>Food Drive</td><td>Collecting donations</td></tr>
        <!-- Second data row shows another entry and its status -->
      </table>
    </div>
    <div class="ocs__callout">
      <!-- Callout highlights an important takeaway or reminder -->
      One Rotary container holds the whole Parade hub — same styling on phones and computers, no custom CSS needed.
    </div>
  </div>
</div>

Challenge

Press **Run** to render the “Poway Rotary Parade Hub” heading plus one `ocs__card` with a 2-column grid (accent Parade Day cell + Volunteers cell), a 3-row Event/Status table (header + Parade Floats + Food Drive), and a highlighted callout line at the bottom.

Lines: 1 Characters: 0

UI Output

Live Example: Rotary Events in a Standard Grid

Resize the window to see it work. The three Rotary event cells share the container width and collapse from 3 columns to 2 on mobile. This applies to every container using the same grammar, existing or new, with no custom CSS.

Challenge

Press **Run** to render one `ocs__card` titled “Rotary Events Resize With You” with a description line and a 3-column standard grid (Parade, Service projects, and Weekly meetings cells) that wraps to fewer columns on narrow screens. Resize the window to see it.

Lines: 1 Characters: 0

UI Output

What benefit did containers give us?

Styling all content in a specific section: OCS containers allow us to style all other OCS SASS elements, such as grids, cards, and grid cells, in one centralized place.

6. Hacks & Practice Tasks

Popcorn Hack (In-Class)

Parade Invite Rescue (~5 minutes)

A short 5-minute challenge: Rescue a broken Poway Scripps Rotary Parade invite page using only the OCS container grammar. No custom CSS.

Story:: The Rotary Club’s invite sprawls edge-to-edge, uses a purple inline title, and lays out the schedule with a hand-made flex row that breaks on phones. Rebuild it inside one ocs__container so it looks consistent and responsive.

Starter runner — edit the HTML strings below, then press Run:

Your tasks:

Replace the page-wrap div with one ocs__container div.
Wrap the content in an ocs__card, with the title as an ocs__section-title and a one-line ocs__description of your own.
Replace the inline flex row and box divs with an ocs__grid ocs__grid--standard cols-3 holding three ocs__grid-cell divs (one per schedule item, one with --accent).
Remove every inline style and made-up class. Press Run and resize to check it collapses cleanly on mobile.

Done when:

Present: One ocs__container, one ocs__card, one ocs__grid--standard with three ocs__grid-cell children in the runner output.
Absent: inline styles and made-up classes like page-wrap or box.
Test: Demonstrate system awareness and ensure the finished product works on phones as well as computers.

Challenge

UI Output currently renders the broken starter: an unstyled `page-wrap` div with a purple inline-styled H1 (“Poway Rotary Parade Invite”) and a hand-made flex row of three plain `box` divs (Location, Start time, What you get). Rebuild it inside one `ocs__container` using only OCS container grammar, then press **Run**.

Lines: 1 Characters: 0

UI Output

Your tasks:

Rewrite the invite to use OCS SASS elements, and add an OCS container to the right location.

Replace the page-wrap div with one ocs__container div.
Wrap the content in an ocs__card, with the title as an ocs__section-title and a one-line ocs__description of your own.
Replace the inline flex row and box divs with an ocs__grid ocs__grid--standard cols-3 holding three ocs__grid-cell divs (one per schedule item, one with --accent).
Remove every inline style and made-up class. Press Run and resize to check it collapses cleanly on mobile.

Done when:

Present: one ocs__container, one ocs__card, one ocs__grid--standard with three ocs__grid-cell children in the runner output.
Absent: inline styles and made-up classes like page-wrap or box.
Test: Demostrate system awareness by ensuring that you have tested that the finished product and it works on phones as well as computers.

Homework Hack

Parade Hub Page (~30 minutes)

Build a full container page for the Poway Scripps Rotary Parade. Do the required part (~20 min) in a notebook cell; the SASS extra is optional (~10 min).

Starter runner — edit the code below and press Run:

Challenge

UI Output currently renders the broken starter: an unstyled `wrap` div with a teal inline-styled H1 (“Poway Rotary Parade”), a hand-made flex row of three plain `tile` divs, and a plain `border='1'` table with one data row. Rebuild it using only OCS container grammar, then press **Run** to test.

Lines: 1 Characters: 0

UI Output

Now that you have some experience with OCS Containers, use your knowlage on how containers fit toghether to build a small page without using any standard HTML code as a guideline.

Required tasks (Rotary Parade hub):

The Poway Scripps Rotary Club is rebuilding their website. Rebuild the broken Parade hub starter above using only OCS container grammar.
Use exactly one ocs__container holding one ocs__card.
Title as ocs__section-title plus a one-line ocs__description.
A cols-3 standard grid with a --header cell, one --accent cell, and one --muted cell.
The table rebuilt with ocs__table-wrap + ocs__table (header row + two body rows).
One ocs__callout line at the end.

Do:

Do use only OCS container grammar classes.
Do test narrow and wide widths before submitting.
Maintain the Poway Rotary Capstone theme.

Don’t:

Don’t use inline style attributes.
Don’t invent classes like wrap or tile.
Don’t use more than one ocs__container.

6. Grading Plan

0.4 structure: one container, one card, title, description, callout all present.
0.4 grammar: standard grid with header, accent, and muted cells; table uses wrap + table classes with header and two body rows.
0.2 cleanliness: no inline styles or made-up classes.

Optional SASS extra (+0.2):

Write your own SCSS container variant (for example, a wider .my-container or a tinted variant), show the SCSS in a fenced block, and use the new class on your page.

Extra condition: extra credit counts only if the required part scores full marks with zero custom CSS outside the optional SCSS block.

7. Lesson Revisions

The Feedback we recived: We recived feedback that our lesson wasn’t interactive enouph, and could communicate ideas in a better way

8. Feedback Evidence

What we did: We created a mermaid diagram to illistrate clearly how containers fit in with other SASS elements, and added UI runners.

9. References

Submit Assignment

Need to update a submission later? Open the submissions dashboard.

Create Microblog Post

Reply to Post

Reference Guide

Key Vocabulary: SASS Containers

Part 1: SASS Containers Terms

Part 2: Official College Board CSP Vocabulary

2. LxD Cycle Process

3. College Board Requirements

4. Lesson Plan

OCS Container

How it Fits

Tech Talk

SASS Code

5. Code Examples

A. Simple: Container and Card

Challenge

B. Adding a Grid

Challenge

C. Complex: Full Container Composition

Challenge

Live Example: Rotary Events in a Standard Grid

Challenge

What benefit did containers give us?

6. Hacks & Practice Tasks

Popcorn Hack (In-Class)

Challenge

Homework Hack

Challenge

6. Grading Plan

7. Lesson Revisions

8. Feedback Evidence

9. References

Submit Assignment