====== Adding your own pages ======

==== Starting from New ====
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...
  - based on a 4 column grid layout<wrap indent>Style:<wrap indent>ow-grid</wrap></wrap>
  - based on a 4 column flexbox layout.<wrap indent>Style:<wrap indent>ow-flex</wrap></wrap>
... and the footer and template modal popup.
=== Grid Layouts ===
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.

=== Flexbox Layouts ===
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.

=== Columns ===
In either scenario above, one of the following styles must be included: **col1**, **col2**, **col3**, **col4**, **col5**, **col6** or **col7** to indicate the number of columns displayed on screens wider than 1200px. 

=== Flexbox fixed width ===
To make a flexbox section used fixed width panels 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 orphan panels stretch to 2, 3 or 4 times the width of their siblings.  This is achieved using the following:
  * **ow-growX2**<wrap indent>This doubles the width of a panel.  If using a three column layout, then the panel will be 2/3rds the screen width.</wrap>
  * **ow-growX3**<wrap indent>This triples the panel width.</wrap>
  * **ow-growX4**<wrap indent>This quadruples the panel width</wrap>

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.

==== Other Elements ====
=== Title Bars ===
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.

=== Data Bars ===
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.++

==== Copying existing custom pages ====
As already stated, this version of the APW does not use the w3schools<sup>®</sup> 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.