Simple Layout

Prysm introduces a special display mode named simple. The goal of the display: simple mode is to improve the performance when there is no demand for a complex layout algorithm.

When to use it

You can use the simple layout when the positions of the elements are defined and don’t rely on automatic positioning or special sizing by the layout algorithm. The simple layout requires top and left to be set. The width and height of the elements can be set explicitly or they will be calculated as the sum of the sizes of all static or relatively positioned children in the DOM.

If the page has mostly absolutely positioned elements and additional performance is needed, it’s a good idea to think about using simple layout. You can still have sub-trees in the DOM that use the standard layout modes. Those subtrees have to start with an element that has display: flex.

Simple layout enabling

To enable the simple layout, you have to use the display: simple CSS style on the BODY element.

Example:

<body style="display: simple;">
    <!-- PAGE -->
</body>

This is the only way to get the simple layout to work. In all other cases when the BODY has standard display values (static, block, flex), Prysm will use the standard algorithms as per the CSS standard.

The user has to specifically opt-in for the simple layout. This avoids accidentally using the simple layout and getting inconsistent results compared to the standard.

Mixing simple layout with flex

You can switch from simple to flex, but you cannot switch from flex to simple. Simple layout can be switched to flex layout by specifying display: flex; on any child. The whole sub-tree, the element with display mode flex and its descendants, will use the flex layout. If you set display: simple; to any child in the flex sub-tree, it will be ignored.

Example:

<body style="display: simple;">
<div>
    This is simple laid out
</div>
<div style="display: flex;">
    This and all descendants will be laid as flex
    <div style="display: simple;">
        This is still laid as flex
    </div>
</div>
</body>

Specific simple layout behavior

  • Static-positioned elements are not offset by sibling elements, they are always laid at the content position of the parent. auto means 0
  • Relatively positioned elements always have an offset of left and top from the content position of the parent and are not affected by siblings.
  • Margins are not used since there isn’t automatic positioning in order to be respected.
  • right and bottom values are not supported.
  • min-width, max-width, min-height and max-height are not supported.
  • Flex-related properties have no effect: flex-*, align-self, align-items, align-content and justify-content.
← Scalable UI
Simple Opacity →