As with all APW's that i release, I have included a template page to provide a framework to get you started. However, unlike previous versions this template is just a framework and will require you to do some editing to make it work as required.

The template page is constructed with the banner, two areas containing a number of panels using the html <article> element that are…

1. based on a 4 column grid layoutStyle:ow-grid
2. based on a 4 column flexbox layout.Style:ow-flex

These will always generate panels of equal width regardless of the number of columns / panels included. They are responsive and will collapse down to a single column on small screens. When the number of panels exceeds a multiple of the set number of column, they will retain their width and spill onto the next row.

Unlike grids, a flexbox layout will always fit panels in the available space taking regard for the number of columns requested. I.e., Overspill panels will stretch evenly across the page width. However, I have included a style that can be applied to the flexbox container to force overspill panels to approximately match their sibling panels. In this scenario, the panels will spread across the page width without expanding.

In either scenario above, one of the following styles should be included: col1, col2, col3, Col4, col5, col6 or col7.

To make a flexbox section used fixed with you should add the style ow-fixed to it. Note
Please note that the actual width is calculated and there might be very small differences in orphan panel widths compared to other siblings.

Flex Box Tweeks

Although these are designed to either fill the available width of the page or match the other panels in the set, it is possible to alter this behavior for orphan panels. As already stated above, flexbox articles can have a fixed width to match their siblings. It is also possible to make orpahn panels stretch to 2, 3 or 4 times the size of their siblings. This is achieved using the following:

• ow-growX2This doubles the width of a panel. If using a three column layout, then the panel will be 2/3rds the screen width.
• ow-growX3This triples the panel width.
• ow-growX4This quadruples the panel width

Obviously, if there is not enough space for the expanded panel it will revert to its default size. No matter what the panels will continue to be responsive.

To add a title to a page or to a panel there is the style: ow-titleBar

This creates a flexbox that distributes its contents evenly across the available space. It will not wrap onto additional lines so teh available space is limited to the width of their containing element. If an individual element in the title bar will not fit, it will break into multiple lines but all other elements will align with the baseline.

In panels, title bars adjust the left and right padding / margin to enable background colours to be applied.

There are two variations of data bars, one is based on a grid layout, the other on flex boxes. Both can be used for a single line of data to…

• Place the data heading on the left and the reading on the right,
• provide a consistent hover effect.

The styles available are: ow-dataBar, ow-dataBarFlex and ow-dataBar3Col Note
This last style is only available on the todayyest.html page to accommodate dates and times separately. This style is held in the todayVyest.css stylesheet.

As already stated, this version of the APW does not use the w3schools^® custom stylesheet so any styles in your existing personal pages that use the prefix w3- will have no effect,

Generally speaking, the framework provided in the template should make this relatively straight forward if you can follow this advice:

• Only copy the contents from existing panels from the old APW into <article> panels on the new APW.
• Change old ow-titleFlex entries into ow-titleBar entries.
• Remove any style starting w3-
• Make sure that any ows-theme… entries are changed to their corresponding ow-theme… style.