topic Re: Creating a theme's field json in the design manager in CMS Development

Creating a theme's field json in the design manager

DOchieng5 — Tue, 29 Nov 2022 20:36:46 GMT

How can we create a theme's field.json in the design manager?Is it even possible?

Re: Creating a theme's field json in the design manager

alyssamwilie — Tue, 29 Nov 2022 21:26:29 GMT

As far as I'm aware there's currenty no way to create the file individually but if you click File > New theme in the left sidebar it'll create a theme folder for you with a fields.json file included.

Re: Creating a theme's field json in the design manager

DOchieng5 — Wed, 30 Nov 2022 03:22:58 GMT

Thanks Amwilie,

Is it already populated?I'm preparing a theme from the design manager starting from a blank theme.

And also,what's the purpose of the themeoverridde.css?

Re: Creating a theme's field json in the design manager

alyssamwilie — Wed, 30 Nov 2022 17:38:13 GMT

When you create a new theme there's a "Theme Starting Point" dropdown. If you choose "Blank Theme" the folder will only contain a themes.json and fields.json file and the fields.json will my empty. If you choose "Boilerplate" you'll receive a clone of HubSpot's boilerplate theme which includes all the files for a basic theme setup and the fields.json will have default content in it.

I think the word 'override' is a little misleading, not sure why it's labeled that. It's basically just a stylesheet for setting all your global styles that use data from the fields.json file.

Re: Creating a theme's field json in the design manager

DOchieng — Fri, 02 Dec 2022 14:29:29 GMT

Hi amwilie,

An example of how this works,and why we're importing macros.css in the first place?

Re: Creating a theme's field json in the design manager

alyssamwilie — Fri, 02 Dec 2022 14:50:54 GMT

The imports is just a way of keeping code concise and separated into like pieces (modular). You'll see this a lot with CMS themes, projects using CSS preprocessers, and CSS libraries (like bootstrap). I don't think there are any articles particular to HubSpot's file structure but you can find a lot on SCSS/SASS file structures which I think can be helpful in understanding setups like this.

The macros.css specifically is for HubL macros used to mutate theme settings data and create reusable pieces of CSS. It may seem unecessary to have it separated since there's only one macro in there in the boilerplate but developers are likely to add more. I, myself, use at least 7 different macros in most of my projects.

Keep in mind though, you don't have to follow the boilerplate setup to a T. You can write your CSS however you like.