Skip to main content

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
left, right, top, bottom number
margin, marginLeft, marginRight, marginTop, marginBottom number
padding, paddingLeft, paddingRight, paddingTop, paddingBottom positive number
borderWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth positive number
flexDirection "column", "row"
justifyContent "flex-start", "center", "flex-end", "space-between", "space-around"
alignItems, alignSelf "flex-start", "center", "flex-end", "stretch"
flex positive number
flexWrap "wrap", "nowrap"
position "relative", "absolute"

Quickstart

In your virtualenv, install Colosseum:

$ pip install colosseum

Then, you can instantiate CSS nodes, and query the layout that results:

>>> from colosseum import CSSNode
>>> node = CSSNode(width=1000, height=1000, flexDirection='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” flexBox, rather than a “row” flexBox, you’ll see the coordinates of the child boxes update to reflect a vertical, rather than horizontal layout:

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

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.

Project details


Release history Release notifications

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

History Node

0.1.1

History Node

0.1.0

This version
History Node

0.0.1

Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
colosseum-0.0.1-py2.py3-none-any.whl (12.5 kB) Copy SHA256 hash SHA256 Wheel py2.py3 Mar 29, 2015
colosseum-0.0.1.tar.gz (23.4 kB) Copy SHA256 hash SHA256 Source None Mar 29, 2015

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page