Skip to content

Unify UI style across the framework #37

@nbars

Description

@nbars

The framework mixes several visual vocabularies: admin, student, and scoreboard pages all look subtly different. The recent shared _navbar.html fixed the top bar, but the rest is still inconsistent.

Pain points

  • CSS stacks: Bootstrap 4 + Bootstrap-Material-Design on admin/student pages, a scoped retro-terminal stylesheet under .sb-wrap on the default scoreboard.
  • Typography: Roboto (material), Google Fonts Major Mono / IBM Plex Mono (scoreboard), and third-party vendor fonts (ace-builds, diff2html).
  • Colors: no shared tokens. global.css hardcodes #8dae25 and #17365c, the scoreboard uses its own --sb-* vars, forms use raw Bootstrap defaults.
  • Components: buttons, cards, tables, alerts, modals, and error pages render differently across admin vs. student vs. scoreboard.

Proposed direction

  1. Commit to one design (e.g. extend the retro-terminal aesthetic site-wide, or retrofit the scoreboard into a single light theme).
  2. Extract shared CSS variables for colors, spacing, radii, typography, motion.
  3. Vendor one typography pair, load it once.
  4. Drop Bootstrap-Material-Design, keep a single lean component layer.
  5. Reskin admin pages, student forms, error pages, scoreboard default view against the shared tokens.

Related: 7300ee0 unified the top navbar via _navbar.html.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions