HTML on circles.
Orbit is a CSS layout system for things that grow around a center: gauges, dials, knobs, radial menus, donut charts, watch faces. You write plain HTML with a few classes. Orbit does the trigonometry.
npm install @zumer/orbit
A small solar system
Orbit borrows its words from the sky. It sounds like a gimmick for about a minute. After that it is the easiest way to remember what each piece does.
.bigbangThe universe. Its box is the only size you set.
.gravity-spotThe center. Its gravity reaches the edge of the universe.
.orbit-1….orbit-12Twelve lanes from the center out to that edge.
.satelliteTravels a lane. Orbit spreads them around it and keeps your content upright.
Start somewhere
- How Orbit thinksThe model in one page, with live examples. Read this first.
- Build a knobFrom an empty box to a control you can drag, step by step.
- ExamplesFull pages with live controls, and small layouts to copy: gauges, a radar, watches, depth in 3D.
- Orbit KitReady-made gauges, donuts, knobs and clocks, one tag each.
- Coming from 1.xWhat changed in 2.0, and one line to keep everything as it was.
Orbit is open source under the MIT license, made by Zumerlab. If it saves you time, you can sponsor its development. Using Orbit 1.x? Coming from 1.x shows what changed.