Share Your Work

Jsum
Autorität

Hubspot Custom Module CSS Framework

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

4 Antworten
Anton
Trendsetter/-in | Diamond Partner
Trendsetter/-in | Diamond Partner

Hubspot Custom Module CSS Framework

Awesome thing!

Thanks for sharing @Jsum 

Anton Bujanowski Signature
0 Upvotes
Stephanie-OG
Autorität

Hubspot Custom Module CSS Framework

These are great! I love a good flexbox 🙂

 

Thanks for sharing! 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

dennisedson
HubSpot-Produktteam
HubSpot-Produktteam

Hubspot Custom Module CSS Framework

@Jsum , awesome work!  thanks for sharing

jennysowyrda
Community-Manager/-in
Community-Manager/-in

Hubspot Custom Module CSS Framework

Thanks for sharing @Jsum!

 

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

 

Thanks,
Jenny