Integrate Frameworks in COS (Bootstrap 4 example)
06-20-2019 12:35 - edited 06-20-2019 07:46
I created these graphics to answer a question about bootstrap 4 integration in the Hubspot cos, and I think they could be helpful for anyone trying to figure out how to integrate a framework or script into their template. This is a a copy and paste of the original post (https://community.hubspot.com/t5/CMS-Development/Bootstrap-4-integration/m-p/276066#M12681):
Here's an example of how that works:
a template builder template, with flexible columns used in the header, footer, and body section. A preset collection of modules attached to each. This template does not need to have any css or javscript document attached to it. In this example, the modules will do all of the structural work for the site, so the css and js should be directly connected to the modules, not the template.
An Example of a custom module in the custom module editor. This module is using bootstrap 4 class controls. The bootstrap css and js can be attached to each module directly, if/as needed. if a module does not require js then it isn't necessary to include framework js to a module. Notice the use of the container class within the module. in bootstrap, this is equivalent to how a lot of hubspot developers use "page-center". It is the section width control for the framework. This means that each module will make up a section of a page. You can use custom moudle fields to make options and take full advantage of bootsrap features.
There were two issues with using bootstrap in Hubspot:
1. There used to not be a way to control the markup output by the advanced menu module. a list of menu variables have been added to the hubl documentation that should make this possible now: https://designers.hubspot.com/docs/hubl/hubl-supported-variables
2. the jquery version forced on hubspot templates was out of date for use with bootstrap 3-4. There is now a drop down option in your portal settings that allows you to change the jquery version.
I'm going to add to this by attempting to diagram my project file system for this type of project:
|- projectname |--- modules |----- globals |------- header module |------- footer module |----- [ list of modules(+/-20) ] |--- static |----- css |------- frameworks.css |----- js |------- frameworks.js |--- templates |----- general flex (empty flexiblie columns template) |----- gf home preset |----- [ gf other page presets (+/-10) ]
I think that is a pretty standard setup.
I'm spending a lot of time in the Act2 theme from the Hubspot marketplace at the moment. This is a really powerful template that has been around for a while. It was built using the older version of the design manager, s while it still uses a stable of custom modules and class control to build out the templates, everything is connected to the template and a lot of template grouping is used around the modules. recreating sections from different templates in a new template is a process. I've been really happy with the new custom module editor because you can do all of your development on the module level, preset your pages on the template level, and you have full control over your page in the editor.
My only issue with this system is that development time has increased. I think it's the amount of overall html, css, and js you end up writing in the modules, or the amount of custom module fields you end up creating and inserting into your code. This makes development take a little longer and makes it a little more expensive. The result is a collection of customizable modules and preset pack of modular templates, so I think it is a good trade off, but some kind of customizable snippet tool, or if macros could be standardized it would help to speed things up a bit.
What do you think about my process? Do you do something different?