CMS Development

DOchieng5
Participant

Creating a theme's field json in the design manager

SOLVE

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

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Creating a theme's field json in the design manager

SOLVE

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

0 Upvotes
5 Replies 5
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Creating a theme's field json in the design manager

SOLVE

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Creating a theme's field json in the design manager

SOLVE

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.


If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
DOchieng
Participant

Creating a theme's field json in the design manager

SOLVE

Hi amwilie,

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

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Creating a theme's field json in the design manager

SOLVE

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. 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
DOchieng5
Participant

Creating a theme's field json in the design manager

SOLVE

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?

0 Upvotes