Module reahl.web.pure¶
New in version 3.1.
Layout tools based on Pure (http://purecss.io/)
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, as defined by the Pure library.
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)¶ Bases:
reahl.web.layout.ColumnLayoutA Layout that uses the Pure library to divides an element into a number of columns.
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
UnitSizeColumnLayout('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.
-
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.Divrepresenting 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.Div, which is handy for styling.Specifying columns work exactly as for
ColumnLayout.Inside each added column, a
reahl.web.ui.Slotis 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#contents element is further set up as with a
ColumnLayoutusing the arguments passed as column_definitions.Deprecated since version 3.2: Instead, please use reahl.web.layout.PageLayout combined with your choice of Layout for its contents
-
columns¶ A dictionary containing the added columns, keyed by column name.