Digital Agency Template - Foundation 6.3 files loaded via CDN or on Treepl AWS servers

I need help better understanding how Treepl templates work. In particular the Digital Agency template. I notice the Foundation 6.3 files are being loaded via a CDN. So does this mean none of the Foundation’s 6.3 files actually exist with the Treepl template that we use to start a project. If that is the case how do we change this and get the files loaded into our account on Treepl servers? Or do others feel this is a better way of working with Foundation?

And second, I am confused on purchasing the HTML/CSS Assets Bundle for the Digital Agency. Do we need to purchase this asset pack to make full changes to the template? We are having an issue changing the hover effect on the nav bar menu and wonder if this is related to “purchasing the asset pack”. If we do purchase the asset pack for HTML and CSS for the agency template, how does it effect all the changes we have already made on the template and inner files?

Hi @JFK. There are various ways you can use Foundation.
The simplest way is serving it via a CDN, like you’ve observed in the templates.
Alternatively, you can download a copy and host on server as well.
Either way, any changes you make generally are made in your own CSS/JS files on top of Foundation. You don’t edit the Foundation files themselves in this setup.
This method is generally fine if you don’t work in a production workflow with pre-processing and the use of SASS, etc.

If you want to utilise SASS you’d integrate that into your production pre-processing and host the compiled files on the Treepl servers.

More on Foundation usage options are here:
https://foundation.zurb.com/sites/docs/installation.html

From what I understand, the assets bundle give you these pre-processing files so you’d have access to the SASS and whatever other processes they have set up.
If you purchase these files, process them correctly and upload it, it wouldn’t make any difference to a fresh template site - but since you’ve made changes to the template already you’d probably have re-do CSS changes in the SASS files. Most other changes would probably be fine.

But no, you still should be able to change any effects as these would likely just be CSS based or controlled with Foundation data attributes.

1 Like

Hi @Adam.Wilson, thank you for the answer and clearing this up somewhat. Kind of surprised there is not more information on this before starting to work with the template and what the options are here. Adam can you tell if the new Cleaning template done in Bootstrap also uses a CDN to load the Bootstrap part of the site? I really can’t tell if Bootstrap is loading via a CDN, it looks like Jquery and whatever “popper” is – but I am not sure about Bootstrap.

Any additional info on this from Code Production @alex on this would be appreciated. Especially on the benefits of using a CDN to load Foundation and Bootstrap, and if this is how you intended the templated sites to be used or if you assumed we would be uploading Bootstrap and Foundation onto the server ourselves?

The Cleaning template hosts the Bootstrap files on the server.
And yes, jQuery and ‘popper’ plugin are served via CDN.

In terms of development, having server hosted or CDN hosted framework/plugin files is really no different as you wouldn’t be editing those files directly anyway. Instead layering on top your own CSS/JS files.

The benefits of a CDN are faster load times as the delivery network can be optimised for the users location and the CDN provider can utilise better caching, and there’s probably a bunch of other smaller performance benefits.

But you can easily switch this to how ever you want it to be.
If the template has CDN assets and you want to host yourself, just download those assets from the source and swap out the reference to your own uploaded files.
If you want it the other way around, source the CDN versions (if available) and swap out the self hosted references.

I don’t typically use templates, but the way I see purchasing the assets is if you:

  1. want to edit the original photoshop design and rework that side of it,
  2. if you have a pre-production workflow, for example you want to use SASS during development.
1 Like