Razor Page Layouts

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.

'brand' (link)Main Navigation (feature)Service Menu (feature)
Content Start (feature), or Front Page Content Start (feature)
HeroUnit (placeholder) or Hero Unit (default) (feature) via Layout.HeroUnit (function)
Navigation Column (feature)Content (placeholder)Aside (placeholder)
Aside Column (feature)
Content Footer (feature)
Page Footer (feature)
     the section defined in the Master Layout
      the section defined in a derived template

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:

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>

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

TemplateNumber of columnsspan classes in use
Frontpage2span8, span4
ThreeColumns3span3, span5, span4
TwoColumnsContentAside2span8, span3
TwoColumnsNavigationContent2span3, span8