One of the hardest challenges for developers new to Episerver is deciding how to use page-types and blocks in a way that makes the Episerver backend easy for content editors to use.  Trust me, if you design an EPiserver backend in a way that takes content editors ages to create pages, you won't hear the end of it!  

When Episerver moved to a block architecture, it provided a new challenge for designers.  The HTML that Episerver produces can vary based on the decisions of content editors.  

The types of blocks and the order they are added into content areas will define the HTML that Episerver will produce.  When I say content editors can set the size of a block, in Episerver we can configure the system to allow content editors to set the bootstrap class that will be rendered on the page by something called a DisplayOption:

A display option is a way that developers can configure Episerver to allow content editors to decide how a block will be rendered.  For example, you may want a Call To Action block to display for the whole width of a page on a landing page, but, only display for a quarter of the width in a sidebar on a blog post page.  

This difference in sizing is based on the display option associated with a block.  As seen above, content editors can select a display option in the Episerver editor by clicking on the one they want.  If you are new to Episerver Display Options, I suggest you have a look at this project first DisplayOption to get a basic understanding about how to configure Episerver as a developer in order to take advantage of this feature.  

If you're designing a responsive website (and in this day and age who isn't?) then it's highly likely that you will want to use Bootstrap.  This brings us to an interesting challenge, if content editors can drag as many blocks as they want into a content area AND they can also set the width of each block, they will break the 12 columns per row requirement by bootstrap.  When this happens, what will the page look like?

One way of solving this issue is to configure Episerver to automatically insert rows for content editors, so they can use Episerver without needing to know anything about responsive grids.  We can do this by automatically inserting the row div whenever the column width of the blocks within a content area are greater than 12.

Boilerplate Code

Before I get into the meat and veg of the code, you'll need to add a lot of boiler plate objects, enums, extensions etc.. into your project in oder to get the code to compile.  This section will cover all the code you should need: 

BootstrapClass Attribute

Display Options Enum

Configuring Episerver To Use Display Options

Custom Class Used For Rendering Blocks With A Row

Convert A String To Enum

Custom Content Area

This is the actual class that will do the magic of keeping track of the current column width of the blocks and adding the row div when needed.  This class defines a custom HTML helper that you can call within your Razo views.  

I've done it this way, rather than force every content area to use this code, so you can pick and choose in your code, what content areas will automatically add the row divs and which ones won't.  If you use content areas to create the primary nav for example, it is likely you won't want to wrap your menu items in row divs!

To use the custom content area you can create a custom HTML helper:

You could then render it out like so:

All the above code can be downloaded in a fully working website from my github account here. #ILoveEpiserver

In this tutorial, I've talked about the HTML challenges a flexible block architecture brings to designers and developers who wish to make a high-quality easy to use the product.  The more power and flexibility that you give to content editors, the more you will need to consider how you will ensure that the HTML Episerver produces to generate a page contains all the divs, classes and columns widths needed to make the page look good.

As with most development tasks, I wouldn't say there's one 'right' way of dealing with this and there are several techniques that you could use.  To make the content lives as pain-free as possible, automatically inserting the Bootstrap row grid when it's needed does make the backend easier to use.  

If you want to implement this you will need to create a custom HTML helper and you will also need to extend the default Content Area to render out the row HTML. Extending it is pretty easy when you get your head around it.  You can always use Dotpeek to go through the default Episerver content area to help you understand how Episerver works out the box.