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…
… and the footer and template modal popup.
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 must be included: col1, col2, col3, col4, col5, col6 or col7 to indicate the number of columns displayed on screens wider than 1200px.
To make a flexbox section used fixed width panels you should add the style ow-fixed to it. Note
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:
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…
The styles available are: ow-dataBar, ow-dataBarFlex and ow-dataBar3Col Note
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: