Stage 1c is a direct refinement of Stage 1b with the same
functionality — color wells, alpha sliders, stroke weight, breathing,
spinning, and hue cycling — but using a Bootstrap accordion inside the
Character card to reduce initial panel height.
What Changed from Stage 1b
-
Accordion replaces flat sections in the Character card —
The Fill Color, Stroke / Border, and Placement Display sections are now
collapsible accordion panels. Symbol, Font, and Size remain always visible
since they are the most frequently changed properties.
-
Fill Color starts open — The most commonly used
section is expanded on load so it behaves exactly like 1b for the most
common workflow.
-
Stroke and Placement start collapsed — These are
secondary customizations. They slide open on demand without any
scrolling.
-
Multiple sections can be open at once — There is no
mutual-exclusion lock; you can expand all three simultaneously if you want
to compare Fill and Stroke side by side.
-
Animations card is now visible without scrolling —
The shorter Character card means the Animations card is in view on most
screens by the time the page loads.
Under the Hood
No sketch logic changed from Stage 1b. The accordion is pure Bootstrap 5
HTML — the data-bs-toggle="collapse" and
data-bs-target attributes on each header button drive the
open/close animation. All DOM IDs are identical to 1b so the companion
sketch (swCharacter1cSketch.js) is nearly unchanged.
Design Trade-offs
-
Pro — Less scrolling; Animations card is visible sooner;
panel feels less overwhelming on first glance.
-
Pro — Accordion headers act as clear section labels,
reinforcing what each group of controls does.
-
Con — An extra click is required to reach a collapsed
section; this may be surprising for users who expect everything to be
immediately accessible.
-
Stage 1b vs Stage 1c — Use 1b when
you want all controls on one uninterrupted scroll; use 1c when the panel
height is a concern or you want to teach progressive disclosure.