AtContainer Sample Extension

This project is sample code that demonstrates how to build responsive cards and pages in Ellucian Experience using named and non-named CSS containers.

Purpose

Use this extension as a reference for responsive behavior driven by container context, not only viewport size.

Sample Components

WidthCard

src/cards/WidthCard.jsx shows how to use TSS to adjust styles based on the browser window width.

AtContainerCard

src/cards/AtContainerCard.jsx explains how to use TSS to adjust styles based on a named container's width.

AtContainer2Card

src/cards/AtContainer2Card.jsx describes an example that uses a non-named container.

Home Page

src/page/Home.jsx and src/page/router.jsx provide a simple page sample to demonstrate responsive layout patterns in Experience pages.

Run Locally

1. Install dependencies:

npm install

2. Copy environment settings:

cp sample.env .env

3. Configure .env with your Experience extension token.

4. Build and deploy a development bundle:

npm run deploy-dev

5. Start live reload development mode:

npm start

Notes

• Re-run npm run deploy-dev when you add cards/pages or change extension metadata.
• Use npm run watch-and-upload if you want continuous build/upload behavior.