The "Open Cph" Starter Site (Razor) comes with a set of predefined Razor-based page layout templates.

There are 5 templates on the starter websites used by pages:

• Frontpage
• OneColumnFullWidth
• ThreeColumns
• TwoColumnsContentAside
• TwoColumnsNavigationContent

Although all the templates share some content, layout and functionality via the Master Layout, individually they differ in the number of columns their content part is presented in (1, 2, or 3 columns).

Each template consists of a number of manageable logical parts, or sections, represented by specific components: page template features, content placeholders and CMS Functions - inserted in their markup.

To edit the content and/or markup of a section, you need to know what component is used to render it and where you can find it.

Let's have an overview of a 3-column layout, which might serve as a generic page layout for the Open Cph Starter Site. The 1- and 2-column based layouts can be considered variation of the 3-column layout where 1 column ("Navigation Column" or "Aside" sections) or 2 columns ("Navigation Column" and "Aside" sections) are not included.

As you can see above, some sections of the layout are defined in the Master Layout. The other sections are defined in corresponding templates.

(Click the link above in the section you are interested in to quickly open the description of the component used there.)

For their sections, both the Master Layout and the templates use the combination of:

• Page template features
• Content placeholders
• CMS Functions

Twitter Bootstrap Layout Styles

Each template is based on the Twitter Bootstrap framework and thus uses its style classes to lay out the content in the templates.

The content part of the templates can be split into "rows" and each "row "- into 12 "cells" at maximum or 1 "cell" at minimum. Normally, you use a combination of these cells to create wider "cells", or "columns" within one row.

Hence, the content part of the Open Cph Razor template is split within a div element of the "row" class into 1, 2 or 3 div elements of the "spanN" classes, where ''N" stands for the number between 1 and 12 to indicate how may "cells" to include in the column.

In the following example, the content part will be span over 3 columns with the same width ('span4'):

<div class="row">
  <div class="span4"></div>
  <div class="span4"></div>
  <div class="span4"></div>
</div>

The templates the Open Cph Starter Site (Razor) uses are 1-, 2-, or 3-column.