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

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.

Note

For responsive designs, consider using the optional Orbit.resize() JavaScript function, which adjusts --o-force dynamically when the parent element of .gravity-spot is resized.

HTML

CSS

Adjust inner radial layout

.from-*x: Set initial orbit size from 1x to 12x. It acts as initial offset .

HTML

CSS

Nested structure

.gravity-spot can be nested within .satellite elements, allowing for the creation of intricate radial layouts.

HTML

CSS

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.

HTML

CSS