Module reahl.web.layout

New in version 3.2.

Utilities to deal with layout.


class reahl.web.layout.ResponsiveSize(**sizes)

Represents a set of relative sizes to be used for an element depending on the size of the user’s device.

This class lets one specify the size to use for different sizes of display device.

Each kwarg of the constructor is a size and the name of the kwarg is the device class for which that size applies.

Values for sizes and device classes are as defined by the underlying layout library.

New in version 3.2.


class reahl.web.layout.ColumnLayout(*column_definitions)

A Layout that divides an element into a number of columns.

Each argument passed to the constructor defines a column. Columns are added to the element using this Layout in the order they are passed to the constructor. Columns can also be added to the Widget later, by calling ColumnLayout.add_column().

To define a column with a given ResponsiveSize, pass a tuple of which the first element is the column name, and the second an instance of ResponsiveSize.

New in version 3.2.

columns = None

A dictionary containing the added columns, keyed by column name.


Returns a copy of this ColumnLayout which will additionally add a Slot inside each added column, named for that column.


Add an un-named column, with the given ResponsiveSize.

Parameters:size – The sizes to use for the column.

Returns a reahl.web.ui.Div representing the added column.


class reahl.web.layout.PageLayout(document_layout=None, contents_layout=None, header_layout=None, footer_layout=None)

A PageLayout creates a basic skeleton inside an reahl.web.ui.HTML5Page, and optionally applies specified Layouts to parts of this skeleton.

The skeleton consists of a Div called the document of the page, which contains three sub-sections inside of it:

  • the .header – the page header area where menus and banners go;
  • the .contents of the page – the main area to which the main content will be added; and
  • the .footer – the page footer where links and legal notices go.
  • document_layout – A Layout that will be applied to .document.
  • contents_layout – A Layout that will be applied to .contents.
  • header_layout – A Layout that will be applied to .header.
  • footer_layout – A Layout that will be applied to .footer.


Adds a <div id=”doc”> to the <body> of the page, which contains:

  • a <header id=”hd”>
  • a <div id=”contents”>
  • a <footer id=”ft”>

New in version 3.2.

header = None

The reahl.web.ui.Header of the page.

contents = None

The reahl.web.ui.Div containing the contents.

footer = None

The reahl.web.ui.Footer of the page.

document = None

The reahl.web.ui.Div containing the entire page.

header_layout = None

A reahl.web.fw.Layout to be used for the header of the page.

contents_layout = None

A reahl.web.fw.Layout to be used for the contents div of the page.

footer_layout = None

A reahl.web.fw.Layout to be used for the footer of the page.

document_layout = None

A reahl.web.fw.Layout to be used for the document of the page.