.gravity-spot CSS class

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 extension

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.



.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.tiny .orbit{
border-color: var(--o-purple);
}
.tiniest .orbit{
border-color: var(--o-orange);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot tiny " style="--o-force:200px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>

  </div>
  <div class="gravity-spot tiniest" style="--o-force:100px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>

  </div>
</div>

.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.tiny .orbit{
border-color: var(--o-purple);
}
.tiniest .orbit{
border-color: var(--o-orange);
}

Adjust inner radial layout

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



.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.from-4x .orbit{
border-color: var(--o-purple);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot from-4x">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>

  </div>
</div>

.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.from-4x .orbit{
border-color: var(--o-purple);
}

Nested structure

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



.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.satellite {
background-color: var(--o-cyan-light);
border: none;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit"></div>
    <div class="orbit">
      <div class="satellite">
        <div class="gravity-spot"> <!-- Nested example -->
          <div class="orbit"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}
.satellite {
background-color: var(--o-cyan-light);
border: none;
}

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.



.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot at-center" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-center-left" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-center-right" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-bottom" style="--o-force:300px">
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-bottom-left" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-bottom-right" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
    <div class="gravity-spot at-top" style="--o-force:300px">
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
    <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-top-left" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
  <div class="gravity-spot at-top-right" style="--o-force:300px">
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
   <div class="orbit"></div>
  </div>
</div>

.orbit {
border-color: var(--o-cyan);
border-width: 1px;
}