How to Build a Website in Brick River

How to build a website in Brick River

You can use Brick River to design single or multiple websites. You can also design your layouts and pages and share them across multiple sites.

Each website in Brick River is defined by a 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.

If you are new to Brick River and starting from scratch, it’s a good idea to create a test site to experiment with Pages, Layouts, and Views. The steps to build a website in Brick River are as follows:

  1. Create a site
  2. Add a code snippet
  3. Add to link to css.css
  4. Add a container div tag
  5. Create different types of layouts
    1. Inner layout with two columns
    2. Wide layout
    3. Homepage layout
  6. Set the default layout
  7. Create a CSS file
  8. Design web pages
    1. Home Page
    2. About page
    3. News Page
    4. News Details Page
    5. Events Page
    6. Events Details Page

Create a Site

  1. On the main menu, click Site->My Websites. You will see a list of websites.
  2. Click New and enter the information as follows. 
    1. Name: Enter a name.
    2. Short Name: Enter a short string of characters with no spaces.
    3. Guest User Identity: Choose Guest Guest. This will be the identity for un-authenticated visitors.
    4. Default Layout: Choose a layout, if you want each page of your site to link to a Layout. If no Layouts are yet available, leave this blank.
    5. Make inactive: You can toggle this button to inactive if you want your site to be de-activated to prevent the site URL from rendering the site in a browser.
  3. Click Save to save the information. For each site, Brick River presents a Sitemap with a collapsible tree view of the site's pages.  In order to view the Sitemap at least one Layout must be linked to the site.  Attempting to view the homepage prior to creating and linking a layout will lead to a 'layout required' prompt.

Add a code snippet

  1. On the main menu, click Site-> Site Layouts. The list of Layouts are displayed.
  2. Click Create a new layout. Enter the name of the layout called Root. So, this is the base layout.
  3. Click Snippets to add a code snippet.
  4. In the Search field, enter root layout which is the name of the snippet. Click on the snippet and it is automatically loaded into the editor. It looks like a bootstrap starter layout. The Root layout includes items such as “page title” and sections in the “base render body”.
  1. Enter the following code to make a reference to a style sheet in the files section of the Brick River system. <link href="/files/content/www/assets/css.css" rel="stylesheet">.

Add a container div tag

  1. Put a container tag. <div class="container"></div>
  2. The @RenderBody() is the default tag or helper which is used when you are editing the webpages to put in content.
  3. Once you have made the necessary changes, click Publish.

Create different types of layouts

The next step is to create different types of layouts which can be used while creating a website. Let us look at them in detail. 

Inner Layout with two columns( Main Area and Sidebar)

  1. On the main menu, click Site->Site layouts.
  2. Click create a new Layout.
  3. In the Name field, enter Inner - Two Column.
  4. In the Websites drop-down, select the website.
  5. In the Layout drop-down, select the Root layout.
  6. In the editor field, enter the code for the layout as shown below. 
    1. <h1 class="page-title">@Title</h1>: This shows the title of the page. It is going to help you to put content into it.
    2. @RenderSection("sidebarextra"): This allows you to make an infinite number of sections with layouts.
    3. @BRT.BreadCrumb(): Click on the Snippets button to add the breadcrumb snippet.
    4. @BRT.SiteMenu(): This shows the current, parent, child, and sibling pages. You can add this by using the Snippets button.
  7. Once you have made all the changes, click Save and Publish.

Wide Layout

This layout can be used for your calendar.

  1. On the main menu, click Site->Site layouts.
  2. Click create a new Layout.
  3. In the Name field, enter Wide.
  4. In the Websites drop-down, select the website.
  5. In the Layout drop-down, select the Root layout.
  6. In the editor field, enter the code for the layout as shown below. This code uses the breadcrumb and the body in a box.
    1. @BRT.BreadCrumb(): Click on the Snippets button to add the breadcrumb snippet.
  7. Once you have made all the changes, click Save and Publish.

Home Page Layout

  1. On the main menu, click Site->Site layouts.
  2. Click create a new Layout.
  3. In the Name field, enter Homepage.
  4. In the Websites drop-down, select the website.
  5. In the Layout drop-down, select the Root layout.
  6. In the editor field, enter the code for the layout as shown below.

Set the default layout

While creating a website, you can choose a default layout, so that each page of your website can link to that layout.

  1. On the main menu, click Site->My Websites. You will see a list of websites.
  2. Click on the Demo website.
  3. In the Layout drop-down, select Inner – Two Columns, so that each page of your site will link to this Layout.

Create the CSS file

The next step is to create a CSS file for the website.

  1. On the main menu, click Files. The list of files in the system is displayed.
  2. Click content->Demo->assets. The CSS file is displayed. You can also create a new one if required. In this tutorial, let’s edit the CSS file.

  3. Click Edit contents and enter the code as shown below.

Design Web pages

Now, we will create different types of webpages with images and content for your website. The first one is the Homepage.

Home Page

  1. On the main menu, click Site->Demo to view the list of pages.
  2. Click Homepage->Edit to edit the webpage.
  3. On the top right, in the Layout drop-down, choose the HomePage layout.
  4. Click on the Show editable sections arrow in the WYSIWYG editor to view the editable areas.

  5. Click Insert and Size images to add a picture.

  6. You can upload an image or browse the server for images. You can also align the picture, adjust the width and height and crop it as required. Click Save. 

  7. Once you have uploaded the image, enter the required content. You can also format the content as required.

  8. Click Save and Publish. Changes to pages can be saved - but changes will not be rendered and visible in a browser until the Page is published. Publishing a Page will automatically save any changes made since the last save.  

About Page

In this step, we are going to add a new page, add content and a picture to the new page.

  1. Once you have finished creating the Homepage, on the top right corner, click Sitemap.
  2. Click Homepage->New Page to add a new webpage. The new page link creates a page as a child page of the current page. Use the link on the Homepage level to create the Site's highest level parent pages - and links on those pages to create children accordingly.

  3. In the  Create a new page window, enter the Page title and Friendly URL.

  4. Click  Create. The new About page is created.

  5. On the top right corner, in the Layout drop-down, choose the Inner – Two Columns layout.

  6. Add the required content and images as described in Step 8 – Design the Homepage. New Pages are created in an unpublished status.  In the Sitemap, published status is indicated with a green checkbox icon.

News Page

News page is going to have database driven content from the Content-> News section. In this step, we are going to understand how to add a new news page to the parent Homepage.

  1. Click Homepage->New Page to add a new webpage.
  2. In the Create a new page window, enter the Page title and Friendly URL.
  3. On the top menu, click the Source tab. This tab is used to write straight code to design the page. Brick River is optimized for designers to store site design in Layouts and compose Page source code to generate dynamic content using custom Razor helpers.  It is sometimes useful to do a portion of the page design in straight source code - but also include editable areas that non-designers can use to make basic edits using the Design Tab.
  4. Click Snippets and select the News Article Index snippet.
    1. @BRT.Index() – This is the Brick River Helper which displays a set of EngineRecords retrieved from a designated View. 
  5. You can also make changes to the code such as changing the image dimensions, changing the heading from h4 to h3, etc. Once you have made all the changes, click Save and Publish.
  6. Click on Go to page to view the News page. All the news articles are displayed. However, when you click them, they don’t show any detailed news. In order to show detailed news articles, you should create a News details page.

News Details Page

  1. Click News Page->New Page to add a new webpage.
  2. In the Create a new page window, enter the Page title and Friendly URL.
  3. On the top menu, click the Source tab.
  4. Click Snippets and select the News Article Detail snippet. This retrieves an EngineRecord and renders field values on a Page. 
    1. @BRT.Detail() is used to render a record detail page. Typically a site uses 'index' pages with @BRT.Index() or @BRT.Lister() to present a list of links - and 'detail' pages to render individual detail records.
    2. For example, a 'News' Page may use @BRT.Index() to display links to the most recent news.
    3. The links open a Newsdetail page - which uses @BRT.Detail() to display the full blog post.
  5. Once you have made all the changes, click Save and Publish.
  6. Go to the News page and click on any article.  The news articles are displayed. 

Events Page

  1. Click Homepage->New Page to add a new webpage.
  2. In the Create a new page window, enter the Events in the Page title field. Click Create.
  3. On the top right corner, in the Layout drop-down, choose the Wide layout.
  4. On the top menu, click the Source tab.
  5. Click Snippets and select the Calendar.
    1. This snippet creates a calendar with links to events. It generates a responsive calendar with links to Event content.  It requires a calendar detail page with the @BRT.CalendarDetail() Helper to render the event pages linked to the calendar.
    2. For example, if a site uses the Page: 'eventcalendar' to display the calendar and the Page: 'eventdetail' to display events when links on the calendar are clicked.
    3. Once you have made all the changes, click Save and Publish. 

Events Details Page

  1. Click Events ->New Page to add a new webpage.
  2. In the Create a new page window, enter the Events detail in the Page title field. Click Create.
  3. On the top right corner, in the Layout drop-down, choose the Wide layout.
  4. On the top menu, click the Source tab.
  5. Click Snippets and select the Calendar detail.
    1. This snippet renders an Event Detail Page for links generated by @BRT.Calendar().
    2. This Helper only works in combination with @BRT.Calendar().  The only parameter it accepts is returnPage - which names the Page with the @BRT.Calendar().