SASS Button Grammar HW
SASS Buttons Grammar
Source lesson: sass/buttons-grammar1
The rule: use a semantic tag (<button> for an action on this page, <a href> for going somewhere else) plus OCS classes. No <style> blocks, no inline style, no hex colors.
Popcorn Hack #1: Add the Base Button Class
The empty class="" becomes ocs__btn. It stays an <a> because it navigates to another site.
Mental Health Resource Directory
Popcorn Hack #2: Modifiers & Button Groups
Added pill and fill to “Complete Daily Check-In” (it already had accent) and swapped the plain <div> for an ocs__links container.
Popcorn Hack #3: Status Tones & Wide Layout Bar
alert-yellow → alert-green on the check-in action, ocs__links → ocs__links--wide, and fill added to Crisis Support so the most urgent action has the most visual weight.
Homework Hack #1: Adaptive Resource Toolbar
The three badges had hard-coded red, teal and purple inline styles. Each one now gets the tone that matches its urgency, all as pills, inside one ocs__links container. I also fixed the starter’s hrefs: they had Markdown link syntax ([url](url)) pasted inside the attribute, which isn’t a valid URL.
| Category | Old inline style | OCS classes | Why |
|---|---|---|---|
| Urgent Support | background: red |
ocs__btn alert-red fill pill |
red tone + fill = highest urgency |
| Self-Care | background: teal |
ocs__btn alert-green fill pill |
green = positive, supportive |
| Community | border: 1px solid purple |
ocs__btn accent outline pill |
outline = lighter weight, theme accent |
Homework Hack #2: Primary vs. Secondary Action Priority
Hierarchy goes fill → outline → alert outline. “Log Mood Entry” stays a <button> because it’s an action on this page. The other two are links that go somewhere else. The requirement names the third action “Crisis Hotline” (the starter text said “Mental Health Blog”), so I used the requirement’s label to match its alert-red tone.
| Priority | Action | Classes |
|---|---|---|
| Primary | Log Mood Entry | ocs__btn accent fill (solid, draws the eye first) |
| Secondary | View Weekly Trends | ocs__btn outline (visible but quieter) |
| Alert | Crisis Hotline | ocs__btn alert-red outline (red so it’s always findable, outline so it doesn’t compete with the main task) |
The white background box, #0d9488 teal and red inline styles are all gone. The colors now come from the site theme, so they follow each user’s color settings.