SASS Grids HW
SASS Grids HW — OCS Grid Grammar
Lesson: https://pages.opencodingsociety.com/sass/grids/
Rule: only ocs__card, ocs__grid, ocs__grid--*, cols-*, ocs__grid-cell, ocs__grid-cell--*. No style, no made-up classes. One variant per grid.
Popcorn Hack 1 — Fix the beaker row
Replaced style="display:grid..." and made-up box class with one ocs__grid ocs__grid--standard and three ocs__grid-cell boxes.
Beaker 1
pH 7.1 — control reading
Beaker 2
pH 6.8 — trial reading
Beaker 3
pH 8.2 — outlier reading
Challenge
Grids Popcorn 1 — edit the HTML below and press Run to preview it.
Popcorn Hack 2 — Size beakers with fr
Goal: 4 beakers in ONE row, Control Beaker twice as wide. fr count = boxes per row; fr size = width share.
fr values used = 1fr 1fr 1fr 2fr (Control gets 2 of 5 shares).
Beaker 1
pH 7.1
Beaker 2
pH 6.8
Beaker 3
pH 8.2
Control Beaker
pH 7.0 — twice as wide (2fr)
Challenge
Grids Popcorn 2 — edit the HTML below and press Run to preview it.
Homework Hack — standard grid + calculator keypad
- Grid 1 (
ocs__grid--standard): title →--headercell, Beaker 3 (outlier) →--accent. - Grid 2 (
ocs__grid--calculator): keypad for beaker readings,Avgkey →--accent.
Trial 1 — Beaker Readings
Beaker 1
pH 7.1
Beaker 2
pH 6.8
Beaker 3
pH 8.2 — outlier
7
8
9
Avg
Challenge
Grids Homework — edit the HTML below and press Run to preview it.
Submission notes & MCQ Result Text
Lesson: OCS Grid Grammar (SASS Grids)
MCQ Grids: 4/4 | answers: A,B,C,D
Popcorn 1: three beakers refactored to ocs__grid (yes)
Popcorn 2: fr values used = 1fr 1fr 1fr 2fr
Homework: every check shows PASS (yes)