Overview

ActiveWAFL provides two layout systems that can be combined to create advanced layouts.
Grid Layout
Grid-based layout.
Flow Layout
Flow-based layout in which all elements, including block elements, are placed into a horizontally wrapping linear flow.

ActiveWAFL also comes with a couple of Controls that can be used to further enhance the layout.

Auto Grid Layout

The Auto Grid Layout is a dynamically-sized grid of rows and columns.
Just like the fixed Grid Layout, there can be up to 12 differently cells in each row.
Unlike the fixed Grid Layout, an Auto Grid Layout always spans the full width of it's container.

Each grid has 12 columns, and each cell can span any number of those columns.
This provides a reasonably flexible solution for dynamically-sized layouts

Auto Grid Layout example
.Spans10
.Spans2
.Spans3
.Spans9
.Spans4
.Spans4
.Spans4
Auto Grid Layout example code
  1. <!-- Demo CSS: this style is being used to make it easier to see the cells.  It is not an actual ActiveWAFl css class. -->
  2. <style>.VisibleCellLayout { border: dotted 1px #afafaf; background-color: #dfdfdf; font-size: .85em; text-align: center; }</style>
  3. <!-- End Demo CSS -->
  4.  
  5. <grid-layout auto>
  6.    <layout-row>
  7.       <layout-cell spans="10">
  8.          <div class="VisibleCellLayout">.Spans10</div>
  9.       </layout-cell>
  10.       <layout-cell spans="2">
  11.          <div class="VisibleCellLayout">.Spans2</div>
  12.       </layout-cell>
  13.    </layout-row>
  14.    <layout-row>
  15.       <layout-cell spans="3">
  16.          <div class="VisibleCellLayout">.Spans3</div>
  17.       </layout-cell>
  18.       <layout-cell spans="9">
  19.          <div class="VisibleCellLayout">.Spans9</div>
  20.       </layout-cell>
  21.    </layout-row>
  22.    <layout-row>
  23.       <layout-cell spans="4">
  24.          <div class="VisibleCellLayout">.Spans4</div>
  25.       </layout-cell>
  26.       <layout-cell spans="4">
  27.          <div class="VisibleCellLayout">.Spans4</div>
  28.       </layout-cell>
  29.       <layout-cell spans="4">
  30.          <div class="VisibleCellLayout">.Spans4</div>
  31.       </layout-cell>
  32.    </layout-row>
  33. </grid-layout>
The .VisibleCellLayout class is only used here to make it easier to visualize the cell boundries.

Grid Layout

The Grid Layout is a responsive absolute-sized grid of n rows and up to 12 columns whose total width depends on the current media (device).
The following list shows the default grid widths for common device resolutions.

Mobile Phones
Full Width
Tablets
750 pixels
Desktop Monitors
970 pixels
HD Desktop Monitors
1170 pixels

Each grid has 12 columns, and each cell can span any number of those columns.
This provides a reasonably flexible solution for page layouts, sidebars, headers, footers, panels, and table-like layouts.

Grid Layout example
.Spans10
.Spans2
.Spans3
.Spans9
.Spans4
.Spans4
.Spans4
Grid Layout example code
  1. }
  2. <!-- Demo CSS: this style is being used to make it easier to see the cells.  It is not an actual ActiveWAFl css class. -->
  3. <style>.VisibleCellLayout { border: dotted 1px #afafaf; background-color: #dfdfdf; font-size: .85em; text-align: center; }</style>
  4. <!-- End Demo CSS -->
  5.  
  6. <div class="Grid Layout">
  7.    <div class="Row">
  8.       <div class="Spans10">
  9.          <div class="VisibleCellLayout">.Spans10</div>
  10.       </div>
  11.       <div class="Spans2">
  12.          <div class="VisibleCellLayout">.Spans2</div>
  13.       </div>
  14.    </div>
  15.    <div class="Row">
  16.       <div class="Spans3">
  17.          <div class="VisibleCellLayout">.Spans3</div>
  18.       </div>
  19.       <div class="Spans9">
  20.          <div class="VisibleCellLayout">.Spans9</div>
  21.       </div>
  22.    </div>
  23.    <div class="Row">
  24.       <div class="Spans4">
  25.          <div class="VisibleCellLayout">.Spans4</div>
  26.       </div>
  27.       <div class="Spans4">
  28.          <div class="VisibleCellLayout">.Spans4</div>
  29.       </div>
  30.       <div class="Spans4">
  31.          <div class="VisibleCellLayout">.Spans4</div>
  32.       </div>
  33.    </div>
  34. </div>
The .VisibleCellLayout class is only used here to make it easier to visualize the cell boundries.

Flow Layout

The Flow Layout is free-flowing layout where all contents will be display in-flow.
There are no rows, cells, or columns in a flow layout.
Contents automatically wrap.

This layout is useful for tiled layouts.

Flow Layout example
w1
z1
w2
w3
z2
z3
w4
z4
w5
w6
z5
z6
Flow Layout example code
  1. }
  2. <div class="Flow Layout">
  3.    <div class="Widget">w1</div>
  4.    <div class="Zidget">z1</div>
  5.    <div class="Widget">w2</div>
  6.    <div class="Widget">w3</div>
  7.    <div class="Zidget">z2</div>
  8.    <div class="Zidget">z3</div>
  9.    <div class="Widget">w4</div>
  10.    <div class="Zidget">z4</div>
  11.    <div class="Widget">w5</div>
  12.    <div class="Widget">w6</div>
  13.    <div class="Zidget">z5</div>
  14.    <div class="Zidget">z6</div>
  15. </div>
The .Widget and .Zidget classes are only used here to make it easier to visualize the cell boundries.

Nested Layouts

Layouts can be nested inside of eachother

Nested Layout example
Header Section 1
Header Section 2
Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6
This is where the main body content will go.
Sub Content
Sub Content
Sub Content
Body Content Section 2
Body Content Section 3
Footer Section 1
Footer Section 2
Footer Section 3
Nested Layout example code. A Grid Layout with three rows for the main page. The sidebar uses a Flow Layout to display tiles and the main body area uses an Auto Grid Layout to structre the body contents.
  1. <div class="Auto Grid Layout">
  2. <div class="Row">
  3. <div class="Spans10">
  4.    <div class="VisibleCellLayout">Header Section 1</div>
  5. </div>
  6. <div class="Spans2">
  7.    <div class="VisibleCellLayout">Header Section 2</div>
  8. </div>
  9. </div>
  10. <div class="Row">
  11. <div class="Spans3">
  12.    <div class="Flow Layout">
  13.       <div class="Widget">Tile 1</div>
  14.       <div class="Widget">Tile 2</div>
  15.       <div class="Widget">Tile 3</div>
  16.       <div class="Widget">Tile 4</div>
  17.       <div class="Widget">Tile 5</div>
  18.       <div class="Widget">Tile 6</div>
  19.    </div>
  20. </div>
  21. <div class="Spans9">
  22.    <div class="Row">
  23.       <div class="Spans6">
  24.          <div class="VisibleCellLayout">
  25.                 This is where the main body content will go.
  26.                 <div class="Auto Grid Layout">
  27.                     <div class="Row">
  28.                         <div class="Spans3"><div class="VisibleCellLayout">Sub Content</div></div>
  29.                         <div class="Spans6"><div class="VisibleCellLayout">Sub Content</div></div>
  30.                         <div class="Spans3"><div class="VisibleCellLayout">Sub Content</div></div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.       </div>
  35.       <div class="Spans3">
  36.          <div class="VisibleCellLayout">Body Content Section 2</div>
  37.       </div>
  38.       <div class="Spans3">
  39.          <div class="VisibleCellLayout">Body Content Section 3</div>
  40.       </div>
  41.    </div>
  42. </div>
  43. </div>
  44. <div class="Row">
  45. <div class="Spans4">
  46.    <div class="VisibleCellLayout">Footer Section 1</div>
  47. </div>
  48. <div class="Spans4">
  49.    <div class="VisibleCellLayout">Footer Section 2</div>
  50. </div>
  51. <div class="Spans4">
  52.    <div class="VisibleCellLayout">Footer Section 3</div>
  53. </div>
  54. </div>
  55. </div>

The Docking Control

The Docking Control finds all elements with the data-docked attribute (previously the Dock class, now deprecated) and docks them to the side specified by the data-dock-wall attribute where data-dock-wall is one of left, right, top, or bottom. Once elements are docked, the control automatically adjusts the container padding and scroll height to make it all work nicely.

The FullHeight Control

The FullHeight Control finds all elements with the data-fullheight attribute (previously the FullHeight class, now deprecated) and increases their heights to match the height of their containers.

Layout CSS

For inline layout and structure control (alignment, floats, sizing, padding, margins) you should use CSS that targets the proper elements by CSS path or ID instead of using classes specifically for the purpose of styling. Support for such classes are deprecated as of version 0.4.1762.