Bigbang

Every Orbit layout starts with a big bang. The .bigbang creates the universe your system lives in, and its box is the only size you set: every ring, satellite and band inside is a fraction of it.

How big it is

A .bigbang is as wide as its parent and square by default. A parent with a definite height caps it, so in a wide, short container it becomes a wide, short box, and the system inside takes the shorter side.

• To size it, give the .bigbang or its parent a width. Your own width, height or aspect-ratio always win, because the defaults have zero specificity.
• Directly inside <body> it is capped at the viewport height. The previews on this site are pages like that, which is why the universe above is as tall as the frame.
• It is a size container: the .gravity-spot inside measures it with container query units. It is also the containing block of position: fixed descendants.
• A .bigbang with no width or height draws nothing, and the console says so with an [orbit] message.

Drag the corner of the dotted box. The system follows with no JavaScript: make the box wide and short and it takes the height, tall and narrow and it takes the width.

Moving the center

The universe centers its system. An alignment class on the .bigbang puts the center on an edge or a corner of the box instead, so only part of the system shows. It is the quick way to a quarter dial in a corner or a half gauge along an edge.

A universe inside a system

A .bigbang placed directly in a .gravity-spot takes the reach of that system instead of measuring its own box. That is how a whole system becomes one layer of a depth stack.

Reference