Latitude:xx.xxxx
Longitude:y.yyyy
Altitude:zzm

# Template1

Page updated: 26/08/2025 17:54:00

## Single column grid / flex

Use either: 'ows-grid col1' or 'ows-flex col1'

#### A single colum grid layout

### Title

Tag

This uses 'w3-block', if 'w3-card' is used, it will have a shadow but still no padding.

For single column layouts it makes no difference if you use a flexbox or a grid - they are essentially the same.

### Title

Tag

###### Weather Variable

###### Reading

Temperature

-- °C

Apparent

--

Feels like

--

#### A two column flexbox section

### Title

Tag

This section uses a flexbox layout with 'w3-container's so padding is included, even for the title. To make the title background reach the edges use the class 'w3-stretch' in the title div.

This container uses a 'ows-theme1' colours.

### Title

Tag

###### Variable

###### Reading

Pressure

--

Highest Pressure

--

Rain rate

-- /hr

In a flexbox layout, orphan panels stretch to fill the available width. This panel has no title bar.

#### A Three column Flexbox layout

### Title

Tag

As above, this section uses a flexbox layout but with three columns. Only this card has been given a title but it has no background colour so the Gull will show through.

Card

Unlike the two colum layout this has been set to a fixed width - 'ows-fixed', so the orphan columns below stay 'column' width. They also center.

Click me:

This column has no border but as it is a card, it does have a shadow - 'ows-shadow1'. It has also been set to grow to twice its width - 'ows-growX2'.

The card before it has a button bar - ows-btnBar' with some text and a button. Not only the button stretches to fill the availabel space, this makes it easy to place text beside the button if required. Text can be put infront of, or after the text -

#### A four column grid layout

### Title

Tag

Card

Card

Card

As this is an orphan panel in a grid layout it always retains the panel size.

#### Button Bars

Jan
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
All time
This year
This month

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'.

Template design x.y by Oaktree Weather Systems

###### Powered by CumulusMX V X.y.y (b:b.cccc)