File Structure

Sass Version

Styles

styles.css – A file required by WordPress, but not used.

assets/scss/style.scss – Import all of your Sass files here. This file also imports all Foundation styles from the vendor directory. You can remove whatever components you don’t plan on using.

assets/scss/_main.scss – This is where you will put most of your custom styles

assets/scss/_settings.scss – Override Foundation styles and variables

assets/css/*.css – This is where all of the Sass files will compile. Don’t edit these files directly as they will be overwritten anytime you compile your Sass.

Scripts

assets/js/foundation.js – Foundation JS files. If you’re using Gulp, this compiles all Foundation JavaScript components from vendor/foundation-sites/js. You can select which components you want by making adjustments to the gulpfile.js. This file also comes in a minified form.

assets/js/scripts.js – This is where all of your custom JavaScript will go. If you’re using Gulp, this compiles all Foundation JavaScript components from assets/js/scripts.. This file also comes in a minified form.

assets/js/scripts/*.js – If you’re using Gulp, you can place all of your custom JS files here and they will be compiled into the assets/js/scripts.js file.

Vendor

vendor/ – All vendor files are located here. It is not recommended to make changes to these files (except when updating).


CSS Version

styles.css – A file required by WordPress, but not used.

assets/css/style.css – Place custom styles here.

assets/js/scripts.js – Place JavaScript here.

vendor/ – Foundation and other vendor files are loaded from here. It is not recommended to make changes to these files (except when updating).


Want to suggest or contribute changes to these docs? The JointsWP documentation is now hosted on GitHub! View or Edit this page on GitHub.