Gravity-spot
The .gravity-spot CSS class serves as a container for organizing Orbit elements within a radial layout. It is fundamental in every Orbit project, acting as the parent container for all other Orbit elements.
Gravity-spot width
Section titled “Gravity-spot width”By default, .gravity-spot extends 500px, influencing its child elements’ dimensions. For instance, .orbit-12 will have a 500px diameter. To adjust this, directly modify the --o-force CSS custom variable either inline or through custom CSS classes. It’s important to note that each usage of .gravity-spot resets to default values, so modify the --o-force property within the .gravity-spot class for persistent changes.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust inner radial layout
Section titled “Adjust inner radial layout”.from-*x: Set initial orbit size from 1x to 12x. It acts as initial offset .
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Nested structure
Section titled “Nested structure”.gravity-spot can be nested within .satellite elements, allowing for the creation of intricate radial layouts.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Gravity-spot children aligment.
Section titled “Gravity-spot children aligment.”.gravity-spot place its children element at center. This behavior can be altered using alignment utility classes such as .at-center (default), .at-center-left, .at-center-right, .at-top, .at-top-left, .at-top-right, .at-bottom, .at-bottom-left, and .at-bottom-right.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.