How Orbit thinks

Every Orbit layout is a tiny universe. Once the four words in this page click, the rest of Orbit is details.

The universe

A .bigbang is the universe: the space your layout lives in. It is square by default, as wide as its parent, and a parent with a height keeps it from growing taller. Its box is the only size you ever set.

Inside it, a .gravity-spot is the center. Its gravity reaches as far as the shorter side of the universe, and that reach is split into 12 lanes. orbit-12 touches the edge, orbit-6 is halfway, orbit-1 hugs the center.

The light area is the universe. The preview is wider than it is tall, so the shorter side, 300px, sets the reach. There is also orbit-0, the center itself, and orbit-13 to orbit-24 past the edge, for things that should stick out.

Things on the lanes

Rings hold things. A .satellite carries your content in a .capsule; Orbit spreads all the satellites of a ring evenly around it, and the capsule keeps the content upright wherever it ends up.

Every element on a ring is one lane thick. A satellite on orbit-8 is a circle one lane across. To make things bigger or smaller, set --o-size-ratio, counted in lanes, on the element, on its ring or on the whole .gravity-spot:

An element on orbit-N reaches half its thickness past lane N, so a band two lanes thick on orbit-11 ends exactly at the edge.

One box, any size

Because every ring, satellite and band is a fraction of the universe, a layout scales as one piece. You do not write breakpoints for it, and you do not call anything. Drag the corner of the dotted box:

If you need a fixed size instead, give the reach a length on the .gravity-spot: --o-force: 400px.

Universes inside universes

A satellite is a universe too. Put a .gravity-spot inside one and its reach is the satellite's edge, like a moon system around a planet. Every .gravity-spot starts from the defaults, so the inner system does not inherit sizes or angles from the outer one.

Each planet is a satellite of the sun's orbit-8, five lanes thick. Inside it, a whole new system: the planet in its center and its moons on its own orbit-10, measured against the planet's satellite, not against the page.

Angles

Angles start at the top and grow clockwise. --o-range is how much of the circle a ring uses and --o-from where it starts. A speedometer is a ring that uses 240° and starts at 240°, so its gap sits at the bottom:

Without value, sibling arcs share the ring equally. fit-range puts the first and last tick on the two ends of the range instead of leaving a step at the end. Classes like range-240, from-240 and ccw cover the usual values.

Which way is out

Each satellite also knows where it sits: --o-dir-x and --o-dir-y are its direction from the center, from -1 to 1 (y grows down). Use them to hang labels outward, here above the satellites of the upper half and below the rest:

The whole map

.bigbang                          the universe: its box sets the size
└── .gravity-spot                 the center; reaches the shorter side
    ├── .orbit-N                  a lane, N twelfths of the way out
    │   ├── .satellite > .capsule ← your content
    │   ├── .vector · .side       rays and chords
    │   └── <o-arc> · <o-progress>
    └── .orbit-M …

Rings are direct children of a .gravity-spot, never of another ring.
A ring holds only .satellite, .vector, .side, <o-arc> and <o-progress>.
Content goes in a .capsule inside a .satellite. Centered content goes in .orbit-0 > .satellite.at-center > .capsule.

Add dev-orbit to the .bigbang while you build: it draws the lanes, outlines anything in the wrong place and explains it in the console. More in Visual aids.