topic Re: Minimum requirements from Hubspot when building CMS theme in CMS Development

Minimum requirements from Hubspot when building CMS theme

tmcmillan99 — Thu, 03 Oct 2024 21:16:10 GMT

Starting work on a version 2 of our custom CMS theme and am trying to figure out what is the absolute minimum needed from the cms-theme-boilerplate? Which files, css folders, etc are must haves in order for all of the drag-n-drop items and default Hubspot modules to function properly?

I am wanting my base project to be the bare minimum for Hubspot functionality then I will rebuild from there.

Thanks,

Terry McMillan

Re: Minimum requirements from Hubspot when building CMS theme

Jaycee_Lewis — Fri, 04 Oct 2024 17:20:43 GMT

Hi, @tmcmillan99 👋 Thanks for the great question. Let's invite some of our champions to the converstaion to share their expertise — hey @alyssamwilie @Anton @Bryantworks, can you offer any feedback to @tmcmillan99?

Thank you very much for taking a look! — Jaycee

Re: Minimum requirements from Hubspot when building CMS theme

Teun — Fri, 04 Oct 2024 20:37:33 GMT

Hi @tmcmillan99 ,

You would at least need the layout.css and if you want to use theme settings, you need something like the theme-overrides.css. But that is probably all you need to start building a theme.
This page has a great explanation of the basic structure: https://developers.hubspot.com/docs/cms/building-blocks/templates/html-hubl-templates

Re: Minimum requirements from Hubspot when building CMS theme

tmcmillan99 — Fri, 04 Oct 2024 20:56:24 GMT

@Teun

Thanks for the reply and info. I appreciate it.

Terry

Re: Minimum requirements from Hubspot when building CMS theme

Jaycee_Lewis — Mon, 07 Oct 2024 23:39:35 GMT

Thanks @Teun 🙌 — Jaycee

Re: Minimum requirements from Hubspot when building CMS theme

Jnix284 — Wed, 09 Oct 2024 15:13:58 GMT

Hi @tmcmillan99 you might also look at this Tailwind CSS Starter repository on GitHub - it's based on the boilerplate, but a slightly different approach and might help guide you with what is essential for minimum requirements.

@Teun I stopped including theme-overrides.css and only use the fields.json and a variables.css, mostly because the root variables can be overridden in the child.css (which I've only ever done for custom fonts), so I'm really curious how you're using theme-overrides.css because I feel like I might be using it entirely wrong or missing something.

Re: Minimum requirements from Hubspot when building CMS theme

tmcmillan99 — Wed, 09 Oct 2024 15:28:24 GMT

@Jnix284 Thanks for the Github link. Our theme is based on Tailwind so I will definitely review this. I felt like the first version of the theme included items from the boilerplate that wasn't really necessary in order to function correctly. Part of that was just me learning as I go and part of that was Hubspot pushing the boilerplate in the dev docs. I don't really remember see anything in the docs that states what the absolute minimums are. There are so many options/approaches when it comes to developing a theme. I want the 2.0 version to be cleaner and better optimized.

Re: Minimum requirements from Hubspot when building CMS theme

Jnix284 — Wed, 09 Oct 2024 17:06:28 GMT

you're welcome @tmcmillan99, I hope it's helpful!

Part of the push with the boilerplate is likely due to making the barrier to entry for devs new to HubSpot easier and also probably something to do with getting approval for marketplace themes.

Have you already taken the CMS for Developers certification? I built a bare bones theme from scratch (no boilerplate) and had far fewer files than what the boilerplate has.

Teun mentioned the layouts.css, in mine I didn't break that out into a separate file and had all of my CSS in a single theme file, but it did make me realize that you'd also need the layouts folder and base.html file as part of your minimum. And then depending on how you build your header/footer, you'd need the partials.

Here are the files from my certification theme:

Obviously things like section templates and modules would be optional, otherwise I feel like this is pretty close to the minimum.

There are a lot of themes that breakout the CSS and JS for every module (instead of using it within the module code), which allows the performance to improve (the code is only loaded once per page instead of for each module). Using macros is also a huge advantage for performance, but adds to the total number of files.

Re: Minimum requirements from Hubspot when building CMS theme

Spotiflyerteam — Thu, 07 Nov 2024 19:51:29 GMT

HubSpot's minimum requirements for building a CMS theme include a theme.json file, a drag-and-drop enabled layout, responsive design, and structured modules. Make sure to follow HubSpot’s guidelines to ensure compatibility—Mobcup projects will benefit from this streamlined approach!

Re: Minimum requirements from Hubspot when building CMS theme

Spotiflyerteam — Thu, 07 Nov 2024 19:59:38 GMT

When building a CMS theme on HubSpot, the minimum requirements include a theme.json file, properly structured modules, responsive design, and support for HubSpot’s drag-and-drop functionality. Ensure compatibility with their guidelines for a smooth experience.