Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HubSpot CMS - styles to better visualize the grid
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment