CMS Development

tmcmillan99
Contributor | Elite Partner
Contributor | Elite Partner

Minimum requirements from Hubspot when building CMS theme

SOLVE

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

0 Upvotes
2 Accepted solutions
Teun
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Minimum requirements from Hubspot when building CMS theme

SOLVE

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



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


View solution in original post

Jnix284
Solution
Hall of Famer

Minimum requirements from Hubspot when building CMS theme

SOLVE

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:

Screenshot 2024-10-09 at 12.01.58 PM.png

 

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.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

View solution in original post

0 Upvotes
9 Replies 9
Spotiflyerteam
Member

Minimum requirements from Hubspot when building CMS theme

SOLVE

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!

0 Upvotes
Jnix284
Hall of Famer

Minimum requirements from Hubspot when building CMS theme

SOLVE

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.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon
0 Upvotes
tmcmillan99
Contributor | Elite Partner
Contributor | Elite Partner

Minimum requirements from Hubspot when building CMS theme

SOLVE

@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. 

 

0 Upvotes
Jnix284
Solution
Hall of Famer

Minimum requirements from Hubspot when building CMS theme

SOLVE

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:

Screenshot 2024-10-09 at 12.01.58 PM.png

 

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.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon
0 Upvotes
Teun
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Minimum requirements from Hubspot when building CMS theme

SOLVE

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



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


tmcmillan99
Contributor | Elite Partner
Contributor | Elite Partner

Minimum requirements from Hubspot when building CMS theme

SOLVE

@Teun 

Thanks for the reply and info. I appreciate it.

 

Terry

 

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Minimum requirements from Hubspot when building CMS theme

SOLVE

Thanks @Teun 🙌 — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Minimum requirements from Hubspot when building CMS theme

SOLVE

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
Spotiflyerteam
Member

Minimum requirements from Hubspot when building CMS theme

SOLVE

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.

0 Upvotes