I've talked quite a lot in the past about one of the most fundamental aspects towards Episerver mastery. Understanding how your HTML will integrate into Episerver. Every website is made up of HTML and all designers know how to write HTML, however, when you build systems that allow content editors the power to move things around and re-size things, you add in an extra level of complexity that you need to understand in order to work with Episerver.
Episerver pages and blocks can be configured in a number of different ways; that's one of its most powerful features. As a general rule of thumb with any CMS system... the more control you give to the content editors, the less guarantees you can expect of the final mark-up produced by Episerver.
In today's tutorial, I'm going to ask the question... does that really matter as this gets asked a lot? I tend to favour Bootstrap when I build websites and in this tutorial, I'm assuming you've come to the same conclusion. If you enable the display options feature (allow content editors to re-size blocks) then out of the box EPiserver you deal with the problem of missing 'row' classes.
Bootstrap Classes Explained
Ok, so having a good understanding about bootstrap and the HTML that it requires/recommends is probably a good place to start. When you build your web pages with Bootstrap, the main content section on a page will usually be built with a single parent container, consisting of multiple rows, each consisting of 12 columns.
The 'container' class as the name implies, defines the parent container for the section. The 'row' classes within that container, represent rows. A row works the same way a table does, each row marks the start of a new one. The 'row' class will then be made up of a number of columns.
Columns are used to wrap the HTML components (like a text area, a contact me form etc... ) the column width specifies how wide these components should stretch on the page, should it stretch for half page, the full page etc... The bootstrap framework was written to a 12 column grid layout, so rows should contain no more than 12 columns.
Episerver Mark-Up Explained
When we work with Episerver, our web pages are normally made up of one or more content areas each containing, one or more blocks. As you know the bootstrap HTML will be built using containers, rows and columns, so where do you add the container, row and column classes in relation to your Episerver pages templates and blocks?
You won't find my first answer very useful... it's up to you. Episerver is really flexible and depending on your business requirements, the control you want to give your content editors and the amount of development time you want to invest in customizing a solution bespoke to your needs, will determine how you configure Episerver.
I understand that if you don't understand the different ways of structuring Episerver, like adding validation into the editor, or, creating custom HTML renderers to ensure your bootstrap classes are injected how you want them to.... it is really hard to grasp what I'm saying.
When I first start working with companies new to Episerver, and I start explaining about this configuration/HTML paradox, after about 10 minutes the room usually goes quiet and people tend to look confused. Talking about the different approaches is a big task and outside this tutorial, however, from my experience, the best way for you to learn is to roll your sleeves up and start integrating your HTML using the different approaches.
In this tutorial, I'm going to assume that you're using the 'row' class wrapped around your content area and then within each block you set the 'column-width' class. As Episerver will allow content editors to add as many blocks into a content area, if you put the column width inside your block HTML it is very easy for them to keep adding blocks until the width exceeds 12 columns... so is this a big deal?
Do We Care That Columns Don't Add Up To 12?
From my experience, this is one of the first considerations designers will need to ask themselves when integrating HTML into Episerver. Unless you want Episerver to work differently, it is very common for rows to have more than 12 columns when you work with Episerver, as it's all dynamically generated by content editors. Taken from the bootstrap website:
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"
In most situations, your blocks will wrap onto the next line and the end-user won't notice a thing, so why use the 'row' class at all? The 'row' class is used to make sure that all of the divs inside of it appear on their own line. Technically, it's OK to have more than 12 columns in a single row using bootstrap, however, if you adopt this approach all over your website, it is very likely that you will notice 'height' issues in a lot of places. If you add more than 12 columns, you might not get the correct spacing between rows and your pages might look funny.
Without the row, class column height will affect how things wrap. CSS wise this is because Bootstrap uses CSS floats. So by default. if you just allow content editors to drop as many blocks as they want into a content area, you will very likely have height misalignment issues all over your website.
As you're leaving a lot of the layout to the content editor, my recommendation is to get a developer to configure Episerver in such a way that content editors are forced to work with blocks that ensure the end markup makes the design. Bootstrap has been designed to work with 12 columns, and if you don't stick to that principle your HTML may act in unexpected ways, so in 90% of the time it might look OK, but, for a little extra consideration and effort, you can turn your website into a master piece.
I think we can all agree that if we went to a car dealership and the salesman said, sure the car works most of the times but sometimes it can behave 'unexpectedly' on occasion... none of us would buy that car and would consider it a bit janky and shoddy Sure, a website isn't as life critical as us stacking a car on the M25, but, if you take payments on your website, do you want to risk losing a sale due to bad page design, when with a little bit of extra effort you can ensure everything works as it should?
Bootstrap and Episever Takeaway
So to answer the original post's question, when you use Episerver you need to take into consideration of the end HTML Episerver produces. In Episerver content editors can drag as many blocks as they want to within a content area. This flexibility means they may exceed Bootstraps 12 column per row. Exceeding the limit will probably work in 90% of the cases, however, the column height will probably be a little off and misaligned.
You can fairly easily configure Episerver to produce the HTML that you want. You can prevent content editors exceeding 12 columns using a custom validation attribute for example. If like me, you really care about quality and delivering a good customer experience and you want to make your website look and work in a consistent manner that reflects your designs, then you will need to go a little bit further down the rabbit hole and customise Episerver a little to allow that.