Coming from 1.x

Orbit 2 changes one big thing: where size comes from. Everything else is smaller and mostly in your favor. You can move a layout over in a few minutes, or keep it exactly as it was with one line of CSS.

The 1.x source and README stay on GitHub, at the v1.6.0 tag.

Size comes from the universe

In 1.x every system was 500px across, whatever the size of its .bigbang. orbit-12 was always 500px wide, and to make a layout follow its container you called Orbit.resize().

In 2.0 the .bigbang is the universe and its box sets the size. The .gravity-spot reaches the shorter side of it (--o-force defaults to 100cqmin), so orbit-12 touches the edge and every ring is a fraction of the box. Layouts follow their container with no code.

Both previews below are the same ring in a 300px-tall frame. The first keeps the 1.x size with a fixed reach; the second is written for 2.0.

--o-force: 500px: the dashed orbit-12 is 500px across, larger than the frame, as in 1.x.
No --o-force: the dashed orbit-12 touches the edge of the frame, and orbit-7 lands where 1.x put orbit-4.

Two ways to move

Keep the 1.x size. Set the old reach back on your systems:

.gravity-spot { --o-force: 500px; }

Your layouts look exactly as before. Orbit.resize() still scales systems with a fixed px reach, so code that used it keeps working.

Adopt the new model. Remove --o-force and Orbit.resize(), then pick rings by their share of the space. If your 1.x layout sat in a box W px wide:

  • a ring orbit-N lands near orbit-(N × 500 / W),
  • a thickness ratio r lands near --o-size-ratio: r × 500 / W.

Round to the nearest lane; if that is visibly off, try the neighbor or nudge with --o-alignment in px. When every ring of a system scales the same way, set --o-size-ratio once on the .gravity-spot. Give auto-numbered .orbit rings an explicit number while you are at it, so the result does not depend on DOM order.

Text inside arcs keeps its font size, so on a smaller layout a label may no longer fit its arc. The console will tell you ([orbit] <o-arc> text "…" overflows its arc); widen the range, use range="auto", or move the ring out a lane.

Everything else

  • The universe. A .bigbang is square by default and a size container, so it is the containing block of position: fixed descendants. Directly in <body> it is capped at the viewport height instead of forced to it, so your own width and aspect-ratio apply.
  • Thickness. .satellite no longer resets --o-size-ratio, so a value set on its ring reaches it. shrink-N on a ring only changes how close it sits to the previous lane; it does not shrink what is on it.
  • Nested systems. Every .gravity-spot starts from the defaults, including ring spacing, so a shrink-N around a satellite does not leak into the system inside it.
  • Gaps and alignment. --o-gap cascades from the ring and the system. --o-aligment still works; --o-alignment is the right spelling.
  • Ranges. fit-range on a ring of arcs no longer makes the arcs overflow the range.
  • Styling. Satellites have no border by default. The reset, the default theme and theme-cyan count only their own class for specificity, so a single class of yours wins without !important, also inside a .capsule. dev-orbit combines with a theme.
  • Arcs and progress. They are placed with rotate instead of transform, so a transform of yours adds to it. Endings (rounded, arrow…) scale with the band. interactive makes the whole band clickable, transparent or not, and hit-width adds touch area. variant="stroke" draws a 2px line over a gray track by default.
  • New. range="auto" and text-anchor for arcs that fit their text, --o-dir-x / --o-dir-y on satellites, depth layers, Orbit.ready(), the o-rendered event, value and max as properties on arcs and progress (so [value] bindings redraw), and [orbit] messages in the console.
  • No !important. Utility classes (grow-*x, shrink-N, angle-N, ccw, fit-range, at-*, flip…) no longer use it. An inline style or a more specific rule of yours wins over them. In 1.x some of them could only be beaten with another !important; those still work, but you can drop them.
  • Renamed. from-1x … from-12x are now core-1 … core-12, so they don't read like from-N. The old names still work.
  • Fixed. angle-N on a .side points where it does on a satellite. Only real angle-N classes reset --o-from, not any class that contains "angle-". --o-color set on a ring or satellite gives it its own --o-color-* shades.