Skip to content

Adopt PBWoW-style hybrid CSS architecture for consistency #5

@avandenberghe

Description

@avandenberghe

Goal

Refactor pbtech's CSS organization to match the hybrid approach used by PBWoW3, so all my phpBB styles share one architecture and are easier to maintain in lockstep.

Current setup

pbtech ships per-prosilver-mirror CSS files (common.css, colours.css, content.css, buttons.css, forms.css, links.css, extensions.css, responsive.css, bidi.css, cp.css, imageset.css, print.css, polls.css, tweaks.css, fontawesome.css). phpBB loads each via the standard prosilver CSS pipeline; pbtech's deltas win by source order.

Target setup (PBWoW-style hybrid)

  • Single theme/stylesheet.css entry point with @import directives:
    @import url("base.css");
    @import url("common.css");
    @import url("links.css");
    @import url("content.css");
    @import url("buttons.css");
    @import url("cp.css");
    @import url("forms.css");
    @import url("colours.css");
    @import url("imageset.css");
    @import url("custom.css");      /* non-mirrored bucket */
    @import url("responsive.css");
    @import url("extensions.css");
  • Keep per-file mirrors of prosilver counterparts (so deltas remain easy to diff against upstream prosilver during phpBB upgrades).
  • Add a custom.css bucket for rules that don't belong to any specific prosilver file (currently scattered across extensions.css / colours.css).
  • Add a base.css for foundational pbtech overrides (typography, body wrapper, etc.).
  • Optionally add cache-busting ?hash=... query strings per import (PBWoW pattern).

Why

Collapsing everything into one file is also valid, but the hybrid approach:

  • Matches what PBWoW3 already does, so cross-style maintenance stays uniform.
  • Keeps file-by-file diff against prosilver feasible during phpBB minor-version upgrades (e.g. when comparing pbtech/colours.css to prosilver/colours.css to spot drift).
  • Allows future child styles (pbtech variants) to selectively re-import just the files they override, the same way PBWoW3_Diablo etc. do.

Acceptance criteria

  • theme/stylesheet.css becomes the single CSS entry point with explicit @import order.
  • custom.css and base.css exist as non-mirrored buckets.
  • No duplicate selectors across pbtech CSS files (run a lint pass).
  • No visual regressions vs current 3.0.20 (manual sweep: index, viewforum, viewtopic, posting, UCP, ACP, search results, responsive @ 700/500/430px).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions