@flowlane

Description

The '@flowlane' layout query is used to define a set height that an ad can 'flow' it's width against. Essentially, a flowlane provides a reference point to lock the position/layout of an ad's elements against in a manner that remain's relative/proportionate to the height of the flowlane.

Flowlane Scaling

Using '@flowlane' as opposed to a '@layout' gives you the ability to accommodate for a larger range of sizes and aspect ratio because a flowlane will scale it's content to match the current size of the ad.

For example: If you had a flowlane at 50px tall, and you were looking at the ad at a size of 300x50 and then decided to look at the ad at 600x100, what you would see the design of the 300x50 render at 2x it's size so to accommodate the new size. Without a flowlane, instead you'd see all elements likely "spread apart" due to the larger size because they are not being scaled and sized by the flowlane.

The ad will automatically choose the closest flowlane to the current height and apply the appropriate scaling.

Example Usage

Using a flowlane is easy, just wrap the CSS that applied for that flowlane within the '@flowlane' rule along with the height defined for that flowlane:

CSS

.element {
	background-color: red; 
}

@flowlane 90 {
  .element {
    background-color: blue;
  }
}

Flowlanes can also be nested within other selectors:

CSS

.element {
  background-color: red;
  
  @flowlane 90 {
    background-color: white;
  }
  
  @flowlane 250 {
    background-color: blue;
  }
}