Using Layouts to Structure Websites and Pages

Using Layouts

Each website in Brick River is defined by a beautifully simple site record. Each site uses layouts and pages to create static and dynamic content - as well as the design and style of the site. Layouts contain HTML and razor code to render design and content elements that will be added to the pages using that layout. Layouts can be created and managed using the site layouts link on the site's menu. 

Step 1 - Create a New Layout

  1. On the Site menu, click the Site Layouts link. Click the Create a new layout button.

  2. Enter the details of the layout as follows:

    1. Name: Enter the layout name.
    2. Websites: Select the websites that may use the layout. Our example selects the New Site created in the previous step.  
    3. Layout: Select a parent layout - (optional). Layouts may inherit parent layouts, which may inherit parent layouts, and on.
    4. Code Editor: Your poetry goes here. Our example uses a simple HTML block. Any page that uses this layout will display our poetic statement. Real layouts have real HTML, CSS, JS, and C#.
  3. Save and Publish the layout. Click Return to go back to the 'Your Website Layouts' window. 
  4. Click on the Layout Name to edit the layout.

Step 2 - Designing with Layouts

Brick River layouts provide flexible design tools that can be used in different ways in different design scenarios. The simple example above demonstrates the minimum requirements to set up a basic site ( a website, a layout with minimal content)

A real-world site will almost certainly use nested parent and child layouts to render site pages. A site may use a parent layout to control elements such as header, footer and navbar elements that will appear on every page - combined with multiple child layouts which styles the various columns, grids, sidebars, and carousels featured on individual pages.

The inheritance of code from parent layout to child layout to page requires the use of the RenderBody() Helper. The following screenshots demonstrate this inheritance.

Page Source

This page links to the Layout:  mainpage

Child Layout

  1. The mainpage layout includes a RenderBody() Helper - this will be replaced by the page code. This layout styles the content of the page using the classes: row, col-sm-12, and well. 
  2. The Name  mainpage is linked to a parent Layout: root.

Parent Layout

  1. The root Layout includes a RenderBody() Helper - this will be replaced by the mainpage layout code. This layout creates a navigation bar with four links and styles the mainpage layout content with the container class. In a nutshell - when a web browser displays a Brick River Page it displays a page, wrapped by a layout, wrapped by another layout, possibly wrapped by additional layouts.  

Step 3 - Using RenderSection() and RenderSection("Head")

  • Additional editable areas can be added to layouts using the RenderSection("section name") Helper.
  • The parent layout of the page should include the HTML <Head> tag. Include RenderSection("Head") in this area to allow child layouts to add additional content to the final <Head> content.
  • Our BRT Helpers are used in layouts (and pages too).
  • Putting it all together, if you review and understand our nested layouts example - then you are ready to learn where and how to use our BRT Helpers( Link of BRT Helpers) to drive dynamic content to your site's pages.