px-viewport-design

The Predix UI Viewport module provides default viewport parameters for Predix UI components.

Upstream dependencies

The px-viewport-design module is an upstream dependency in this meta kit:

• px-starter-kit-design

Installation

Install this module and its dependencies using bower:

bower install --save px-viewport-design

Once installed, @import into your project's Sass file in its Base layer:

@import "px-viewport-design/_base.viewport.scss";

Usage

.viewport is the primary class applied to div containing app nav and content (body > div.viewport)

The following variables are available for use in the module:

$desk-wide-width
$desk-wide-max-width
$viewport-margin

$desk-wide-width

Type: Set value in rems, percentage, 'auto', 'initial', or 'inherit'
Default: 100%
Description: Set this to the desired width of the "page" element, div.viewport. Will be inserted as the widest breakpoint for the responsive mixin. This variable is overridden in px-theme.

$desk-wide-max-width

Type: Set value in rems, percentage, 'auto', 'initial', or 'inherit'
Default: 80rem
Description: Set this to the desired value of widest possible viewport width. Will be inserted as the widest breakpoint for the responsive mixin. This variable is overridden in px-theme.

$viewport-margin

Type: Set value in rems, percentage, 'auto', 'inherit'
Default: auto
Description: Set this to the desired value of margin-left and margin-right for viewport. This variable is overridden in px-theme.

View the full API here.