2

I'm currently making a website with the Foundation 6 ZURB template, and want to connect to Craft CMS, but I'm pretty new at this stuff, and can't figure out wht the right installation and workflow would be.

So questions I'm dealing with:

  • Should I on my local machine install Craft, and change Foundation to build to that location?
  • Should I install them alongside each other (i.e. install Craft in the same folder as my Foundation)?
  • Should I make a fresh installation of Craft somewhere else, and install Foundation within the Craft structure somehow?

I found this on Github that looks interesting: https://github.com/johanneslamers/craft-workflow

But I don't know how I would take it from there to get my existing Foundation code into the project. Could I just copy it over to this new installation?

Sorry if these are silly questions, but I want to get off on the right foot here. All help appreciated!

KSP
  • 849
  • 6
  • 16

1 Answers1

2

They aren't silly questions. There are a number of ways you might want to do this. Personally what I do on Craft projects when I've used Foundation is use the SASS only version which has directions located here: http://foundation.zurb.com/sites/docs/sass.html

You'll need to be familiar with NPM or Bower and Gulp to get the most out of that. If you're not familiar with them, do some reading there first. I stick exclusively to NPM since I have some other projects that I use Node for as well. This is up to your preference.

I do my local install of Craft in my new repository, set up environment variables and then install on dev/production servers as well. If you have a deploy process to install, I normally do that next so I am done configuring servers. Then I will install any npm packages and set up my gulp build process. I recommend using a lot of the same packages they have in that project like browser-sync. I am surprised I don't see autoprefixer in there which I feel is essential.

  • Should I on my local machine install Craft, and change Foundation to build to that location?

Yes but when you install Foundation via the method I mentioned above, it will build wherever you set it to build in your Gulpfile.

  • Should I install them alongside each other (i.e. install Craft in the same folder as my Foundation)?

I would not install the Foundation files in your Craft folder. This could make updates tricky. The core files will be in node_modules folder in your root anyway. When you locate your SASS files to build, I normally put those in public in their own folder at the same level as the compiled CSS. You don't have to deploy them to your server but it's helpful in local.

  • Should I make a fresh installation of Craft somewhere else, and install Foundation within the Craft structure somehow?

I think the above info probably answers this. Basically all Foundation related content I locate in the public folder wherever you want to locate your assets (sass, js, images, css).

brianespinosa
  • 136
  • 2
  • Thanks a million for a quick and thorough answer, @brianespinosa! – KSP Oct 16 '16 at 16:33
  • I will try this out as soon as I get a chance. I have started reading up a bit on npm and gulp, and I'm starting to get an idea of what it does, and hopefully enough to edit the existing scripts into something that works. I'll let you know how it went! Thanks again! – KSP Oct 16 '16 at 16:39
  • Okay, I'm ready to give this a try. A couple of additional questions:
    • I read somewhere that static assets like JavaScript and CSS are best stored in the public part of the craft installation, is that correct?
    • If so, do I reference them by e.g. /assets/css/styles.css in the Craft templates?
    • As far as I can see, the build process deletes the dist folder on every build. Since I had set Craft to use the folder /assets/img/* for some assets I've set up, they will then be deleted on every build, and I need to keep separate folders for my build assets and Craft assets?
     – KSP Oct 30 '16 at 16:16
  • I got the paths and folders sorted out, based on this answer: http://craftcms.stackexchange.com/questions/15535/using-craft-cms-with-foundation-6-for-sites

    My problem now is: How can I be able to use twig in my templates, without having the Panini parser interpreting them as Handlebars?

     – KSP Oct 31 '16 at 10:42