.bigbang CSS class

The .bigbang CSS class is a container for Orbit Apps, serving as a foundation for your project. By default, it occupies all available space and centers its content. However, you can use CSS utilities to adjust the alignment as needed. This class is recommended as the starting point for every Orbit project.

For more control, wrap .bigbang in a parent element with defined width and height.

Bigbang extension

By default, .bigbang extends to 100% of available space. To restrict its extension, wrap it in a parent element with a defined width and height.

Bigbang as direct child of <body>.


.bigbang {
background-color: var(--o-cyan-lighter)
}

HTML
CSS

<div class="bigbang">
</div>

.bigbang {
background-color: var(--o-cyan-lighter)
}

Bigbang within a wrapper element.



.wrapper {
border: 3px dotted var(--o-purple);
height: 200px;
width: 200px;
}

.bigbang {
background-color: var(--o-cyan-lighter)
}

HTML
CSS

<div class="wrapper">
  <div class="bigbang">
  </div>
</div>

.wrapper {
border: 3px dotted var(--o-purple);
height: 200px;
width: 200px;
}

.bigbang {
background-color: var(--o-cyan-lighter)
}

Bigbang inner aligment.

.bigbang 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.



.wrapper {
border: 1px dotted var(--o-purple);
height: 100px;
width: 100px;
float: left;
overflow: hidden;
margin: 5px;
}

.bigbang {
background-color: var(--o-cyan-lighter)
}
.orbit {
border: 1px dotted var(--o-cyan)
}

HTML
CSS

<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-center-left">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-center-right">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-top-left">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-top">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-top-right">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-bottom-left">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-bottom">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang at-bottom-right">
    <div class="gravity-spot">
      <div class="orbit"></div>
      <div class="orbit"></div>
    </div>
  </div>
</div>

.wrapper {
border: 1px dotted var(--o-purple);
height: 100px;
width: 100px;
float: left;
overflow: hidden;
margin: 5px;
}

.bigbang {
background-color: var(--o-cyan-lighter)
}
.orbit {
border: 1px dotted var(--o-cyan)
}