SASS Button Grammar: Homework Notebook

Lesson: OCS SASS Button Grammar (My Good Brain) Contents: Popcorn Hacks 1-3 and Homework Hacks 1-2, all using only semantic tags (<button>, <a>) plus OCS classes, with no inline styles.

Popcorn Hack #1: Add the Base Button Class

Added ocs__btn to the empty class="" so the link gets OCS button styling.

Mental Health Resource Directory

Mental Health Resource Directory

Popcorn Hack #2: Modifiers & Button Groups

  1. Added pill and fill to the “Complete Daily Check-In” button (it keeps accent).
  2. Replaced the plain <div> with <div class="ocs__links"> so both actions are grouped.
Save Draft Journal

Popcorn Hack #3: Status Tones & Wide Layout Bar

  1. Changed the status tone from alert-yellow to alert-green on “Complete Check-In”
  2. Upgraded the container from ocs__links to ocs__links--wide.
  3. Added fill to the Crisis Support button for full visual priority.
Get Crisis Support

Homework Hack #1: Adaptive Resource Toolbar

All three actions are wrapped in ocs__links, every inline style and hex/color word is gone, and each category uses the class set for its urgency:

  • Urgent Support: ocs__btn alert-red fill pill
  • Self-Care: ocs__btn alert-green fill pill
  • Community: ocs__btn accent outline pill
Urgent Support Self-Care Community
Urgent Support Self-Care Community

Homework Hack #2: Primary vs. Secondary Action Priority

Wrapped everything in ocs__links, removed all inline styles (including the outer <div>’s background/padding), and built a visual hierarchy:

  • Primary (“Log Mood Entry”): ocs__btn accent fill, the solid, highest-priority action.
  • Secondary (“View Weekly Trends”): ocs__btn outline, medium priority.
  • Alert (“Crisis Hotline”): ocs__btn alert-red outline, red so it stands out as urgent support without competing with the primary action.
View Weekly Trends Crisis Hotline