This is a pre-production deployment of Warehouse, however changes made here WILL affect the production instance of PyPI.
Latest Version Dependencies status unknown Test status unknown Test coverage unknown
Project Description

An independent implementation of the CSS layout algorithm. This implementation is completely standalone - it isn’t dependent on a browser, and can be run over any box-like set of objects that need to be laid out on a page (either physical or virtual)

At present, the implementation is partial; only portions of the box and flexbox section of the specification are defined:

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

Colosseum provides a CSS class that allows you to define CSS properties, and apply them can be applied to any DOM-like tree of objects. There is no required base class; Colosseum will duck-type any object providing the required API. The simplest possible DOM node is the following:

class MyDOMNode:
def __init__(self, style):
self.parent = None self.children = [] self.style = style.apply(self)
def add(self, child):
self.children.append(child) child.parent = self

That is, a node must provide:

  • a parent attribute, declaring the parent in the DOM tree; the root of the DOM tree has a parent of None.
  • a children attribute, containing the list of DOM child nodes.
  • a style attribute, generated by calling apply() on a CSS declaration.

With that a compliant DOM node definition, you can then and query the layout that results:

>>> from colosseum import CSS, ROW, COLUMN
>>> node = MyDOMNode(style=CSS(width=1000, height=1000, flex_direction=ROW))
>>> node.add(MyDOMNode(style=CSS(width=100, height=200)))
>>> node.add(MyDOMNode(style=CSS(width=300, height=150)))
>>> layout = node.style.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.style.layout)
<Layout (100x200 @ 0,0)>
<Layout (300x150 @ 100,0)>

Requesting the layout attribute of the style attribute 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.style.flex_direction = COLUMN
>>> print(node.style.layout)
<Layout (1000x1000 @ 0,0)>
>>> for child in node.children:
...     print(child.style.layout)
<Layout (100x200 @ 0,0)>
<Layout (300x150 @ 0,200)>

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

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

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

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

Layout values are given relative to their parent node. If you want to know the absolute position of a node on the display canvas, you can request the origin attribute of the layout. This will give you the point on the canvas from which all the node’s attributes are measured. You can also request the absolute attribute of the layout, which will give you the position of the element on the entire canvas:

>>> node.style.set(margin_top=10, margin_left=20)
>>> print(node.style.layout)
<Layout (1500x800 @ 20,10)>
>>> for child in node.children:
...     print(child.style.layout)
<Layout (100x200 @ 0,0)>
<Layout (300x150 @ 0,200)>
>>> print(node.style.layout.origin)
<Point (0,0)>
>>> for child in node.children:
...     print(child.style.layout.origin)
<Point (20,10)>
<Point (20,10)>
>>> print(node.style.layout.absolute)
<Point (20,10)>
>>> for child in node.children:
...     print(child.style.layout.absolute)
<Point (20,10)>
<Point (20,210)>

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

0.1.3

This version

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.1.2

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.1.1

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.1.0

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.0.1

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

Download Files

Download Files

TODO: Brief introduction on what you do with files - including link to relevant help section.

File Name & Checksum SHA256 Checksum Help Version File Type Upload Date
colosseum-0.1.3-py3-none-any.whl (16.1 kB) Copy SHA256 Checksum SHA256 py3 Wheel Sep 20, 2016
colosseum-0.1.3.tar.gz (31.0 kB) Copy SHA256 Checksum SHA256 Source Sep 20, 2016

Supported By

WebFaction WebFaction Technical Writing Elastic Elastic Search Pingdom Pingdom Monitoring Dyn Dyn DNS HPE HPE Development 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