Latitude:xx.xxxx
Longitude:y.yyyy
Altitude:zzm
Longitude:y.yyyy
Altitude:zzm
This is a simple page to demonstrate the use of w3.css and ows-themes in a web page.
It includes a header, sidebar menu, a grid and flexbox layout showing w3-blocks and w3-containers. Some panels include title bars using either grids or flexboxes and some panels with lines of data to illustrate hover effects. This is set to add a gradient highlight and bold text.
Tag
Block
Tag
Temperature
-- °C
Apparent
--
Feels like
--
A grid layout can be anything between 1 and 7 columns but any orphan panels always align to the left. They are always the same width (dependant on number of columns), and they can contain blocks, containers or cards - only containers have in-built padding. Title bars can be either grid or flexboxe based, grids can only contain two elements, flexboxes as many as will fit.
Tag
Card content
Tag
Pressure
--
Highest Pressure
--
Rain rate
-- /hr
This container is the same colour as the page so has a theme border added.
It also uses the <p> element.
Tag
Card
Card
Card
Click me:
This is an orphan panel and in a basic flexbox layout will stretch to fill the available space. Two orphan panels will stretch equally across the availabel space.
Tag
Card
Card
Card
Click me:
These panels use the class 'w3‐card' and therefore have is a shadow. This defaults to ows-shadow1 but can be changed by adding the class 'ows‐theme‐shadow2' or even 'ows‐shadow2‐hvr'.
A 'Flexbox' layout can also have between 1 and 7 columns but, unlike grids, any orphan panels align centrally. As for grids, they can also accept
flex or grid title bars and the same limitations apply.
Unlike grid panels, flexbox orphan panels can be made to grow sideways
to occupy 2, 3, or 4 column widths. This is not 100% accurate but does work effectively as can be seen below.
Tag
Card
Card
Card
This panel illustrates how a flexbox based panel can be made to grow if required.
Button bars use flex boxes with all child buttons or div's set to wrap and expand into new rows as required.
In the above the buttons for 'This year', 'This month' and 'All time' have been made to grow bigger by adding the class: 'ows-stretch'.
