Part of the Introduction to Component Library series.
Layout Definitions
Watch the Component Library Layout Definitions video here.
A layout is the markup that provides the structure into which components can be arranged.
Similar to component definitions, you put placeholders into the markup to designate the “slots” into which components can be placed.
Layout definitions don’t get generated into anything else but are used in the template and nav wrapper definitions.
Layout definitions are created in the Layout Definitions folder using the File > New > Layout model.
The slots are indicated by using braces or curly brackets and must have the syntax “col n”, where n can be the digits 1 to 4.
Although 4 slots doesn’t sounds like very many, multiple components can be placed in a slot so if you find you have a layout that needs more than 4 slots, you may want to reconsider the design and encapsulate the complexity directly into a component.
When multiple components are targeted in a slot, the markup from each component will appear sequentially.
Component Library ships with one standard layout — the “no rail” layout. No rail has no markup other than a single slot placeholder.
Here is an example of a two column layout that uses Bootstrap to create a wide left column and a narrow right column. Note: you do not have to use Bootstrap in your layout definitions, this is being used for illustration purposes only.
Prev: Component Definitions
Next: Nav Wrapper Definitions
