Boostrap Grid#

class Column(*blocks: Block, base_width: int | None = None, viewport_widths: dict[str, str] | None = None, alignment: str | None = None, self_alignment: str | None = None, **kwargs: Any)[source]#

Bases: Block

Implements a col from the Bootstrap Grid system.

This is primarily meant to be used with Row, but you can actually use Column objects outside of a Row. This allows you to specify a particular width for the block within a page. See Boostrap: Columns, Standalone Column Classes.

Example

from wildewidgets import Column, Block

col = Column(
    Block("This goes at the top of the column", css_class="mb-2"),
    Block("This goes at the bottom of the column"),
    base_width=6,
    viewport_widths={"md": "4", "lg": "3"},
    alignment="center",
    self_alignment="center"
)

Parameters:

*blocks – a list of Block objects or string to add to this column

Keyword Arguments:

base_width – the base width of this block for all viewports. This will be converted to a col-{base_width} CSS class. If this is not supplied and base_width is None, add col as our CSS class.
viewport_widths – a dict where the keys are Bootstrap viewport sizes (e.g. sm, xl) and the values are column widths, again between 1 and 12 inclusive, or “auto”. These will be converted to CSS classes that look like col-{viewport}-{width}
alignment – how to align items within this column. Valid choices: start, center, end, between, around, evenly. See Bootstrap: Flex, justify content. If not supplied here and alignment is None, do whatever aligment Bootstrap does by default.
self_alignment – how to align this column vertically within its containing row. Valid choices: start, end, center See Bootstrap Columns

Raises:

ValueError – there was a problem validating one of our settings

check_alignments() → None[source]#

Check that our supplied alignment and self_alignment settings to ensure they are valid values from ALIGNMENTS and SELF_ALIGNMENTS, respectively.

Raises:: ValueError – an alignment was not valid

check_widths() → None[source]#

Validate our supplied width and viewport_widths settings to ensure widths for every viewport are between 0 and 12 inclusive, or (in the case of viewport specific widths).

Raises:: ValueError – a width was out of range

ALIGNMENTS: Final[list[str]] = ['start', 'center', 'end', 'between', 'around', 'evenly']#: The valid column content alignments

COL_MIN_WIDTH: Final[int] = 1#: The minimum and maximum column widths, as per Bootstrap

SELF_ALIGNMENTS: Final[list[str]] = ['start', 'center', 'end']#: The valid self vertical alignments with our row

alignment: str | None = None#

start, center, end, between, around, evenly. See Bootstrap: Flex, justify content. If not supplied here and alignment is None, do whatever aligment Bootstrap does by default.

Type:: How to align items within this column. Valid choices

base_width: int | None = None#: A column width between 1 and 12 inclusive. This is the base width for all viewports

self_alignment: str | None = None#: How to align this column vertically within its containing row. Valid choices: start, end, center. See Bootstrap: Columns, Alignment :

viewport_widths: dict[str, str] = {}#

sm, xl) and the values are column widths, again between 1 and 12 inclusive, or “auto”

Type:: A dict where the keys are Bootstrap viewport sizes (e.g. #

class Row(*columns: Block, horizontal_alignment: str | None = None, vertical_alignment: str | None = None, **kwargs: Any)[source]#

Bases: Block

Implements a row from the Bootstrap Grid system.

As columns are added to this Row, helper methods are also added to this row instance, named for the Column.name of the column. See _add_helper_method for details on how the helper methods will be named.

Example

from wildewidgets import Row, Column, Block

sidebar = Column(
    Block("This is in the sidebar"),
    name='sidebar',
    width=3
)
main = Column(
    Block("This is in the main content area"),
    name='main'
)
row = Row(
    sidebar,
    main,
    horizontal_alignment='center',
    vertical_alignment='center'
)

Parameters:

*columns – one or more Column objects

Keyword Arguments:

horizontal_alignment – the horizontal alignment for the columns in this row. See Bootstrap: Columns, Horizontal Alignment. Valid choices: start, center, end, around, between, evenly.
vertical_alignment – the vertical alignment for the columns in this row. See Bootstrap: Columns, Vertical Alignment. Valid choices: start, center, end.

Raises:

ValueError – there was a problem validating one of our alignments

add_column(column: Column) → None[source]#

Add a column to this row to the right of any existing columns.

Note

A side effect of adding a column is to add a method to this Row object like so:

def add_to_{column_name}(widget: Widget) -> None:

where {column_name} is either:

the value of column.name, if that is not the default name
column-{n} where n is the number of columns in this row,
starting with 1.

Parameters:: column – the column to add

add_to_column(identifier: int | str, block: Block) → None[source]#

Add widget to the column named identifier at the bottom of any other widgets in that column.

Note

If identifier is an int, identifier should be 1-offset, not 0-offset.

Parameters:

identifier – either a column number (left to right, starting with 1), or a column name
block – the Block subclass to append to this col

check_alignments() → None[source]#

Check that our supplied horizontal_alignment and verttical_alignment settings to ensure they are valid values from HORIZONTALALIGNMENTS and VERTICAL_ALIGNMENTS, respectively.

Raises:: ValueError – an alignment was not valid

block: str = 'row'#: block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

property column_names: list[str]#

Return the list of Column.name attributes of all of our columns.

Returns:: A list of column names.

columns: list[Block] = []#: A list of Column blocks to add to the this row. This is List[Block] here so people can specify their own Column-like classes

horizontal_alignment: str | None = None#: the horizontal alignment for the columns in this row. See Bootstrap: Columns, Horizontal Alignment

vertical_alignment: str | None = None#: the vertical alignment for the columns in this row. See Bootstrap: Columns, Vertical Alignment

class TwoColumnLayout(left_column_width: int | None = None, left_column_widgets: list[wildewidgets.widgets.base.Block] | None = None, right_column_widgets: list[wildewidgets.widgets.base.Block] | None = None, **kwargs: Any)[source]#

Bases: Row

A convenience widget that implements a two column row from the Bootstrap Grid system with two named columns: left and right.

On viewports less than size md, both columns will take up the entire width of the page (so that we look readable on portrait phones).

Set the column widths for viewport md and above, define left_column_width as a class attribute or keyword argument, where 0 < left_column_width <= 12. The default is to make the two columns equal widths.

Examples

from wildewidgets import TwoColumnLayout, Block

left_blocks = [Block('One', name='one'), Block('Two', name='two')]
right_blocks = [Block('Three', name='three'), Block('Four', name='four')]
layout = TwoColumnLayout(
    left_column_width=3,
    left_column_widgets=left_blocks,
    right_column_widgets=right_blocks
)

To create a two column layout with no blocks in either column:

from wildewidgets import TwoColumnLayout

layout = TwoColumnLayout(left_column_width=3)

To create a two column layout with blocks in each column:

from wildewidgets import TwoColumnLayout, Block

layout = TwoColumnLayout(
    left_column_width=3,
    left_column_widgets=[
        Block('One', name='one'), Block('Two', name='two')
    ],
    right_column_widgets=[
        Block('Three', name='three'), Block('Four', name='four')
    ]
)

To add a block to a column after creating the TwoColumnLayout:

from wildewidgets import TwoColumnLayout, Block

layout = TwoColumnLayout(left_column_width=3)
layout.add_to_left_column(Block('One', name='one'))
layout.add_to_right_column(Block('Two', name='two'))
layout.add_to_left_column(Block('Three', name='three'))
layout.add_to_right_column(Block('Four', name='four'))

Keyword Arguments:

left_column_width – the width of the left column, where 0 < left_column_width <= 12. The right column will have its width set automatically based on this.
left_column_widgets – A list of blocks to add to the left column
right_column_widgets – A list of blocks to add to the right column

left_column_widgets: list[Block] = []#: A list of blocks to add to the left column

left_column_width: int = 6#: The width of the left column, where 0 < width <= 12. The right column will have its width set automatically based on this.

name: str = 'two-column'#: The name of this block

right_column_widgets: list[Block] = []#: A list of blocks to add to the right column