Orbit (class)
The .orbit CSS class, along with explicit integer classes such as .orbit-0, .orbit-6 and .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
Section titled “Look and feel”Orbits are initially invisible but can be customized by adding CSS border and background properties.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Number of orbits
Section titled “Number of orbits”Orbit supports automatic .orbit numbering and explicit nonnegative integer ring levels. Levels 0 to 12 lie within the base --o-force diameter; higher levels extend beyond it. The JavaScript runtime supports more than 24 levels and more than 60 children per type. Those limits apply only to the static CSS fallback.
.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 onward are situated beyond
.gravity-spotforce.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Orbit size
Section titled “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
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Orbit stacking order
Section titled “Orbit stacking order”Stacking order follows standard HTML rules. In the example below, the latter orbit is abowe the former one.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Elliptical orbits
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Orbits aligment
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Nesting orbits
Section titled “Nesting orbits”This example shows how to nest orbits to created complex radial designs.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Distribution of orbit children elements
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjusting radial layout
Section titled “Adjusting radial layout”Range.
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Starting angle.
Section titled “Starting angle.”.from-*: Set starting point angle from 0 to 360 degrees.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Invert direction
Section titled “Invert direction”.ccw: Invert orbit child arragement to counter clock wise direction.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Add gooey effect.
Section titled “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
Examples include the current Orbit stylesheet and runtime. Get both files for your project.