SASS Button Grammar HW — My Good Brain

Lesson: https://pages.opencodingsociety.com/sass/buttons

Rule: semantic tags (<button> = action, <a> = navigation) + OCS classes only (ocs__btn, pill, fill, outline, accent, alert-green/yellow/red, small). Groups in ocs__links / ocs__links--wide. No <style>, no inline styles, no hex colors.

Popcorn Hack 1 — base button class

Resource Directory

Challenge

Buttons Popcorn 1 — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0

UI Output

Popcorn Hack 2 — modifiers + group container

Added pill + fill to the check-in button; wrapped both in ocs__links.

Challenge

Buttons Popcorn 2 — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0

UI Output

Popcorn Hack 3 — tones + wide bar

Second link alert-yellow → alert-green; container ocs__links → ocs__links--wide; Crisis button gains fill.

Request Break Get Crisis Support

Challenge

Buttons Popcorn 3 — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0

UI Output

Homework Hack 1 — Adaptive Resource Toolbar

Urgent = alert-red fill pill, Self-Care = alert-green fill pill, Community = accent outline pill, all in ocs__links. Inline styles + hex colors removed.

Urgent Support Self-Care Community

Challenge

Buttons Homework 1 — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0

UI Output

Homework Hack 2 — Primary vs Secondary hierarchy

Primary accent fill > secondary outline > alert alert-red outline, all in ocs__links.

View Weekly Trends Crisis Hotline

Challenge

Buttons Homework 2 — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0

UI Output