SASS: Buttons HW
SASS Buttons
This notebook covers 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
The base ocs__btn class applies the shared OCS button styling without custom CSS.
Popcorn Hack 2: Modifiers and Button Groups
The first action uses pill and fill, and both actions are grouped inside an ocs__links container.
Popcorn Hack 3: Status Tones and Wide Layout Bar
The second action uses alert-green, the container is upgraded to ocs__links--wide, and the crisis action uses fill for maximum priority.
Homework Hack 1: Adaptive Resource Toolbar
The three resource categories are converted from inline styling to the exact OCS utility classes required by the lesson.
Homework Hack 2: Primary vs. Secondary Action Priority
The action row uses fill, outline, and alert modifiers to create a clear visual hierarchy without any custom CSS.