SASS - Buttons HW
SASS Buttons
Completed all three Popcorn Hacks and both Homework Hacks using only OCS SASS button classes and layout containers.
Popcorn Hack 1: Add the Base Button Class
Adding ocs__btn applies the shared OCS button styling with no custom CSS.
Challenge
Popcorn Hack 1 — Base Button Class
Popcorn Hack 2: Modifiers and Button Groups
The first action gets the pill and fill modifiers, and both actions sit together in an ocs__links container.
Challenge
Popcorn Hack 2 — Modifiers and Button Group
Popcorn Hack 3: Status Tones and Wide Layout Bar
The second action uses alert-green, the container becomes ocs__links--wide, and the crisis action uses fill as the highest-priority button.
Challenge
Popcorn Hack 3 — Status Tones and Wide Layout
Homework Hack 1: Adaptive Resource Toolbar
The three resource categories move from inline styling to the exact OCS utility classes the lesson requires.
Challenge
Homework Hack 1 — Adaptive Resource Toolbar
Homework Hack 2: Primary vs. Secondary Action Priority
Fill, outline, and alert modifiers build a clear visual hierarchy in the action row, again with no custom CSS.
Challenge
Homework Hack 2 — Primary vs Secondary Action Priority