Hubspot Custom Module CSS Framework

Highlighted
Esteemed Advisor

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: 

https://github.com/jcopacetic/zFramework/tree/master

 

Need help? Hire Us Here

- Jonathan Sumner
4 Replies 4
Community Manager

Thanks for sharing @Jsum!

 

@Anton@Stephanie-OG@stefen@dennis_e@Kevin-C@AJLaPorte_diagr@tjoyce I wanted to make sure this was on your radar! Smiley Happy 

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Regular Advisor | Platinum Partner

@Jsum , awesome work!  thanks for sharing

dennis
Regular Advisor

These are great! I love a good flexbox Smiley Happy

 

Thanks for sharing! 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

Advisor

Awesome thing!

Thanks for sharing @Jsum 








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes