Hubspot Custom Module CSS Framework
04-04-2019 02:40 - edited 05-31-2019 04:49
I created a simple boilerplate stylesheet that I use everytime I built a custom modules now. It's mainly class controls that I have thrown in as the need arises, and I cleaned it up a bit to share. I removed form and cta controls because they were pretty specific to my style of development so included is just flexbox controls, page center controls, basic positioning controls, and basic typography controls.
I use 10px as the html font-size so that, for example, 1.4rem is 14px. This allows me to set media queries on the html's font-size instead of per element.
My page center system is pretty simple also:
<div class="page_center lg"></div>
lg, md, sm control the max-width of the wrapper, page_center resets any floats and margins, and centers the div in the page.
flexbox started this stylesheet and has the most controls. Flexbox is, in my opinion, the best option for structuring pages responsively. It is also the most confusing and most difficult because of the prefixes. creating a stylesheet that provides these controls lets me skip generating prefixes everytime I flex elements. here's an example:
<div class="flexy fl-hz_center"> <div class="fl-04"></div> <div class="fl-06"></div> </div>
flexy set a container to 'display:flex", fl-hz_center centers the items contained, horizontally. fl-0x is the amount of space, out of 10, that you want the element to take up in the row.
When I start a new project I edit this stylesheet's page_center max-width's, font, etc. to set up the project, attach it to every custom module I create, and then I get to quickly markup my modules.
If you want to take a look, you can find it here:
Need help? Hire Us Here