Page

Within the framework, a page wrapper element can be set to either responsive fixed dimensions (default) or fluid dimensions.

Responsive fixed

The responsive fixed setting causes each page to have a set width for each defined screen size. All users experience a consistent layout eg a 60em width on an average screen size, or a 90em width on a wide screen size.

Example

<div class="o-page js-page">

Fluid

The fluid setting allows the page and its contents to fill the available screen area. It's percentage based and is ideal when running an application such as e-AQA inside the framework.

Example

<div class="o-fullwidth js-page">