Layout algorithm

The HTML5 theme uses a two-phase JavaScript™ algorithm to apply the layout.

The layout algorithm is a two-phase process.

In the first phase (the measure phase), the elements take their desired size. In other words, the elements take the size needed render the element.
In the second phase (the size and position phase), the layout algorithm positions and sizes the elements within the container. For example, if the element is stretchable, the layouting will make the element grow to fill the size of the container. The size is changed using JavaScript.

These two phases can occasionally contradict. Taking the desired sizes means having the container items wrap as close as possible their content, which is especially tricky with complex content like fieldset elements, whereas sizing the elements in the order that they fill their whole available space requires an absolute positioning.

Note: A fieldset element is a reference to the HTML tag which groups sets of related fields together, such as those placed in a GROUP container.

The measure phase

During the measure phase, CSS rules are used to position the elements. These rules are statically declared in a stylesheet.

/* use the box-model */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;r>
}

html, body {
   overflow: hidden;
   position: absolute;
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
}

/* the root layout container */
#gGridLayoutRoot {
   height: 100%;
}


/* Genero containers */
.gForm, .gGroup {
   position: relative;
   display: inline-block;
   vertical-align: top;
}

/* layout containers */
[data-g-layout-container] {
  position: relative;
} 

/* layout container items */
[data-g-layout-container] > * {
  position: absolute;
}

As was pointed out, the two steps of the layout algorithm can be contradictory and sometimes a style must be applied in one of the two phases only. To enable that possibility, a reserved class called gLayoutMeasuring is added to the element identified by gGridLayoutRoot during the first phase. It may be used to set a style during the measure phase "#gGridLayoutRoot(.gLayoutMeasuring)" or during the size and position phase "#gGridLayoutRoot:not(.gLayoutMeasuring)".

For example:

 #gGridLayoutRoot:not(.gLayoutMeasuring) .gScrollView {
 width: 100%;
 height: 100%;
 }

Sets the width and height to 100% during the size and position phase. During the measuring phase, the element takes its natural size.

The size and position phase

During this phase, rules are used to make the elements fill their box. They are listed as CSS rules but are applied in JavaScript:

/* layout container items */
[data-g-layout-container] > * {
   left: <left>;
   top: <top>;
   width: <width>;
   height: <height>;
}

/* stretch layout policy elements that have an 
horizontalStretching or verticalStretching property at true */
<inline style> {
   width: <computed width>;
   height: <computed height>;
}