Skip to main content
This is a pre-production deployment of Warehouse. Changes made here affect the production instance of PyPI (pypi.python.org).
Help us improve Python packaging - Donate today!

A (partial) implementation of the CSS box and flexbox layout algorithm.

Project Description

A (partial) implementation of the CSS box and flexbox layout algorithm.

The following CSS attributes and value types are supported:

Name Value
width, height positive number
min_width, min_height positive number
max_width, max_height positive number
left, right, top, bottom number
margin, margin_left, margin_right, margin_top, margin_bottom number
padding, padding_left, padding_right, padding_top, padding_bottom positive number
border_width, border_left_width, border_right_width, border_top_width, border_bottom_width positive number
flex_direction "column", "row"
justify_content "flex-start", "center", "flex-end", "space-between", "space-around"
align_items, align_self "flex-start", "center", "flex-end", "stretch"
flex positive number
flex_wrap "wrap", "nowrap"
position "relative", "absolute"

Quickstart

In your virtualenv, install Colosseum:

$ pip install colosseum

Then, you can instantiate a CSSnode, and query the layout that results:

>>> from colosseum import CSSNode, ROW, COLUMN
>>> node = CSSNode(width=1000, height=1000, flex_direction=ROW)
>>> node.children.add(CSSNode(width=100, height=200))
>>> node.children.add(CSSNode(width=300, height=150))
>>> layout = node.layout
>>> print(layout)
<Layout (1000x1000 @ 0,0)>
>>> layout.width
1000
>>> layout.height
1000
>>> layout.top
0
>>> layout.left
0
>>> for child in node.children:
...     print(child.layout)
<Layout (100x200 @ 0,0)>
<Layout (300x150 @ 100,0)>

Requesting the layout attribute of a CSSNode forces the box model to be evaluated. Once evaluated, the layout will be cached. Modifying any CSS property on a node will mark the layout as dirty, and the layout will be recomputed the next time the layout is accessed. For example, if we switch the outer node to be a “column” flex box, rather than a “row” flex box, you’ll see the coordinates of the child boxes update to reflect a vertical, rather than horizontal layout:

>>> node.flex_direction = COLUMN
>>> print(node.layout)
<Layout (1000x1000 @ 0,0)>
>>> for child in node.children:
...     print(child.layout)
<Layout (100x200 @ 0,0)>
<Layout (300x150 @ 0,200)>

Style attributes can also be set in bulk, using the style() method on a CSSNode:

>>> node.style(width=1500, height=800)
>>> print(node.layout)
<Layout (1500x800 @ 0,0)>

Style attributes can also be removed by deleting the attribute on the CSSNode. The value of the property will revert to the default:

>>> node.style(margin_top=10, margin_left=20)
>>> print(node.layout)
<Layout (1500x800 @ 20,10)>
>>> del(node.margin_left)
>>> print(node.margin_left)
0
>>> print(node.layout)
<Layout (1500x800 @ 0,10)>

Child nodes can also be defined declaratively by providing the child nodes as arguments to the parent node at time of construction. The original example could have been defined as follows:

>>> node = CSSNode(
...     CSSNode(width=100, height=200),
...     CSSNode(width=300, height=150),
...     width=1000,
...     height=1000,
...     flex_direction=ROW
... )

Community

Colosseum is part of the BeeWare suite. You can talk to the community through:

Contributing

If you experience problems with Colosseum, log them on GitHub. If you want to contribute code, please fork the code and submit a pull request.

Acknowledgements

The algorithm and test suite for this library is a language port of CSS-layout project, open-sourced by Facebook.

Release History

Release History

History Node

0.1.6

History Node

0.1.5

History Node

0.1.4

History Node

0.1.3

History Node

0.1.2

This version
History Node

0.1.1

History Node

0.1.0

History Node

0.0.1

Download Files

Download Files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

File Name & Checksum SHA256 Checksum Help Version File Type Upload Date
colosseum-0.1.1-py2.py3-none-any.whl (13.4 kB) Copy SHA256 Checksum SHA256 py2.py3 Wheel Apr 18, 2015
colosseum-0.1.1.tar.gz (26.8 kB) Copy SHA256 Checksum SHA256 Source Apr 18, 2015

Supported By

WebFaction WebFaction Technical Writing Elastic Elastic Search Pingdom Pingdom Monitoring Dyn Dyn DNS Sentry Sentry Error Logging CloudAMQP CloudAMQP RabbitMQ Heroku Heroku PaaS Kabu Creative Kabu Creative UX & Design Fastly Fastly CDN DigiCert DigiCert EV Certificate Rackspace Rackspace Cloud Servers DreamHost DreamHost Log Hosting