Satellite
Elements with .satellite are placed along an .orbit or .orbit-* path serving as content place and/or to nest .orbits using .gravity-spot. The runtime supports more than 60 satellites per orbit; the 60-item limit applies only to the CSS-only fallback.
Look and feel
Section titled “Look and feel”Satellites can be customized by adding CSS border and background properties.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust Satellite size
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Using satellites for nesting orbits
Section titled “Using satellites for nesting orbits”Satellites allow nest orbits to created complex radial designs. See orbit secction for more information.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjusting radial layout
Section titled “Adjusting radial layout”Arbitrary satellite angle.
Section titled “Arbitrary satellite angle.”.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Spin lock
Section titled “Spin lock”.spin-lock informs satellites to point at center of orbital path.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Relative satellite orbital position
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Add content to satellites
Section titled “Add content to satellites”Satellites are suitable to render different content.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
With .capsule
Section titled “With .capsule”If other content than characters is used, it is desirable to use .capsule element inside a .satellite. See capsule reference on documentation.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.