Visual aids

Add dev-orbit to a .bigbang while you build. It draws the gravity spot, the rings and the satellites with dashed red lines, outlines anything in the wrong place, and explains it in the console.

It changes how things look, never where they are, so you can switch it on and off freely. It combines with a theme on the same element. Themes shows a full layout with it on.

Wrong children of a gravity spot

A .gravity-spot holds rings (.orbit, .orbit-N) and nested gravity spots, nothing else. If it holds anything else, the whole system is dimmed and a warning sign pulses at its center. Here a satellite sits directly in the gravity spot:

Wrong children of a satellite or a ring

A .satellite holds a .capsule or a nested .gravity-spot. With anything else in it, it gets an orange dotted border and the console names the element. A ring nested in another ring is outlined the same way. This example logs on purpose:

[orbit] <div .orbit-10> sits directly in a .satellite. Put content in a .capsule so it stays upright and centered.

Content placed directly in a ring, instead of in a .satellite, is not outlined, but the console reports it. The full list of messages and their fixes is on the install page.

The outlines use :has(). In a browser without it you still get the console messages. The pulsing sign stops when the user prefers reduced motion.

Arcs on ellipses

<o-arc> and <o-progress> are drawn on circles only. On a ring stretched into an ellipse with --o-ellipse-x or --o-ellipse-y, they are hidden, and the console says so. Satellites and vectors follow the ellipse; sides do not. See Orbits.