Containers
Containers is the name given to components that are generally designed to contain other components. These are further divided into groups that define where these items are typically used within a page structure, although these decisions can be changed by the implementing team by modifying the CSS / LESS implementation, and by adding additional classes to create specialized versions of these renderings. Also, the list can be supplemented by adding new renderings for specific tenant websites or for the enterprise.
Why?
What distinguishes each type of container is the placeholder keys and key strategy for each type. This allows you to control how the renderings are used by the editor.
In Twitter Bootstrap, these renderings constitute a container with a single nested row - based on the grid structure that is selected for the project. This is determined by the CSS mix-ins you utilize. Since these containers usually impose left and right margins to these structures, a single Wide Screen container is added for content you wish to span the width of the screen.
Page layout renderings utilize a placeholder key strategy that is based on purpose, not positional. Key values used are values such as Side, Main, Side2 and Main2. This strategy is deployed throughout this set of renderings to assist in rendering compatibility and transformations.
Unlike Inner Structural renderings, these renderings are not allowed to nest within one another. Instead, they are usually only allowed to be added to the page.
In Twitter Bootstrap, these renderings constitute a row - based on the grid structure that is selected for the project. This is determined by the CSS mix-ins you utilize.
The exception is the variable width column renderings. These renderings to not actually create a bootstrap row.
In order to make these renderings flexible to adapt to any grid structure, these renderings do not use the standard Bootstrap row and column syntax, rather mix-ins compiled into the CSS are used to determine how each rendering maps to the grid structure for a specific tenant website using SCORE.
Inner structure renderings utilize a placeholder key strategy that is positional. Key values used are values such as left, right, center, and center2. This strategy is deployed throughout this set of renderings to assist in rendering compatibility and transformations.
Page layout and structural containers are not hard-coded to a specific grid structure. Instead, BrainJocks utilizes mixins to allow each tenant to determine the shape of each rendering. See Pre-requisites for more information.