@vcl/app-area

VCL app-area

The background and layout of the app's viewport and app area.

Features

Sets @viewport { width: device-width; }.

Introduces the following concept:

• The app viewport which is the highest level content container (in HTML this should be the body tag) and defines its background color.

• The app area which holds high level areas like header, content, footer, sidebar etc. Layout-wise it defines the boundary for these elements relative to the viewport.

The layout-width utility class can be used to give containers the width of the app area. This is useful if containers with a 100% spanning background are needed and the actual content should be limited to the width of the layout.

Usage

Viewport with centered app area which contains the main content area:

basic example

Classes

• viewport: In HTML the body tag.
• viewport-bg: Utility to apply the background color of the viewport.
• app: Main application area.
• layout-width: Utility to apply the width of the app area.

Modifiers

Variables

• --app-viewport-bg-color
• --app-area-bg-color
• --app-area-max-width
• --app-area-min-width

Demo

example.html on GH-pages.