Audit: Container Variables Refactor

What changed and why

The container system has been refactored to improve clarity, flexibility, and consistency. The main goals are:

1. Clearer naming — container variables now use the f- (foundation) prefix instead of g- (global).
2. Better fluid/contained behavior — containers can now transition from fluid to contained at a specific breakpoint, instead of being one or the other.
3. Simpler architecture — container-fluid is no longer a modifier that overrides all container values.

---

Rename: g-container → f-container

All container variables must be renamed from the g-container-* prefix to f-container-*:

// Before
$g-container-max-width: 1440px;
$g-container-padding: 20px;

// After
$f-container-max-width: 1440px;
$f-container-padding: 20px;

Run a global search-and-replace across the project:

• g-container- → f-container-

This applies to all foundation files, component vars, and any module that references container variables directly.

---

Container-fluid is no longer a modifier

Previously, container-fluid was implemented as a modifier of container and overrode all its values. This created coupling and made it harder to reason about container behavior.

Now, container-fluid and container are treated as separate, independent concepts:

• container — has a max-width and is centered.
• container-fluid — spans the full viewport width with no max-width constraint.

This separation makes the system more predictable and easier to maintain.

---

New variable: f-container-contained-breakpoints

The key addition in this refactor is the f-container-contained-breakpoints variable. It allows a container to behave as fluid on smaller breakpoints and switch to contained on larger breakpoints.

How it works

When f-container-contained-breakpoints is defined, the container class checks it to determine at which breakpoint the max-width should kick in:

$f-container-contained-breakpoints: (
   tablets: $tablets,
);

With this configuration:

• Below the tablets breakpoint → the container behaves as fluid (full width, no max-width).
• At and above the tablets breakpoint → the container becomes contained (max-width is applied and content is centered).

Why this matters

Many layouts need to be edge-to-edge on mobile and tablet but constrained on large screens. Previously, this required custom overrides or switching between container and container-fluid classes. Now it is handled automatically through a single variable.

---

Default behavior

After the refactor, the defaults are:

• A fluid container becomes contained starting at the wide breakpoint by default.
• Full-width marquees and edge-to-edge sections are not wrapped inside a container — they should remain outside the container to span the full viewport.

---

Implementation checklist

In the task card, copy each item independently so you or the person responsible can mark them off one by one. This way we make sure nothing gets lost.

• All g-container-* variables renamed to f-container-*
• container-fluid decoupled from container (no longer a modifier)
• f-container-contained-breakpoints variable defined where needed
• container class updated to respect f-container-contained-breakpoints
• Full-width marquees confirmed to remain outside containers
• Layout tested across all breakpoints to verify fluid → contained transition