Satellite
Elements with .satellite are placed along an .orbit or .orbit-* path serving as content place and/or to nest .orbits using .gravity-spot. By default, up to 60 satellites can be placed in an orbit.
Look and feel
Satellites can be customized by adding CSS border and background properties.
In addition, a few set of CSS shapes utilities are provided (.circle, .box, .rounded-box). Nevertheless, users can set any shapes using svg, images, etc.
Adjust Satellite size
Each .satellite has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the satellite to shrink by a specified percentage.
On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing the satellite to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.
Using satellites for nesting orbits
Satellites allow nest orbits to created complex radial designs. See orbit secction for more information.
Adjusting radial layout
Arbitrary satellite angle.
.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Spin lock
.spin-lock informs satellites to point at center of orbital path.
Relative satellite orbital position
By default, .satellite is positioned in the middle of orbit path. To change that, there some CSS utilities:
.inner-orbit: To place an.satellite just below its orbit.
.outer-orbit: To place .satellite just above its orbit.
.quarter-inner-orbit: To place .satellite a 25% into its orbit.
.quarter-outer-orbit: To place .satellite a 25% outer its orbit.
Add content to satellites
Satellites are suitable to render different content.
With .capsule
If other content than characters is used, it is desirable to use .capsule element inside a .satellite. See capsule reference on documentation.