Sitecore MVC for Front-end developers
Part 2: Layout

30 September 2017

Layout

The Layout for a Sitecore site is usually used on every page of the site. In a Helix solution this should live within the Project layer.

In Sitecore MVC a layout is very much like a view rendering. You create a Layout definition item in Sitecore and set its "Layout" field to the path of the layout cshtml file.

Zurb Foundation

This solution uses the Foundation front-end framework. The source HTML for the layout follows that used on the Ecommerce Homepage example. Except for some script tags, there is no HTML markup which needs to go into the layout, so I put placeholders here for:

  • Head (metadata)
  • Header
  • Main
  • Footer

You could use a single placeholder within the body tag, but there is no benefit. Doing so opens up the possibility of breaking the layout of the site by moving the header down, or the footer up.

Source Code

@using Sitecore.Mvc
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/foundation.min.downloaded.css">
    @Html.Sitecore().Placeholder("Head")
</head>
<body>
    @Html.Sitecore().Placeholder("Header")
    @Html.Sitecore().Placeholder("Main")
    @Html.Sitecore().Placeholder("Footer")
    <script src="/js/vendor/jquery-2.1.4.min.downloaded.js"></script>
    <script src="/js/vendor/foundation.downloaded.js"></script>
    <script>
      $(document).foundation();
    </script>
</body>
</html>

Placeholder Settings

After creating the layout it is necessary to create placeholder settings items. These control which components can go into each placeholder. Same as for the layout, these go into the Project layer in the solution.

A note about Habitat and multi-site solutions

I recommend taking a look a Sitecore Habitat. Although more complex, it is a good example of how to organise modules under the different layers.

When you look at Habitat, you will see that there are two projects in the Projects layer: Common and Habitat. Common contains the re-usable, aspects of bootstrap such as multi-column renderings. Habitat contains the base layout used by the Habitat site.

In theory, if you know you will only build one site, then you could use a single project at the Project level. In practice, you cannot guarantee anything in software development except change. For this reason, it's better to plan ahead and split the project layer into two projects at the beginning. If requirements change and you need a new site, it will be easier to separate the two and re-use components.

What's next?

Thanks for reading and stay-tuned for the next article in the series where I talk about MetaData.

  1. Introduction
  2. The Layout (this page)
  3. MetaData
  4. Header Structure
  5. Navigation
  6. Section Header
  7. Content
  8. Product Details
  9. Product/Article List
  10. Sidebar Widget
  11. Footer
 

Next Article

Sitecore MVC for Front-end developers - Part 3 - MetaData

›
Tags: Sitecore MVCHelixHedgehog TDS
comments powered by Disqus