4

So I finally am climbing on board the Craft CMS train, but I have a quick question about how some of you more seasoned Craft-users do things.

I do a lot of my work using the Foundation framework (by ZURB) for a lot of reasons, but I want to know if there is a "best way" to include the front-end framework with Craft. I've never really used a CMS before, so this isn't really a familiar territory for me at all. I haven't found any good guides online as of yet detailing how to do this with Foundation 6, so I figured this would be the next best place to turn! If someone who knows more than me could walk me through the process to mesh these two awesome elements together, that would be much appreciated!

4

Craft is completely "BYO HTML", so there is no magic in making Foundation work with Craft, unlike lesser CMSes that force their own HTML on you.

Just add your stylesheet links and script tags to your main base HTML wrapper and have fun building!

| improve this answer | |
  • Awesome! Great to know! Thanks for the quick response! – alexandersix Jun 16 '16 at 20:19
2

Patrick is right that Craft let's you do what you wish in your HTML templates. I think it's worth adding a small distinction to where you store your front-end assets as there are two possible locations with slightly different behavior:

  1. Craft templates folder craft/templates/...
  2. Public folder (i.e. public/...)

Example folder structure:

craft/app
craft/storage
craft/templates (#1)
public/... (#2)
public/index.php

Most of your page templates will probably be managed in the first location – your Craft templates folder. If you wanted to, you could put your css and js assets in that folder too (craft/templates/assets/css, etc.). Craft will serve your .css and .js as the correct file types.

However, any files that are being served from the Craft templates folder come with the overhead of being routed through Craft's index.php file and being processed by Craft, before they get delivered to the browser. This can be fine, and gives you an option to use Twig in your css or js templates if you really want to.

For most static css and js files, this probably isn't necessary. And linking to the files in the Craft templates folder incurs unnecessary overhead. Your css and js files will also work fine if you link to them in your public folder. A resource request will first check to see if the file exists in your public folder and, if a match is found, that resource will be returned to the browser immediately without ever hitting Craft's index.php file and spinning up Craft.

The most common setups that I have seen on Craft websites follow a pattern like the following, where css, js and other static files are linked to in the public folder:

craft/app
craft/storage
craft/templates/... (dynamic templates that needs to be processed by Craft)
public/assets/... (static stuff that doesn't need to be processed by Craft)
public/index.php

The Craft docs on Routing are a good place to get an overview of how a request is routed.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.