How to name dynamic placeholders if they are based on bootstrap column widths

Question

I'm working on a Sitecore website where author should be able to add components based on rows and columns. (Just like in Habitat).

If the markup was simple, like this:

<div class="row">
 <div class="col-md-6">...</div>
 <div class="col-md-6">...</div>
</div>

my rendering with dynamic placeholders will be :

<div class="row">
 <div class="col-md-6">
  @Html.Sitecore().DynamicPlaceholder("col-wide-1")
 </div>
 <div class="col-md-6">
  @Html.Sitecore().DynamicPlaceholder("col-wide-2")
 </div>
</div>

But what if the markup is :

<div class="row">
 <div class="col-lg-6 col-md-6 col-sm-6">...</div>
 <div class="col-lg-6 col-md-6 col-sm-6">...</div>
</div>

On what width should I base my placeholder naming on - md/lg/sm?
Please also consider, different lg/sm/md widths for a div. For making it simple, I put the width as 6 for all devices.
Thank you.

Answer 1

Your placeholder keys should not depend on your markup at all. They should be based on something more abstract like how the placeholder is intended to be used. You should also consider how you want to manage the placeholder settings.

In the case of a bootstrap grid, you could use the concept column width to control which renderings are allowed in different placeholders. However, if all of your components are fluid, specifying a width might not have value for you. In that case, you could just use col-1, col-2, etc. This would decrease the number of placeholder setting items you need to maintain.

You may also want the consider the usage of the parent rendering. For example, if you need to restrict certain renderings to a footer, you could use a key like footer-1.