Navigation

Module reahl.web.pure

Layout tools based on Pure (http://purecss.io/)

New in version 3.1.

UnitSize

class reahl.web.pure.UnitSize(default=None, sm=None, md=None, lg=None, xl=None)

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

The Pure library sizes elements relative to their parent using fractions (1/2 or 3/4 or 1 are examples). The size of an element relative to its parent can also vary, depending on the size of the device a user is using to view your web application.

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

Sizes should be given as fractions in strings, such as the literal:

UnitSize(sm='1', md='1/2', xl='1/4')

Sizes can be given for sizes of device using the keyword arguments:

Parameters:
  • default – If no other size is specified, or if the screen being used is smaller than the sizes given, this size is used.
  • sm – For small screens (or larger).
  • md – For medium-sized screen (or larger).
  • lg – For large devices (or larger).
  • xl – For extra-large devices (or larger).

Note

If a size is specified for md, for example, it will be used on all screens that are medium-sized or larger and Pure will fall back to using the default size for smaller screens.

ColumnLayout

class reahl.web.pure.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 without specifying a size, just pass a string containing the column name.

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

ColumnLayout('column_a', ('column_b', UnitSize(default='1/2')))

Styling

Each column added is a <div> which has has the css class ‘column-<column_name>’ where <column_name> is the name as specified to the constructor.

columns = None

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

add_column(unit_size=None)

Add an un-named column, optionally with the given UnitSize.

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

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

PageColumnLayout

class reahl.web.pure.PageColumnLayout(*column_definitions)

A Layout that provides the main layout for an reahl.web.ui.HTML5Page.

A PageColumnLayout adds a header and footer area to an HTML5Page, as well as a number of columns between the header and footer area, as specified by the arguments to its constructor.

All of these contents are also wrapped in a reahl.web.ui.Panel, which is handy for styling.

Specifying columns work exactly as for ColumnLayout.

Inside each added column, a reahl.web.ui.Slot is added that is named after the column.

Styling

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”>

The div#id element is further set up as with a ColumnLayout using the arguments passed as column_definitions.

header = None

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

contents = None

The reahl.web.ui.Panel containing the columns.

footer = None

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

document = None

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

columns

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

Table Of Contents

Previous topic

Module reahl.web.ui

Next topic

Module reahl.web.pager

Navigation

Created using Sphinx 1.3.3.