Waterfall System

Core Concept

Block attributes initially adopt desktop values as their default. These values are inherited by smaller viewports unless overridden by specific settings for those smaller sizes. In essence, values flow from larger to smaller viewports in a cascading manner. However, the cascade is always down; values do not flow upward.

1. Green means that the value is inherited from a larger viewport.
2. Blue means that the value is overridden for the current viewport.

Examples

Below we have a table with a examples of how values cascade when set in various viewports.

Desktop Mode Only

Viewport	Value
Desktop	max-height: 100px;
Tablet	max-height: 100px;
Mobile	max-height: 100px;

Tablet Mode

Viewport	Value
Desktop	max-height: 100px;
Tablet	max-height: 25px;
Mobile	max-height: 25px;

Mobile Mode

Viewport	Value
Desktop	max-height: 100px;
Tablet	max-height: 100px;
Mobile	max-height: 10px;

Multiple modes

Viewport	Value
Desktop	max-height: 100px;
Tablet	max-height: 25px;
Mobile	max-height: 10px;