OCS Grid Grammar

1. Reference Guide

Key Vocabulary

Term	Definition	Example
Grid	The layout that holds the boxes	The lab tray
Cell	One box inside the grid	One test beaker
Variant	The class that says what kind of grid it is	`ocs__grid--standard`
Cell type	A class that changes one box	`ocs__grid-cell--accent`
`fr`	One share of the free space in a row	`1fr 2fr`
Span	How many columns one cell covers	`--wide` covers 2

Grid Structure

Every OCS grid is built from the same layers, from the outside in.

Class	What it is	Lab tray example
`ocs__card`	A framed panel around the grid	The lab bench the tray sits on
`ocs__grid`	The grid itself. Always the outer element	The lab tray
`ocs__grid--*`	The grid variant. Pick exactly one	What kind of tray it is
`ocs__grid-cell`	One box. Every item inside the grid gets this	One test beaker
`ocs__grid-cell--*`	A cell type that changes one box	A label on one beaker
`<h3>`	A title inside a cell	“Hypothesis”
`<p>`	Normal text inside a cell	A beaker reading

OCS Grid Grammar

Class	What it does
`ocs__grid--standard`	3 boxes per row, same as `1fr 1fr 1fr` (2 on phones)
`cols-2`, `cols-4`	Changes a standard grid to 2 or 4 boxes per row
`ocs__grid--card`	Fits as many cards as it can, each at least 200px wide
`cols-3`	Makes a card grid exactly 3 cards per row
`ocs__grid--color`	Each box shows its own color when you hover
`ocs__grid--holographic`	Boxes cycle through rainbow colors in a wave
`ocs__grid--calculator`	4 square buttons per row, like a keypad
`ocs__grid--gallery`	Fits as many square tiles as it can
`ocs__grid-cell--header`	Stretches across the whole row (a title)
`ocs__grid-cell--wide`	Stretches across 2 columns
`ocs__grid-cell--accent`	Accent color so it stands out (an outlier beaker)
`ocs__grid-cell--muted`	Faded so it stays in the background (the control beaker)

Picking a Grid

Rows of readings -> ocs__grid--standard (add cols-2 or cols-4)
Report sections with titles and text -> ocs__grid--card
A keypad for typing in numbers -> ocs__grid--calculator
Photos or square tiles -> ocs__grid--gallery
The title of a trial -> ocs__grid-cell--header
The outlier beaker -> ocs__grid-cell--accent
The control beaker -> ocs__grid-cell--muted

Try using some of these

The runner below is a lab tray inside a card. Try these one at a time, pressing Run after each:

Change ocs__grid--standard to ocs__grid--color, then hover over the boxes.
Change it to ocs__grid--holographic, then to ocs__grid--gallery.
Change it back to ocs__grid--standard and add cols-4 after it.
Delete ocs__grid-cell--wide from the Lab Notes cell and watch it shrink to 1 column.
Move ocs__grid-cell--accent to a different beaker.

Challenge

Try using some of these: swap the grid variant, add cols-4, and move the cell types around. Press Run after each change.

Lines: 1 Characters: 0

UI Output

2. LxD Cycle Process

Empathize: Students build layouts by hand. They use inline styles like <div style="display:flex; width:33%"> or made up classes like my-row. These layouts break on phones, ignore the user’s theme, and look different on every page. Most students also cannot say why a grid shows 2 boxes in a row instead of 3, so they guess at classes instead of picking them on purpose. A study of beginner web pages found the same thing. Typing mistakes got fixed quickly, but mistakes about ideas, like how CSS positioning works, were left unfixed more than half the time, because a broken layout still shows something on the screen (Park & Forte, 2013).

Define:

POV: CSP students need a reusable way to put lab data into rows and columns. Layout CSS they write by hand breaks on small screens and clashes with the site theme.
Learning Goal: Students will build a layout using only OCS grid grammar: ocs__grid, one variant, ocs__grid-cell, and cell types. They will also explain how fr sets the number of boxes in a row and the width of each box.

Ideate:

HMW Question: How might we get students to trust the OCS grid classes instead of writing their own layout CSS?
HMW Question: How might we show that the number of fr values sets the boxes per row, while the size of each number sets the width?
Activity: Change fr values and OCS classes in live runners, then fix a badly built lab layout using only OCS classes.

Prototype:

A reference guide, three live grid runners, two in-class popcorn hacks, an MCQ knowledge check, and a homework hack that checks itself with a PASS/FIX list.
Students revise their markup after reading the checklist output instead of after a grade comes back.
Excellence means explaining why a variant and a cell type fit the data, not only getting the boxes to line up.

Test:

Ask peers in peer review to finish the popcorn hacks without extra explanation.
Watch whether they pick a variant on purpose or guess until the layout looks right.
Compare this lesson with another posted lesson on the same site.
Revise any step or rubric line that did not guide students clearly.
On submission, collect evidence from the runner checklist, the MCQ score line, and the published homework page.
After teaching and grading, come back and revise the lesson to close the teaching cycle.

3. College Board Requirements

AP Computer Science Principles, Big Idea 1: Creative Development, Topic 1.3 Program Design and Development. Quoted from the course and exam description (College Board, 2025):

CRD-2.F “Design a program and its user interface.”
CRD-2.F.6 “The design phase outlines how to accomplish a given program specification.”
CRD-2.F.7 Program design can include the “creation of diagrams that represent the layouts of the user interface.”
CRD-2.E.3 An iterative development process “requires refinement and revision based on feedback, testing, or reflection.”

How this lesson matches: picking a grid variant and cell types is the same work as CRD-2.F.7. You plan how many items go in a row, how much space each one gets, and which ones stand out. Each runner on this page is one small pass of CRD-2.E.3. You change one class, press Run, look at the result, and change it again.

4. Lesson Plan

Learning Objective: Lay out lab data with OCS grid classes so it works on phones and follows the site theme, without writing any CSS.

Success Criteria: You meet this goal when you can do all four of these. Each one is practiced in a task on this page and is worth points in the grading plan.

You can…	Where you practice it	Where it is graded
Replace a hand styled layout with `ocs__grid`, one variant, and `ocs__grid-cell` on every box	Popcorn Hack 1	Popcorn 1, Homework grid structure
Say how many boxes a set of `fr` values makes, and how wide each one is	Tech Talk runner, Popcorn Hack 2	Popcorn 2, MCQ
Pick the right cell type for a box: `--header`, `--wide`, `--accent`, `--muted`	Reference Guide runner, Example B	Homework cell types
Pick the right variant for the job, such as `--standard` or `--calculator`	Examples A and C	Homework calculator

Tech Talk (5 minutes)

A grid puts boxes into rows and columns, like a lab tray holding test beakers. Each box is a cell.

Use HTML for content and OCS grid classes for layout. This example turns plain divs into a responsive, theme aware grid that organizes test beakers and their lab data.

The Rule: Use OCS grid classes. Let the system handle the layout.
Do this: <div class="ocs__grid ocs__grid--standard">
Don’t do this: <div style="display:grid; grid-template-columns:1fr 1fr 1fr"> or <div class="my-row">

Why? Every lab page looks the same, your beaker data fits on phones automatically, and it follows each user’s color settings.

Under the hood, these classes use a unit called fr. It is short for fraction. Each fr value makes one column. A bigger number makes that box wider. For example, cols-2 is the same as 1fr 1fr.

Try changing the fr. The runner below has 2 beakers in a row. Change the values and press Run:

Change 1fr 1fr to 2fr 1fr. Still 2 boxes, but Beaker 1 is now twice as wide.
Change it to 1fr 3fr. Beaker 2 now gets 3 of the 4 shares.
Change it to 1fr 1fr 1fr and add a third beaker cell. Now there are 3 boxes in the row.

Challenge

Try changing the fr: 2fr 1fr, then 1fr 3fr, then 1fr 1fr 1fr with a third beaker. Press Run after each change.

Lines: 1 Characters: 0

UI Output

Remember: adding an fr value adds a box. A bigger fr number makes that box wider. On real pages, let the OCS classes write this for you.

5. Code Examples

A. Simple: Standard Grid

One grid, one variant, and one cell per beaker.

Try it: add a fourth beaker cell and press Run. It wraps to a new row, because a standard grid holds 3 boxes per row.

Challenge

A. Standard Grid: add a fourth beaker cell and press Run.

Lines: 1 Characters: 0

UI Output

B. Intermediate: Adding Cell Types

cols-4 makes 4 boxes per row. The header labels the trial, muted marks the control beaker, and accent flags the outlier beaker.

Try it: move ocs__grid-cell--accent to a different beaker and press Run.

Challenge

B. Adding Cell Types: move the accent cell type to a different beaker and press Run.

Lines: 1 Characters: 0

UI Output

C. Complex: Full Card

A card on the outside, a grid inside it, and cells with a title (<h3>) and text (<p>) inside each one.

Try it: add a third cell with the title Conclusion and press Run.

Challenge

C. Full Card: add a third cell called Conclusion and press Run.

Lines: 1 Characters: 0

UI Output

6. Hacks & Practice Tasks

Submit Details

Create a notebook in your portfolio homework area: _notebooks/homework.
Add a markdown cell with the frontmatter below.
Add code cells for the Popcorn Hacks and the Homework Hack.
Keep %%html and the UI_RUNNER comment in each code cell.
Run each cell and verify the rendered result before submitting.

---
layout: post
title: SASS Grids HW
categories: [SASS]
lesson_language: SASS
lesson_topic: Grids HW
lesson_part: interactive
lesson_type: lesson
permalink: /sass/grids-hw/
author: githubID
---

Use one code cell per hack, with the matching runner comment:

How to Submit

This lesson is submitted as a link to your own published portfolio/blog page.

Commit and push the notebook so the page builds.
Open the published page in your browser and confirm every grid renders.
Copy the full published URL, not the GitHub editor or repository URL.
Paste that URL into the built-in Link Submission form directly below this lesson.
In the description box, paste this:

Lesson: OCS Grid Grammar (SASS Grids)
MCQ Grids: <paste the copied result line, such as 4/4 | answers: A,B,C,D>
Popcorn 1: three beakers refactored to ocs__grid (yes/no)
Popcorn 2: fr values used = <your values>
Homework: every check shows PASS (yes/no)

Submission Safety Rules (Read First)

No custom CSS, no inline style, and no made up classes (the fr hacks are the only place a style is allowed).
Only use these classes: ocs__card, ocs__grid, ocs__grid--*, cols-*, ocs__grid-cell, and ocs__grid-cell--*.
Use exactly one variant class on each grid.
Include your MCQ score line.
If a runner breaks, press Reset to get the starter code back.
Keep %%html and the UI_RUNNER comment line in each notebook submission cell.
Use ## headings or smaller on your page.

Popcorn Hack 1 (In-Class): Fix the Beaker Row

2-minute challenge: the code below lists three test beakers, but it uses an inline style and a made up box class. Replace them with OCS grid classes and press Run.

Goal: end up with one ocs__grid, one standard variant, and three ocs__grid-cell boxes, one per beaker. No style attribute and no box class should be left.

Challenge

Popcorn Hack 1: replace the inline style and the box class with OCS grid classes, then press Run.

Lines: 1 Characters: 0

UI Output

Popcorn Hack 2 (In-Class): Size the Beakers with `fr`

Task: Put all 4 beakers in one row, and make the Control Beaker twice as wide as each of the other beakers.

Goal: show that you can pick fr values on purpose. The number of values sets the boxes per row. The size of each number sets the width.

Hint: 4 boxes in a row means 4 fr values. The Control Beaker is last.

Show answer

grid-template-columns: 1fr 1fr 1fr 2fr;

Challenge

Popcorn Hack 2: change the fr values so all 4 beakers sit in one row and the Control Beaker is twice as wide.

Lines: 1 Characters: 0

UI Output

MCQ Check

Goal: check that you can read a grid before you write one. 4 questions, one at a time. Answer, check, then go to the next one. At the end, copy the score line into your submission notes.

Homework Hack

Task: Fix the code below. Remove every inline style and made up class and use OCS classes instead.

Grid 1: a standard grid. The title becomes a header cell. Beaker 3 is the outlier, so it becomes an accent cell.
Grid 2: a calculator grid, which is a keypad for typing in beaker readings. The Avg key becomes an accent cell.

Goal: this is the whole lesson in one task. You pick the variant, put a cell class on every box, and use the right cell type for the title and the outlier.

Edit the HTML inside the quotes and press Run. The checklist at the top of the output marks each rule PASS or FIX. Keep going until every line says PASS.

Challenge

Homework Hack: fix both grids using only OCS classes. Press Run and keep going until every check says PASS.

Lines: 1 Characters: 0

UI Output

Grading Plan (1 Point Total)

Part	Points	What earns the points
Popcorn 1	0.1	The three beakers use `ocs__grid`, a standard variant, and `ocs__grid-cell`.
Popcorn 2	0.1	All 4 beakers sit in one row and the Control Beaker is twice as wide.
MCQ	0.2	4 correct. 0.15 for 3, 0.1 if every question was answered.
Homework: grid structure	0.25	Both grids use `ocs__grid`, one variant, and `ocs__grid-cell` on every box.
Homework: cell types	0.25	The title is `--header` and the outlier beaker is `--accent`.
Homework: calculator	0.1	The keypad uses `ocs__grid--calculator` with an accent `Avg` key.
Total	1.0

Quick Validation Checklist

No style attributes and no made up classes like box, my-row, sample-card, or key.
Every grid has ocs__grid, one variant, and ocs__grid-cell on every box.
At least one --header and one --accent.
The Homework runner shows PASS on every line.
MCQ score line is in your submission notes.

7. Lesson Revisions

Revision Made: We cut the homework down to two grids, a standard grid of beaker readings and a calculator keypad, instead of four different variants. We moved the Reference Guide and the grammar table to the top of the lesson so students can look classes up before they write any markup. We also added the fr runner in the Tech Talk so students can see why a row holds the number of boxes it does.

8. Feedback Evidence

Feedback Received: During our practice run with the project team, a teammate said the first homework asked for four different grid variants at once. It took too long, and it was confusing which cell types worked with which variant. A second teammate said the grammar table was too far down the page to be useful while working.

9. References

College Board. (2025). AP Computer Science Principles course and exam description. Big Idea 1: Creative Development, Topic 1.3 Program Design and Development. apcentral.collegeboard.org

Mozilla. (2026). grid-template-columns. MDN Web Docs. developer.mozilla.org

Open Coding Society. (2026). OCS grid mixins and element classes [_sass/open-coding/mixins/_grid.scss and _sass/open-coding/elements/grids/_main.scss]. github.com/Open-Coding-Society/pages

Park, T. H., & Forte, A. (2013). Towards a taxonomy of errors in HTML and CSS. In Proceedings of the ninth annual international ACM conference on International computing education research (pp. 75-82). Association for Computing Machinery. doi.org/10.1145/2493394.2493405

Submit Assignment

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

Create Microblog Post

Reply to Post

1. Reference Guide

Key Vocabulary

Grid Structure

OCS Grid Grammar

Picking a Grid

Try using some of these

Challenge

2. LxD Cycle Process

3. College Board Requirements

4. Lesson Plan

Tech Talk (5 minutes)

Challenge

5. Code Examples

A. Simple: Standard Grid

Challenge

B. Intermediate: Adding Cell Types

Challenge

C. Complex: Full Card

Challenge

6. Hacks & Practice Tasks

Submit Details

How to Submit

Submission Safety Rules (Read First)

Popcorn Hack 1 (In-Class): Fix the Beaker Row

Challenge

Popcorn Hack 2 (In-Class): Size the Beakers with fr

Challenge

MCQ Check

Homework Hack

Challenge

Grading Plan (1 Point Total)

Quick Validation Checklist

7. Lesson Revisions

8. Feedback Evidence

9. References

Submit Assignment

Popcorn Hack 2 (In-Class): Size the Beakers with `fr`