HubSpot CMS - styles to better visualize the grid

CMS-hub-grid.css

/* CSS styles that highlight the hubspot grid components so you can better visualize what is happening in a page. 
  1. You could use this a few different ways, you could add this to your inspector-stylesheet.css when inspecting a page.
  2. You could integrate this into a browser extension ;)
  3. You could literally upload the stylesheet to HubSpot, and use {% if request.query_dict.hsDebug == "true" %}{{ require_css(PATH TO YOUR CSS FILE) }}{% endif %}
  
  Additionally in-case it's useful as a prototyping/layout planning tool: https://codepen.io/thewebtech/pen/bGdrQyN??editors=1100
*/

.dnd-module {background: #eaf0f6;min-height: 50px!important; }
.dnd-module::before {content:"{% dnd_module %}";}

.dnd-section {background-color: #fff1ee;}
.dnd-section::before {content:"Section {% dnd_section %}";}

.dnd-row {background: #fef8f0;}
.dnd-row::before {content:"Row {% dnd_row %}";}
.dnd-column {background: #f0f1fa;}
.dnd-column::before {content:"Column {% dnd_column %}";}

.dnd-row,.dnd-section,.dnd-column,.dnd-module{
    padding:20px 15px 15px;
    position:relative;
    border: 1px solid;   
}
.dnd-column::before,.dnd-row::before,.dnd-section::before ,.dnd-module::before{
    position:absolute;
    top:1px;
    left:1px;
    white-space:nowrap;
}