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 vclLayoutWidth 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

• vclViewport: In HTML the body tag.
• vclViewportBg: Utility to apply the background color of the viewport.
• vclApp: Main application area.
• vclLayoutWidth: 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.