SASS Button Grammar HW
Popcorn Hack 1: Add the Base Button Class
Click Run to render the button. Adding ocs__btn gives the link the shared OCS button styling with no CSS.
Challenge
Popcorn Hack 1 - Base Button Class
Popcorn Hack 2: Modifiers and Button Groups
Click Run to render the group. The check-in button gets pill and fill, and both actions are wrapped in an ocs__links container for spacing.
Challenge
Popcorn Hack 2 - Modifiers and Button Groups
Popcorn Hack 3: Status Tones and Wide Layout Bar
Click Run to render the toolbar. The container is upgraded to ocs__links--wide, the second link’s tone changes from yellow to alert-green, and the crisis button gets fill for full visual priority.
Challenge
Popcorn Hack 3 - Status Tones and Wide Layout Bar
Homework Hack 1: Adaptive Resource Toolbar
Click Run to render the toolbar. The inline-styled badges are replaced with OCS status actions that match each category’s urgency, all wrapped in ocs__links.
Challenge
Homework Hack 1 - Adaptive Resource Toolbar
Homework Hack 2: Primary vs. Secondary Action Priority
Click Run to render the action row. Visual hierarchy now comes from OCS modifiers: fill for the primary action, outline for the secondary action, and an alert-red outline for the alert action.
Challenge
Homework Hack 2 - Action Priority
How It Works
OCS button grammar works like a procedure with parameters, which connects to AP CSP AAP-3.A: ocs__btn is the reusable base, and modifiers like fill, outline, pill, accent, and the alert-* tones change its appearance without any new CSS. Choosing <button> for on-page actions and <a> for navigation keeps the HTML semantic, and ocs__links handles spacing for the whole group. Picking the tone and fill based on urgency is selection: the more urgent the action, the stronger its visual weight.