Lab 7 — Style the plan page

Purpose: Create the clientlib chain for the PHI site, style the plan-card, and prove dependency/embed behaviour.

Audience	Why it matters to you
Frontend engineers	Pairs with Session 7
Backend engineers	Worth doing once to understand delivery of assets

Goal

Styled plan page with a proper clientlib structure and a verified include chain.

In ui.frontend, add styles for the plan-card (.plan-card, covered/not-covered benefit states,

a "featured" modifier class for the Style System).

(check ui.apps target or CRXDE after deploy).

Ensure your page component includes phi.site (see the page component's customheaderlibs.html /

customfooterlibs.html includes).

Deploy and verify: view page source — CSS should come from /etc.clientlibs/... (allowProxy at work), not /apps/....
Inspect the merged bundle at /etc.clientlibs/phi-academy/clientlibs/clientlib-site.css — find your component

CSS embedded in it.

Use the ClientLibs debug tool: append ?debugClientLibs=true to the page URL — bundles now load as individual

files with their source paths visible.

Rebuild dependency intuition: temporarily remove dependencies=[phi.base] from clientlib-site, redeploy, and

observe what breaks and in what order CSS loads. Restore it.

Verify	Expectation
Include path	/etc.clientlibs, not /apps (publish tier cannot read /apps)
debugClientLibs	Shows constituent files and load order
Style System	"Featured" style selectable on plan-card via template policy, adds your modifier class
Cache headers	Clientlib responses carry long-cache headers when versioned clientlibs are on