Page Layout

Version 5.21

All pages are constructed using grids or flexboxes. These enable layouts to be modified without resorting to cut-n-paste of the code used to create them. Both of these structures enable the use of a property called 'order'. This only applies to sections that has the class ow-flex or ow-grid.

The way that I have implemented these structures also enables the use of styles called col1, col2, col3, col4, col5, col6 and col7, to dictate the number of columns to use on a display that is 1200px or wider. On narrower displays, they automatically collapse to fewer columns as required.

Using Order

On all pages where is is possible to use this feature, I have set the order or all sibling elements to 1. This effectively makes the browser ignore the order value - they are all the same so display siblings in the order they were coded.

Changing this value will force sibling elements to display in ascending chronological order.

Order values can be negative.

Using columns

All pages include sections, some of which will have an ow-grid or ow-flex class. This will be immediately followed by one of the above colX classes. This class dictates the number of columns to display on screens wider than 1200px.

Grids

Pages that use grids use the class ow-grid followed by the number of columns to display on screen over 1200px wide. This is followed by the class specifying the number of columns to display. This is calculated using css variables. If the colX class is omitted, then it is assumed to be one. Grid rows are set to be a minimum of 1 character high but grow to accommodate the panel contents.

Remember, the panels all default to the height of their siblings in the same row but this can be over-ridden on the AI settings page.

In a grid layout, orphan panels are always left aligned and are a constant width.

Flexboxes

These are similar to grids with the primary difference being, their width is generally flexible. They are implemented with the class ow-flex. Using a single sibling in a 4 column flexbox will display a full width panel regardless. It is only when multiple siblings are used in which case they will reduce in width until the set number of columns is displayed.

However, this basic property can be over-ridden by also including the class ow-fixed. This forces the maximum width of each sibling to to that required to display the specified number of columns. Unlike grids, these will be centre aligned.

A further class can be applied to individual siblings to force it to grow by two, three or four times its panel width. This feature will only apply on the last row of a flexbox section. The classes to use are: ow-growX2, ow-growX3 or ow-growX4.

Exceptions

There are some pages ( and some areas within all pages ) that use a custom grid. This tend to use named areas within the grid to hold specific content. The order property may not work in these cases and if it does, would have unpredictable consequences. If you choose to rename or re-order these named areas then I will not be able to support your installation.

Oaktree Weather Systems

Table of Contents