Menu icon Foundation
Questions jumping to F6 and Gulp

I'm am coming from a tech savvy designer direction here - HTML, CSS, minimal PHP. I would not call myself a developer. So getting into sass was a challenge. I've jumped from using F5 and a grunt oriented set up to F6/FoundationPress and Gulp.

Still not really being fluent in the components, the differences in compiling (build, production, watch), version control via GitHub...I have a couple of quick questions to help clarify the changes in F6 and the changes in the process I'd been using Grunt to using Gulp so maybe I can get a better grip on what I'm doing and standardize my processes.

Q1: What is the significance of the "foundation-sites" directory and should I be editing any of the scss there? I'm not clear how this directory relates to the main assets/components/scss files or its purpose in general.

Q2: Can someone clarify the differences/goals for compiling? "Watch" is what I'm doing while working. But I'm not clear on "build" or "production."

 

foundation 6compilingfoundation-sites

I'm am coming from a tech savvy designer direction here - HTML, CSS, minimal PHP. I would not call myself a developer. So getting into sass was a challenge. I've jumped from using F5 and a grunt oriented set up to F6/FoundationPress and Gulp.

Still not really being fluent in the components, the differences in compiling (build, production, watch), version control via GitHub...I have a couple of quick questions to help clarify the changes in F6 and the changes in the process I'd been using Grunt to using Gulp so maybe I can get a better grip on what I'm doing and standardize my processes.

Q1: What is the significance of the "foundation-sites" directory and should I be editing any of the scss there? I'm not clear how this directory relates to the main assets/components/scss files or its purpose in general.

Q2: Can someone clarify the differences/goals for compiling? "Watch" is what I'm doing while working. But I'm not clear on "build" or "production."

 

Rafi Benkual about 3 years ago

The foundation-sites directory is found in bower-components. It is only needed for development as that is where the foundation SCSS and JS is kept. This allows for easy updating when needed. You won't be editing anything there or even uploading when done.

 

The dist folder is for uploading to your server for deployment.

 

The scr folder is where edits are made. Here is a breakdown: 

 

When working on the project, foundation watch - watches for changes and compiles SCSS into CSS everytime you save.

build runs the optimization for production. Things like image compression, JS and SCSS minification, un-css and flattening the handlebars. All of the files are dumped into the dist file for upload.

Cole Schweikhardt about 3 years ago

Thanks Rafi. My structure via installing FoundationPress seems to be different or I've mucked it up in some way. Perhaps I need to Ole to clarify as it pertains to FoundationPress specifically.

 

In the theme folder FoundationPress have:

 – assets

–– components

–––foundation-sites

–––– assets

–––– dist

–––– js

–––– scss (deeper stuff in there)

–– fonts

–– javascript

–– scss (this is the directory that is being watched when I cd to the FoundationPress theme folder and run npm run watch)

––– components

––– foundation.scss

––– global

––– modules

––– templates

–– stylesheets

 

So, I'm a little confused about what appear to be the various levels of scss files, where I should be working and what I should be publishing from or even how to create the production version. Is everything in the "foundation-sites" folder the core stuff that I leave alone? The only set of

Jeremy Englert about 3 years ago

Hi Cole,

FoundationPress has a slightly different setup (as you've pointed out). 

"...where I should be working and what I should be publishing from..."

You'll want to make your custom changes in the /assets/scss/ directory. FoundationPress splits the styles into multiple Sass files (for organization). You can find the Foundation settings file in /assets/scss/global/.

"...even how to create the production version..."

FoundationPress has a few different Gulp commands, check them out here: https://github.com/olefredrik/FoundationPress#2-while-youre-working-on-your-project-run

"Is everything in the "foundation-sites" folder the core stuff that I leave alone?"

Try to avoid making changes to the Foundation files directly, as these will be overriden if you ever update Foundation. 

Can someone clarify the differences/goals for compiling? "Watch" is what I'm doing while working. But I'm not clear on "build" or "production."

  • I'm not 100% sure on this, but I think this is the basic breakdown
  • watch will watch files for changes and apply changes by running the build task
  • production is the same as build but minifies the files for production