Navigation

Module reahl.web.bootstrap.grid

Examples in this section

  • tutorial.bootstrapgrids

Get a copy of an example by running:

reahl example <examplename>

New in version 3.2.

This module contains tools for controlling how elements are positioned.

The main tool here is an invisible layout grid which changes depending on the size of the device being used to browse. The module also contains several other related tools.

When creating a visual layout it is often useful to arrange elements on an invisible grid. The tools here allows building such a grid, but with a twist: the grid can resize depending on the size of the device that is used to view it.

User devices come in a wide range of sizes. In order to be able to change a layout depending on the size of a device, devices are classified into several device classes: ‘xs’ (extra small), ‘sm’ (small), ‘md’(medium), ‘lg’ (large), ‘xl’ (extra large).

Whenever you need to specify a size for Bootstrap grid element, you can specify the size that element should have for each class of device.

Bootstrap’s grid system works on units of 1/12th the size of a given parent width. A size for a particular device class is thus an integer denoting a size in 1/12ths of its container’s width.

Container

class reahl.web.bootstrap.grid.Container(fluid=False)

A Container Layout manages the positioning of the main areas of a page. By default it ensures that the HTMLElement it is used with to be has a size that stays at a fixed width per device class and that it stays centered in the horizontal.

Using a Container is compulsory if you want to make use of a ColumnLayout.

Parameters

fluid – If True, the container fills the entire available width. If a string denoting a device class, the container fills the entire width for smaller device classes only.

customise_widget()

Override this method in subclasses to allow your Layout to change its Widget upon construction. There is no need to call super(), as the superclass implementation does nothing.

ColumnLayout

class reahl.web.bootstrap.grid.ColumnLayout(*column_definitions)

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

Each positional 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().

Each such column-defining argument to the constructor is a tuple of which the first element is the column name, and the second an instance of ColumnOptions. Besides the size of the column, other adjustments can be made via ColumnOptions.

You can also pass the column name only (no tuple) in which case a default ColumnOptions will be used.

If an element is divided into a number of columns whose current combined width is wider than 12/12ths, the overrun flows to make an additional row.

It is customary, for example to specify smaller sizes (ito 12ths) for bigger devices where you want the columns to fit in next to each other, but use BIGGER sizes (such as 12/12ths) for the columns for smaller sized devices. This has the effect that what was displayed as columns next to each other on the bigger device is displayed as “stacked” cells on a smaller device.

By default, the smallest device classes are sized 12/12ths.

By default, if you specify smaller column sizes for larger devices, but omit specifying a size for extra small (xs) devices, columns for xs devices are full width and thus stacked.

Changed in version 4.0: Each item in column_definitions can be just a string (the column name) or a tuple mapping a name to a ColumnOptions.

columns

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

with_slots()

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

without_gutters()

Returns a copy of this ColumnLayout which will not display whitespace between columns.

New in version 4.0.

with_justified_content(content_justification)

Returns a copy of this ColumnLayout with justification options set on it.

New in version 4.0.

with_vertical_alignment(vertical_alignment)

Returns a copy of this ColumnLayout with the column alignment options set on it.

New in version 4.0.

customise_widget()

Override this method in subclasses to allow your Layout to change its Widget upon construction. There is no need to call super(), as the superclass implementation does nothing.

add_column(name, size=None, offsets=None, vertical_align=None, column_widget=None)

Called to add a column with given options.

Parameters

Changed in version 4.0: Changed to create a named column with all possible options.

ColumnOptions

class reahl.web.bootstrap.grid.ColumnOptions(name, size=None, offsets=None, vertical_align=None)

Various options to change how a column should be displayed.

Parameters

  • name – The name of the column.

  • size – The ResponsiveSize of the column.

  • offsets – A ResponsiveSize representing extra space before the column.

  • vertical_align – An Alignment stating how this column should be aligned vertically in its container.

New in version 4.0.

ResponsiveSize

class reahl.web.bootstrap.grid.ResponsiveSize(**sizes)

A size used for layouts that can adapt depending on how big the user device is.

Sizes kwargs for each device class are given as integers that denote a number of 12ths of the size of the container of the element being sized. Eg: 6 would mean 6 12ths, or 1/2 the size of the container.

If you specify a size for a device class, that size will be used for all devices of that class or bigger.

It is not necessary to specify a size for every device class. By default, if a device class is omitted, it is assumed to be sized as per the nearest specified smaller device class. If there is no smaller device class, a value of 12/12ths is assumed.

Parameters

  • xs – Size to use if the device is extra small.

  • sm – Size to use if the device is small.

  • md – Size to use if the device is medium.

  • lg – Size to use if the device is large.

  • xl – Size to use if the device is extra large.

ContentJustification

class reahl.web.bootstrap.grid.ContentJustification(**kwargs)

Specifies how elements should be spaced horizontally inside a parent.

For each device size specify alignment as one of:

  • ‘start’: to align at the start.

  • ‘end’: to align at the end.

  • ‘center’: to align in the center of available space.

  • ‘between’: distribute all empty space evenly between items, but with no space before the first element or after the last element.

  • ‘around’: distribute all empty space evenly between items, including before the first element and after the last element.

Parameters

  • xs – Alignment to use if the device is extra small.

  • sm – Alignment to use if the device is small.

  • md – Alignment to use if the device is medium.

  • lg – Alignment to use if the device is large.

  • xl – Alignment to use if the device is extra large.

New in version 4.0.

Alignment

class reahl.web.bootstrap.grid.Alignment(**kwargs)

Specifies how elements should be aligned vertically inside a parent.

For each device size specify alignment as one of:

  • ‘start’: to align at the top.

  • ‘end’: to align at the bottom.

  • ‘center’: to align in the center of available space.

  • ‘baseline’: to align with the bottom of the first text line of neighbouring elements.

  • ‘stretch’: stretches to fill all vertical space.

Parameters

  • xs – Alignment to use if the device is extra small.

  • sm – Alignment to use if the device is small.

  • md – Alignment to use if the device is medium.

  • lg – Alignment to use if the device is large.

  • xl – Alignment to use if the device is extra large.

New in version 4.0.

Table of Contents

Previous topic

Module reahl.web.bootstrap.forms

Next topic

Package reahl.web.bootstrap.files

Navigation

Created using Sphinx 4.0.2.