Orbit (class)
The .orbit CSS class, along with variations from .orbit-0 to .orbit-24, defines a circular path around a .gravity-spot. Within .orbit element, various Orbit elements such as satellites, o-arcs, o-progress, vectors and sides can be positioned.
Look and feel
Orbits are initially invisible but can be customized by adding CSS border and background properties.
Number of orbits
Orbit supports 25 orbits. Orbits from 0 to 12 are placed whitin .gravity-spot force, while orbits from 13 to 24 extend beyond .gravity-spot force boundary.
.orbit-0has not size and it is placed at center of.gravity-spot.- Orbits from 0 to 12 are placed within
.gravity-spotforce, that is500pxby default but can be easily changed using--o-forcecustom CSS var. - Orbits from 13 to 24 are situated beyond
.gravity-spotforce.
Orbit size
Each .orbit has a fraction size of .gravity-spot force. For example, .orbit-6 (or .orbit child number 6), represents 50% of .gravity-spot force.
Here is the complete list:
| .orbit number | fraction size |
|---|---|
.orbit-0 | 0% |
.orbit-1 or .orbit child 1 | ~8% |
.orbit-2 or .orbit child 2 | ~16% |
.orbit-3 or .orbit child 3 | 25% |
.orbit-4 or .orbit child 4 | ~33% |
.orbit-5 or .orbit child 5 | ~42% |
.orbit-6 or .orbit child 6 | 50% |
.orbit-7 or .orbit child 7 | ~58% |
.orbit-8 or .orbit child 8 | ~66% |
.orbit-9 or .orbit child 9 | ~75% |
.orbit-10 or .orbit child 10 | ~83% |
.orbit-11 or .orbit child 11 | ~91% |
.orbit-12 or .orbit child 12 | 100% |
.orbit-13 or .orbit child 13 | ~108% |
.orbit-14 or .orbit child 14 | ~116% |
.orbit-15 or .orbit child 15 | 125% |
.orbit-16 or .orbit child 16 | ~133% |
.orbit-17 or .orbit child 17 | ~142% |
.orbit-18 or .orbit child 18 | 150% |
.orbit-19 or .orbit child 19 | ~158% |
.orbit-20 or .orbit child 20 | ~166% |
.orbit-21 or .orbit child 21 | ~175% |
.orbit-22 or .orbit child 22 | ~183% |
.orbit-23 or .orbit child 23 | ~191% |
.orbit-24 or .orbit child 24 | 200% |
Adjust orbit size
Each .orbit or .orbit-* can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the orbit to shrink by a specified percentage.
Orbit stacking order
Stacking order follows standard HTML rules. In the example below, the latter orbit is abowe the former one.
Elliptical orbits
Turn Orbits into ellipses: Two CSS variables (--o-ellipse-x and --o-ellipse-y) can transform .orbit or .orbit-* into an ellipse shape. This transformation affects the orbit and its children, excluding o-arc, o-progress, and o-text web components, which remain hidden when the orbit is elliptical. Values for these variables range from 0 to 1. A CSS utlity could be added in a future.
Both CSS variable can be used in the same orbit.
Orbits aligment
By default, orbits are aligned at .gravity-spot center but remember there are some CSS utilities class to change aligment. You can use .at-center (default), .at-center-left, .at-center-right, .at-top, .at-top-left, .at-top-right, .at-bottom, .at-bottom-left, .at-bottom-right.
Nesting orbits
This example shows how to nest orbits to created complex radial designs.
Distribution of orbit children elements
By default, these Orbit elements are evenly distributed along the perimeter of .orbit. For instance, if there are five satellites, they will be spaced 72 degrees apart, covering the full 360-degree range of .orbit. The zero degree of Orbit is positioned similar to the 12 o’clock mark on an analog clock.
Adjusting radial layout
Range.
.range-*: Set arbitrary orbit range from 0 to 360 length. If custom range is defined, .fit-range could be added to justify children distribution.
Starting angle.
.from-*: Set starting point angle from 0 to 360 degrees.
Invert direction
.ccw: Invert orbit child arragement to counter clock wise direction.
Add gooey effect.
.gooey-fx-*: This CSS utility enhances the appearance of grouped and sticky child elements within the orbit. Possible values are .gooey-fx, .gooey-fx-medium, and .gooey-fx-max