Integrate Frameworks in COS (Bootstrap 4 example)

[DM2]

I have a quick question on this if I may..can a bootstrap4 custom coded template exist within the default Hubspot framework which is built on bootstrap2 I believe. ie could I have single bootstrap4 page sitting in a regular Hubspot site?

I ask because it seems to me that jquery version needs to be global?

[mike-ward · Accepted solution]

Hi @DM2 ,

I do this all the time, in fact I can't remember the last time I created a module that wasn't BS4. Obviously you can end up with a few additional <div> nestings, but I've never had any issues whatsoever. I've written many modules that use BS4 and they play just fine within the top-level parts of the HS BS2 framework.

And if you see any issues with JQuery, you can run multiple versions using noconflict.

Here's a Stack Overflow post on this.

Also, if you're only using BS4 for layout with the CSS file, you don't even need the BS4 JS libraries, in which case it's even easier.

In summary, go for it.

Cheers,

Mike

---

Did I answer your question? If your question is answered, please mark it as a solution. If you need more help, hit that big orange 'Reply' button!

[DM2]

Thanks Mike, that sounds very positive.

In the interim I did run a test dropping a BS4 framework and adding in some custom modules, it did work fine. 

Can I ask do you still use the:

{{ standard_header_includes }}
{{ standard_footer_includes }}

Or did you deconstruct those and hard code them in?

Presumably the HS main menu/nav system can be pulled in to Boostrap via hubl variables.

I guess the downside for the end user is there is no drag and drop capability at template level as the templates need to be html+hubl. Would you say are there are any other downsides in terms of end user experience - I'm thinking of my clients here who wouldn't want to go anywhere near any raw code and just want drag and drop?

Thanks again.

[mike-ward]

Hi @DM2 ,

I think you'll get warning messages from HubSpot if you try to remove thse standard header and footer includes. I wouldn't worry about them, I always leave them in without ill effects.

Yep, you can pull the HS menu in no problem. The HS menu renders pretty cleanly in HTML, so it's not hard to style it.

I guess the downside for the end user is there is no drag and drop capability at template level as the templates need to be html+hubl. Would you say are there are any other downsides in terms of end user experience - I'm thinking of my clients here who wouldn't want to go anywhere near any raw code and just want drag and drop?

You can still absolutely create drag-and-drop modules, all Bootstrap is doing for you is providing their boilerplate classes and styling, it's all still HTML and CSS. I find that using BS actually helps me make better modules, because you can expose some of the utility classes to the end-user. E.g. you can have a drop-down field in your module called "Padding", labeled as "None, Smallest, Small, Medium, Large, Largest" with "p-0 p-1 p-2 p-3 p-4 p-5" as the values which drop straight into your templates.

It's nothing you couldn't roll yourself, but I find it super useful to use the standard 0-5 spacing classes for consistency and it saves me thinking too much about it. Obviously the flexbox classes are also easy to use.

If you're starting a new project, it's helpful to think about how much you might want to expose to the user. Paddings, margins, column sizes and orders,  text alignments - all easy to control with standard BS4 classes and easy for you to plug in to all your components.

Combining BS4 and the power of HS modules, I find you can easily build out pretty much any component quickly and easily, without huge amounts of custom CSS and give users plenty of controls to tweak.

Have fun!

Cheers,

Mike

---

Did I answer your question? If your question is answered, please mark it as a solution. If you need more help, hit that big orange 'Reply' button!

[DM2]

yes absolutely, it would certainly speed my workflow and I really do like BS4 as a framework...I have a 'friendly' client project about to start and will head down this route to break the ice. 

Cheers Mike.

[mike-ward]

Sounds perfect. Once you get into the swing of it, I think you'll be a convert 🙂

Have fun!

Cheers,

Mike

[tmcmillan99]

I am fairly new to developing in Hubspot and still learning my way around. Although I am very comfortable with html and css, I am very much lacking the type of knowledge and best practices found in this post. Being able to use Bootstap 4 would change my life. Lol. Besides custom modules, is there any issues doing this with landing pages? Or do you not use drag and drop and build the landing page template as a custom module?

That is the type of development information I am missing. Are there resources with this type of information? Or do I just need to browse through the community posts? 

Thanks,

Terry

[DM2]

Hi Terry

if you're using a custom framework like Boostrap you would need to create the templates as 'html+code' not 'drag &drop' - you can't use the latter because it applies Hubspot's grid system based on Bootstrap2.

However, once you've created the template you can then create your custom modules and make them available at page level - so when a user is editing/setting up a page they still get the drag and drop experience.

I found there wasn't very much content on Hubspot resources regarding custom frameworks - I got the most knowledge by browsing the forum. 

[mike-ward]

When it comes to development, it's always been a little unclear where 'end users' are supposed to work, although this is much clearer in the new CMS Hub approach.

My personal preference has always been that 'end users' (in my case, pure marketing peeps) do NOT go anywhere near the Design Manager. They don't even have access to it for my clients. Instead we'd build custom modules and have a handful of landing page templates. The 'drag-and-drop' we'd actually use within the 'Website > Landing Pages' pages themselves, with custom HTML/HUBL modules and repeaters within those modules. If you create a kind of shell template and a standard syntax for custom modules (e.g. if using BS4, my modules are always 'container-fluid's)

<section class="container-fluid {{module.extra_classes}}" id="{{module.section_id}}">
  <div class="container">
    <div class="row">
      ... module content here ...
    </div>
  </div>
</section>

Then if you have a landing page template that is literally a global header, a global footer and a Flexible Column (superceded by 'dnd_areas' now, see below), you can combine your modules together as needed.

This modularised (or componentized) pattern is really helpful for both standards and code re-use. If you spend your time making one Hero Banner custom module, that can be customised to be a carousel, or have a video, with light/dark styling options, with an area for adding 1,2, n buttons, and with any other controls you might want to expose, then once it's done, it's done. Your marketing team can then just assemble pages from these modules.

If you check out the Drag and Drop Template documentation on this now, you'll see that HubSpot no longer recommends using the 'drag-and-drop' templates in Design Manager as the preferred option. Instead, using the system we're talking about here of custom HTML + HUBL templates.

For me, this is a big win. The Page Editor is where non-tech folks should be editing their... well, pages! 🙂

It's not a massive mindset change for developers IMO, the main thing being getting your head around the new dnd_areas (instead of 'Flexible Columns') - I'd suggest reading the Drag and Drop Areas documentation a few times as you're getting started!

And overall advice - just give it a go. Get a free developer sandbox account and experiment! I've never managed to 'break' HubSpot in all my years tinkering with it, it's a very safe, protected environment to work in. Which is nice if you're coming from something like WordPress where a stray bracket in your PHP somewhere can prevent your entire site from rendering! 🙂 

Cheers,

Mike

[tmcmillan99]

Thank you for the responses. All of this information is gold and exactly what I was looking for!! It definitely gives me a direction to go in for my development. I will read through the documentation that you recommended to get a better handle on this new approach. 

Are you doing your development within Hubspot or are you using something like VS Code and connecting to the cms-cli for local development?

Thanks,

Terry

[mike-ward]

---

@tmcmillan99 wrote:

Are you doing your development within Hubspot or are you using something like VS Code and connecting to the cms-cli for local development?

---

I have been using the Design Manager (which I actually think is excellent), but now the new CLI tools are out...... next project I'll be working locally to try it out. I'm used to working locally for all my non-HS work, so looking forward to that workflow.

But I wouldn't worry about it for starting out, I've built super-complex things using only the Design Manager, and it's helpful when you're newer as there's more help and context directly to hand.

This is a very useful thread! Thanks for all the input folks!

Cheers,

Mike

[DM2]

I generally develop in Hubspot as there is good revision managment.

Sometimes I compile Sass css externally though and drop it in, it depends on the client and whether there are multiple users.

[DM2]

Then if you have a landing page template that is literally a global header, a global footer and a Flexible Column

Yes that's exactly what I intend. 

Have worked with a mix of clients on Hubspot projects and some do want template control unfortunately.

I too haven't managed to break anything yet! Having worked in web design for many many years I really see the value now of these SaaS solutions,  the thought of WP makes me shudder these days 🙂

[natsumimori]

Hello @DM2 ,

I found a post about Bootstrap 4 and wanted to share with you: [Integrate Frameworks in COS (Bootstrap 4 example)]

Hi @Jsum,do you have any advice to @DM2 ? 

Natsumi