undefinedPage Layout Devices 01

undefinedPage Layout Devices 02

undefinedPage Layout Devices 03

We use a template-based system of nested containers to create web applications.

For layouts to work across multiple devices we traditionally construct web pages using containers.

These are divided into sections and further subsections, dependent on their purpose and role. 


(Note: There are currently new technologies available to make this task easier such as CSS Grid and FlexBox. However, as these technologies are not widely supported we are not using them in this version of the templates. We are planning on using them in the next version of the templates, with fall-backs.)

The following is an explanation of these containers and how we use them:

Body
The standard HTML body element is the outermost container and fills the entire screen regardless of the size and shape of the device.
Screen
Screen Containers are children of Body and parents of Page. They always span the entire width of the screen on any device. They are stacked vertically (rows) but never side-by-side (columns).
Page
Page Containers are children of Screen Containers and parents of
Content Containers.
Content
Content Containers sit within Page Containers. Multiple Content Containers exists side by side or stacked.