SASS Buttons Grammar

1. Quick Reference Table

Use this reference table to choose the correct semantic tag and OCS SASS utility class for each action type on the My Good Brain mental health platform:

UI Role	Semantic Tag	OCS SASS Utility Classes	Purpose / Example
Primary Action	`<button>`	`ocs__btn fill`	Main action on a page (e.g., “Submit Daily Reflection”)
Secondary Action	`<button>`	`ocs__btn outline`	Alternative option (e.g., “Save Draft Journal”)
Page Link	`<a href="...">`	`ocs__btn outline`	Navigating to another resource page (e.g., “Explore Mindfulness Directory ↗”)
Success / Green	`<button>` / `<a>`	`ocs__btn alert-green fill`	Affirmative or completed health actions (e.g., “Complete Daily Check-In”)
Caution / Yellow	`<button>` / `<a>`	`ocs__btn alert-yellow outline`	Pending or supportive status states (e.g., “Request Wellness Break”)
Danger / Red	`<button>` / `<a>`	`ocs__btn alert-red fill`	Immediate support or high-priority actions (e.g., “Get Crisis Support”)
Small Variant	`<button>` / `<a>`	`ocs__btn small`	Compact buttons inside wellness card headers or tables

2. LxD Cycle Process

2.1 Empathize

Unorganized raw CSS creates redundant code and inconsistent styles (Coyne & Nielsen, 2019). On My Good Brain, standardized OCS button grammar ensures mental health tools remain clear, intuitive, and accessible.

2.2 Define

POV Statement: CSP students need a standardized class-based utility system to eliminate raw CSS, maintain theme consistency, and simplify navigation across mental health tools.
Learning Goals:
1. Replace custom <style> blocks with OCS SASS utility classes (ocs__btn, fill, outline, accent).
2. Pair semantic HTML (<a> vs. <button>) with OCS button modifiers.
3. Organize action toolbars using containers (ocs__links) and semantic tones (alert-green, alert-yellow, alert-red).

2.3 Ideate

How Might We use OCS SASS button grammar to build clean, accessible UI actions for mental health resources?

2.4 Prototype & Test

Prototype

Build step-by-step:

Basic Action: Standard button/link (ocs__btn).
Styled Variant: Modifiers added (pill accent fill).
Action Toolbar: Grouped links inside ocs__links.
CS Alignment: Interactive state logic mapped in pseudocode.

Test

Click Run, test links, swap utility classes (alert-*, outline, small), and verify all UI elements render correctly together.

3. College Board Requirements

3.1 AP CSP Alignment & Pseudocode

Connects to AP CSP Big Idea 3 (Algorithms & Programming) (College Board, 2024):

AAP-2.A.1 & AAP-3.A.1: Procedures create reusable, maintainable code. OCS SASS utility classes act like procedures, applying reusable styles via parameters (fill, accent, alert-green) without redundant CSS.
AAP-2.C.1: Selection uses conditionals to execute specific algorithm branches.

Below is the AP CSP pseudocode mapping how My Good Brain dynamically assigns OCS button grammar based on urgency and action type:

PROCEDURE renderMentalHealthAction(actionType, isUrgent)
{
    IF (isUrgent)
    {
        RETURN "<a href='/crisis' class='ocs__btn alert-red fill'>Get Crisis Support</a>"
    }
    ELSE
    {
        IF (actionType = "SUBMIT")
        {
            RETURN "<button class='ocs__btn accent fill'>Submit Daily Reflection</button>"
        }
        ELSE
        {
            RETURN "<a href='/journal' class='ocs__btn outline'>Save Draft Journal</a>"
        }
    }
}

4. Lesson Plan & Tech Talk

4.1 Overview

Tech Talk: OCS SASS utility classes vs. raw CSS.
Code Practice: Interactive HTML/SASS code runners.
Hacks & Wrap-Up: In-class Popcorn Hacks and My Good Brain homework setup.

4.2 Learning Levels

Level A (Base): Apply ocs__btn to semantic tags (<button>, <a>) without writing CSS.
Level B (Modifiers): Combine modifier classes (pill, accent, fill, small) for custom sizing and styles.
Level C (Tones & Layouts): Build action bars using status tones (alert-*) inside ocs__links containers.

5. Code Examples & Content

5.1 OCS Button Grammar: Base & Utility Modifiers

Instead of writing custom CSS rules or declaring raw style tags, OCS provides pre-built utility classes in SASS. You simply combine these semantic classes on standard HTML elements (<a> for links, <button> for actions).

Why Use OCS Button Grammar?

No CSS Use: Never write <style> blocks or hardcode hex colors—all styles live centrally in _sass.
Semantic & Flexible: Mix base classes (ocs__btn) with shape (pill), state (fill, outline), and theme (accent) modifiers.

Example: OCS SASS Classes in Action

Here is how we build standardized action elements for My Good Brain using pure class grammar:

<!-- Base OCS button for simple actions -->
<a class="ocs__btn" href="/resources">Resource Directory</a>

<!-- Filled accent button with rounded pill shape -->
<button class="ocs__btn pill accent fill">Log Daily Mood</button>

Popcorn Hack #1: Add the Base Button Class

Challenge

Task: Change the class to 'ocs__btn' below to apply OCS button styling!

Lines: 1 Characters: 0

UI Output

5.2 Modifiers, States & Group Containers

In OCS SASS, button states (:hover, :active) and modifiers (pill, fill, outline, alert-*) are pre-nested using parent selectors (&). You combine these utility classes directly in HTML or group them inside layout containers (ocs__links).

Semantic Modifiers: fill (solid background), outline (bordered), pill (rounded corners).
Action Containers: Wrap multiple buttons in ocs__links or ocs__links--wide for clean spacing and layout without extra CSS.

<!-- Grouped action bar for My Good Brain -->
<div class="ocs__links">
  <button class="ocs__btn pill accent fill">Complete Daily Check-In</button>
  <button class="ocs__btn outline">Save Draft Journal</button>
  <a class="ocs__btn alert-red fill" href="">Get Crisis Support</a>
</div>

Popcorn Hack #2: Modifiers & Button Groups

Challenge

Task: 1. Add the modifier classes `pill` and `fill` to the "Complete Daily Check-In" button. 2. Wrap both elements inside an `ocs__links` container (`

...

`) to group them!

Lines: 1 Characters: 0

UI Output

5.3 Semantic Tones & Layout Containers

In OCS SASS, color semantics reflect intent and severity, while specialized layout containers organize actions into cohesive toolbars.

Status Tones: Use alert-green (positive/success), alert-yellow (warning/caution), or alert-red (urgent/crisis) to convey action hierarchy immediately.
Layout Containers: Use ocs__links or ocs__links--wide to group multiple interactive elements with proper responsive grid spacing and alignment.

<!-- Full action toolbar using status tones and layout container -->
<div class="ocs__links--wide">
  <button class="ocs__btn alert-green fill">Complete A Mental Health Check-In Form</button>
  <a class="ocs__btn alert-yellow outline" href="">Request Break</a>
  <a class="ocs__btn alert-red fill" href="">Get Crisis Support</a>
</div>

Popcorn Hack #3: Status Tones & Wide Layout Bar

Challenge

Task: 1. Change the second link's status tone class from `alert-yellow` to `alert-green`. 2. Upgrade the container class from `ocs__links` to `ocs__links--wide`. 3. Add the `fill` modifier to the Crisis Support button to give it full visual priority!

Lines: 1 Characters: 0

UI Output

6. Hacks & Practice Tasks

Prepare Your Submission IPYNB

To complete and submit your work for this lesson, create a dedicated Jupyter Notebook (.ipynb) in your portfolio repository following these steps:

Create a notebook in your portfolio homework area: _notebooks/homework.
Add a markdown cell at the top with the required frontmatter.
Add code cells for all three Popcorn Hacks and the Homework Hack.
Keep %%html and the  comment in each code cell.
Run each cell and verify the rendered result before submitting.

---
layout: post
title: SASS Button Grammar HW
categories: [SASS]
lesson_language: SASS
lesson_topic: Buttons HW
lesson_part: interactive
lesson_type: lesson
permalink: /sass/buttons-hw/
author: githubID
---

Submission Safety Rules (Read First)

[!IMPORTANT]

Keep %%html and the  comment line intact at the top of your notebook cell.

Remove all inline style="..." attributes and custom non-OCS classes.

Use only semantic tags (<button>, <a>) paired with OCS SASS classes (ocs__btn, pill, fill, outline, accent, alert-green, alert-yellow, alert-red).

Structure action groups inside layout containers (ocs__links, ocs__links--wide).

Add code cells for all 3 Popcorn Hacks and the Homework Hack. Make sure every cell runs with visible UI output.
Submit the link to your published page at the bottom of this page.

Homework Hacks

Goal: Change the unorganized, limited resource badges below into standardized OCS SASS status actions for My Good Brain resource categories (Urgent Support, Self-Care, Community).

Requirements:

Wrap all three actions in an ocs__links layout container.
Remove all inline style="..." attributes and hardcoded hex colors.
Apply semantic OCS classes to match each category’s urgency:
- Urgent Support: Use ocs__btn alert-red fill pill
- Self-Care: Use ocs__btn alert-green fill pill
- Community: Use ocs__btn accent outline pill

Starter Code (Copy to Notebook):

<div style="padding: 12px; display: flex; gap: 8px;">
  <!-- TODO: Refactor into OCS SASS utility classes -->
  <a href="[https://www.mygoodbrain.org/resources](https://www.mygoodbrain.org/resources)" style="background: red; color: white; padding: 6px 12px; border-radius: 20px; font-weight: bold;">Urgent Support</a>
  <a href="[https://www.mygoodbrain.org/resources](https://www.mygoodbrain.org/resources)" style="background: teal; color: white; padding: 6px 12px; border-radius: 20px;">Self-Care</a>
  <a href="[https://www.mygoodbrain.org/resources](https://www.mygoodbrain.org/resources)" style="border: 1px solid purple; color: purple; padding: 6px 12px; border-radius: 20px;">Community</a>
</div>

Homework Hack #2: Primary vs. Secondary Action Priority (OCS Modifiers & Hierarchy)

Goal: Change an unorganized mental health check-in panel into a structured action row that uses visual hierarchy (fill vs. outline vs. subtle) so students can immediately distinguish the main action from support options.

Requirements:

Wrap all three actions in an ocs__links layout container.
Remove all inline style="..." attributes and custom CSS classes.
Apply standard OCS SASS classes to create a clear visual hierarchy:
- Primary Action (“Log Mood Entry”): High priority — use ocs__btn accent fill
- Secondary Action (“View Weekly Trends”): Medium priority — use ocs__btn outline
- Subtle Action (“Crisis Hotline”): Alert priority — use ocs__btn alert-red outline

Starter Code (Copy to Notebook):

<div style="background: #ffffff; padding: 16px; border-radius: 8px;">
  <!-- TODO: Refactor using ocs__links container and OCS hierarchy classes -->
  <button style="background: #0d9488; color: white; padding: 10px 16px; font-weight: bold; border: none;">Log Mood Entry</button>
  <a href="[https://www.mygoodbrain.org/resources](https://www.mygoodbrain.org/resources)" style="border: 1px solid #0d9488; color: #0d9488; padding: 10px 16px; text-decoration: none;">View Weekly Trends</a>
  <a href="[https://www.mygoodbrain.org/resources](https://www.mygoodbrain.org/resources)" style="color: red; border: 1px solid red; padding: 10px 16px; text-decoration: none;">Mental Health Blog</a>
</div>

Grading Plan (1 Point Total)

Part	Points	What earns the points
Popcorn Hacks (1–3)	0.30	Completes all 3 interactive Popcorn Hacks (Base Classes, Modifiers, and Layout Containers) in code runners with active cell executions (0.10 pts each).
Homework Hack 1: Adaptive Resource Badges	0.35	Correctly changes raw styles into OCS utility classes (`ocs__btn`, `pill`, `fill`, `alert-red`, `alert-green`, `accent`) wrapped in `ocs__links`.
Homework Hack 2: Visual Action Hierarchy	0.35	Establishes clear visual priority using primary (`fill`), secondary (`outline`), and alert tones on actions wrapped in `ocs__links`.
Total	1.00

7. Lesson Revisions

What we changed based on feedback

Made homework more easier to understand by providing copy-paste SASS templates focused on My Good Brain components. Also added interactive code runners so students get instant feedback when changing variables and hover rules in the popcorn hacks. We also received feedback from our teacher that our SASS lesson concepts weren’t aligned with the accurate SASS grammar button content, so we improved that.

8. Feedback Evidence

Our peers mentioned that our lesson wasn’t as interactive as before, so we implemented more popcorn hacks and code runners. We also included more examples as they mentioned it was a bit hard to understand at first.

9. References

College Board. (2024). AP Computer Science Principles course and exam description. AP Central. https://apcentral.collegeboard.org/media/pdf/ap-computer-science-principles-course-and-exam-description.pdf

My Good Brain. (n.d.). Mental health resources & tools for youth. https://www.mygoodbrain.org/resources

Nielsen Norman Group. (2019). Web usability and component design patterns. https://www.nngroup.com/

Sass Documentation. (n.d.). Sass basics: Utility classes and parent selectors. Sass. https://sass-lang.com/guide

Need to update a submission later? Open the submissions dashboard.

Create Microblog Post

Reply to Post

1. Quick Reference Table

2. LxD Cycle Process

2.1 Empathize

2.2 Define

2.3 Ideate

2.4 Prototype & Test

Prototype

Test

3. College Board Requirements

3.1 AP CSP Alignment & Pseudocode

4. Lesson Plan & Tech Talk

4.1 Overview

4.2 Learning Levels

5. Code Examples & Content

5.1 OCS Button Grammar: Base & Utility Modifiers

Why Use OCS Button Grammar?

Example: OCS SASS Classes in Action

Popcorn Hack #1: Add the Base Button Class

Challenge

5.2 Modifiers, States & Group Containers

Popcorn Hack #2: Modifiers & Button Groups

Challenge

5.3 Semantic Tones & Layout Containers

Popcorn Hack #3: Status Tones & Wide Layout Bar

Challenge

6. Hacks & Practice Tasks

Prepare Your Submission IPYNB

Submission Safety Rules (Read First)

Homework Hacks

Homework Hack #1: Adaptive Resource Toolbar (OCS SASS Modifiers & Tones)

Requirements:

Starter Code (Copy to Notebook):

Homework Hack #2: Primary vs. Secondary Action Priority (OCS Modifiers & Hierarchy)

Requirements:

Starter Code (Copy to Notebook):

Grading Plan (1 Point Total)

7. Lesson Revisions

What we changed based on feedback

8. Feedback Evidence

9. References

Submit Assignment

Self-Assessment