SASS Inputs Homework

Refactor the PVO forms: remove all inline styles and made-up classes, use ocs__input with the allowed modifiers (small, medium, large, gradient), and keep %%html and the UI_RUNNER comment.

Popcorn Hack (in-class)

Replace the inline styling and made-up class with the OCS grammar: one large, gradient input and one compact plain input, both using ocs__input.

Homework Hack

Refactor the signup form:

  • Assistance Category: ocs__input with a size modifier plus gradient
  • Volunteer First Name: ocs__input with a size modifier
  • Volunteer Email: ocs__input with a size modifier (keep type="email")
  • Every input needs a clear purpose (label, placeholder, or accessible name)

Grading (1 point)

  • 0.2 Popcorn completion
  • 0.4 input grammar (every input uses ocs__input with a size modifier)
  • 0.3 style modifier (gradient instead of inline background)
  • 0.1 accessibility