Policies and styles
For more information about policies and styles, refer to the policies and styles documentation.
For more information about template containers, refer to the Authoring page.
Responsive behavior
It’s important to keep in mind that the content author ultimately controls how many columns a component — core or custom — occupies within the responsive authoring grid containers.
Core components
The responsive behavior of core components is determined by responsive authoring. By default, core components scale proportionally to fill 100% of the width of their parent container.
Custom components
Currently, the responsive behavior of custom components should be developed using modern CSS, e.g.: flexbox and CSS grid, or the Bootstrap layout grid.
This can get confusing since the word “grid” is overloaded (layout grid vs responsive authoring grid). Think of this like Bootstrap’s nested grids. A custom component can be inserted into the 9-column responsive authoring grid container (outer grid), and the component will have its own 12-column layout grid (nested grid).
We plan to remove Bootstrap from the project in the future. In order to minimize tech debt, please only use Bootstrap in custom components when it is absolutely necessary.
Further reading
For more information on this topic, please see these references below.