Columns & Panels

To enable pages to be responsive, they use css flexboxes or css grids. These enable panels to be created in a tabular layout that automatically adjust to various page widths.

Basics

The css that generate these has been revised and renamed to provide greater flexibility and ease of transfer between layouts.

All page layouts using flexboxes now use the class .ows-flex without specifying the number of 'columns' required.
All page layouts using grids use the class .ows-grid, again without specifying the required columns.

In both cases the above styles should be followed with a style to indicate how many columns are required. The available column styles are: .col1, .col2, .col3, .col4, col5, .col6 .col7 or col7.

What's the difference

Basically not much but…

Grids will always adhere to the original size constraints, so if there is an extra panel it will always align in the next row starting from the left¹⁾.
Grid areas can be named, styled and re-organised on smaller screens.
Flexboxes can be made to align centrally when there are odd panels left over.
Flexboxes can also be forced to expand to be multiples of the original column size.
Both flexboxes and grids allow child <div> elements to have a style: order: X; so that can be re-ordered easily.
Note <div>'s with an order number are always in ascending numerical order except if the order number is the same. In this case they will revert those <div>'s to coding order.

For the purposes of this wiki page, examples will be based on the template1 page which contains many examples of Flexbox elements.

Using Flexboxes

The panel on the right shows the 3 column layout page. The image is what that section would look like.

View image

Flexbox Styles

The following styles are available when you use flexboxes.
ows-fixed:This class prevents orphan panels stretching across the available screen width.

ows-growX2:Adding this class as well as .ows-fixed will enable you to expand the panel to twice its default width Note This will only work if the panel in question is in an orphan row, i.e., if there are already the set number of columns then it will not stretch the panel.

ows-growX3:As above but multiplies the width by three - the same limitations apply.

ows-growX4:Multiplyes the width by four.

ax-titleBar: This creates a non-wrapping row with space justified. ax-btnBar: This creates a wrapping row(s) with varying size content that spills onto additional rows if required. Content will be justified. ax-dataBar: This is similar to the ax-titleBar but adds a hovering highlight to each row.

Code snippet from the template1 page

<h3>Three Column Layout</h3>
<div class="ows-flex col3 ows-fixed"><!-- ows-fixed stops orphan panels stretching across the page -->
  <div class="w3-card w3-border ows-theme1-bdr" style="order:1;">
    <div class="ows-titleFlex ows-theme7">
      <h3>Title</h3>
      <p>Tag</p>
    </div>
    <p>Some text below the title.</p>
  </div>
  <div class="w3-card w3-border ows-theme2-bdr ows-theme-shadow2-hvr" style="order:2;">
    <p>A card just containing texr</p>
  </div>
  <div class="w3-card w3-border ows-theme3-bdr" style="order:3;">
    <p>Unlike the two columnn set to a fixed width - 'ows-fixed', so the orphan columns below stay 'column' width.  They also center.</p>
  </div>
  <div class="w3-card w3-border ows-theme4-bdr" style="order:0;"><!-- This card will be first in the set -->
    <div class="w3-flex ows-btnBar">
      <p>Click me:</p>
      <button class="w3-button ows-theme3-bkg-hvr">This is a button</button>
    </div>
  </div>
  <div class="w3-card ows-theme9 ows-growX2">
    <p>This column is a card. It has also been set to grow to twice its width - 'ows-growX2'.</p>
    <p>
      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 - 
    </p>
  </div>
</div>

Using Grids

The code panel shows a three column grid layout. The image below shows what it looks like.

View image

css grid styles

There are no unique styles that can only be used with grids - one of the reasons that are used.

Code snippet from template1

<h4>A three column grid layout</h4>
<div class="ows-grid col4">
  <div class="w3-container w3-border ows-theme9">
    <div class="ows-titleFlex ows-theme7 w3-stretch">
      <h3>Title</h3>
      <p>Tag</p>
    </div>
    <p>Card</p>
  </div>
  <div class="w3-container w3-border ows-theme9 ows-theme2-bdr"><p>Card</p></div>
  <div class="w3-container w3-border ows-theme3-bdr"><p>Card</p></div>
  <div class="w3-container w3-border ows-theme4-bdr"></div>
  <div class="w3-container w3-border ows-theme7 ows-theme3-bdr">
    <p>
      As this is an orphan panel in a grid layout it always retains the panel size.
    </p>
  </div>
</div>

Other useful Classes

As can be seen in the snippets of code above or by looking at either of the template pages, there are a number of other classes that can be applied to aid the development of your own pages.

ows- classes

ows-titleFlex

This creates a flexbox title bar with all content aligned to the baseline. It can contain as many elements as will fit on a single line but it will not wrap content onto new rows. Each element has a 1 vertical width gap to ensure they won't touch adjacent elements. They add a margin below so that following content is appropriately spaced.
Note The gap can be set at the top of the main.css style sheet and individual elements may wrap.

ows-btnBar

This provides a framework for one or more buttons. It is a flexbox and will wrap buttons onto additional lines if required. It also correctly formats the buttons. Buttons are spaced as for the title bar.
Note You can apply an extra style to button in this bar to force them to grow as much as possible - this avoids having orphan buttons on the left of the screen.

ows-dataRow2c & ows-dataRowFlex

These two classes are provided to enable you to wrap rows of data so that they respond to mouse hovers. The Flex version allows for two columns, the righthand one being right aligned. The Row2c²⁾ version has fixed second column width of 9em and is also right aligned.

There is also a special - ows-dataRow3C declared on the Today V Yesterday page that creates a three column layout specifically for the page.
Further Information You are advised to review the page for further information.

w3- classes

These are as included in the w3v5.css stylesheet. This version includes all the available w3c® colours. These are used by adding the class to the required element. They are in the format:

w3-<color>:This sets the background colour. Replace <color> with any of the w3c defined colour names
w3-text-<color>:This sets the foreground or text colour of the element. Again use any of the pre-defined w3c colour names.
w3-hover-text-<color>:Adds a text hover effect.
w3-hover-border-<color>:Adds a border hover color.

There are other hover colour effects available. For a full list visit: W3Schools.

Other useful w3- classes

w3-imageThis forces an image to fill the available with and adjust the height in proportion.Note Be ware that a small image in a big space will be distorted.
w3-container
w3-panel
w3-cardThese are basic <div>s to hold page content. They may have padding top & bottom or left & right and/or borders / shadow.

For a full list of all the features supplied within the w3v5.css stylesheet visit: W3Schools

¹⁾

Oaktree Weather Systems

Table of Contents