Orbit offers options for developing clear layouts in a systematic way that fits the Orbit system.
There are a few different components that offer specific possibilities.
To see which component is right for you, try out this interactive decision tree.
The reasons for the recommendations are below.
Each of the five basic layout components has specific cases where it’s used:
|Layout||Fixed page layouts|
|Grid||General screen layout (including modals)|
|Box||Component layout, positioning,spacing, visual style (universal building block for layouts)|
|Stack||For single-direction groups of components |
- Adds space between elements horizontally or vertically
- Can be a column
- Container can be inline
- Offers more options for each direction (between & around in justify and stretch in align)
- More flex options: shrink, grow, basis
- Option for wrap or no wrap
|Inline||For groups of components that could go in both directions|
- Adds space between elements horizontally and vertically
- Can’t force a column
- Container can’t be inline (only contents)
- Always wraps
For laying out everything on a screen there are two basic options:
The Layout component offers three basic options for columns.
These can be slightly customized in terms of when they appear.
But the basic format is set.
Grids offer more flexibility in laying out your screens.
It lets you set up rows and columns for your screens
that can change based on screen size and media queries.
There are many more options that you have to set.
To build your screens, Orbit offers the basic building block of a box.
It provides a range of options on position, layout, spacing, and visuals.
Use it within your page layout to get your components exactly where you want them.
The many options available offer you freedom for your layouts.
But it also means you have more things you need to set.
Boxes work well for positioning and providing spacing
for both individual and groups of components.
In addition to boxes,
there are two components that offer consistent spacing for groups of components:
Stacks work when you want to focus on a group of components laid out in a single direction.
The direction can be either horizontal or vertical
and there are lots of options for the components to fit into the space.
In all cases, there is consistent spacing in a single direction.
Inline components give you consistent spacing both horizontally and vertically.
They work for sets of components that might span multiple lines.
There are fewer options for fitting the components into the space,
but there is consistent spacing in two directions.