Using Foundation 6.7.5 with Sage 10

jmanis · January 24, 2023, 4:45pm

I am new to Sage 10 and I am struggling to get Foundation 6.7.5 implemented and able to use the Foundation _settings.scss file in order to customise Foundation to my needs. I am hoping someone can help me as I would really like to be able to use Sage 10.

Here is my package.json file:

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.6",
    "@roots/bud": "6.6.9",
    "@roots/bud-sass": "^6.6.9",
    "@roots/sage": "6.6.9",
    "foundation-sites": "^6.7.5"
  }
}

My bud.config.js file

/**
 * Build configuration
 *
 * @see {@link https://roots.io/docs/sage/ sage documentation}
 * @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
 *
 * @typedef {import('@roots/bud').Bud} Bud
 * @param {Bud} app
 */
export default async (app) => {
  /**
   * Application entrypoints
   * @see {@link https://bud.js.org/docs/bud.entry/}
   */
  app
    .entry({
      app: ['@scripts/app', '@styles/app', '@styles/foundation-settings'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * Directory contents to be included in the compilation
     * @see {@link https://bud.js.org/docs/bud.assets/}
     */
    .assets(['images'])

    /**
     * Matched files trigger a page reload when modified
     * @see {@link https://bud.js.org/docs/bud.watch/}
     */
    .watch(['resources/views', 'app'])

    /**
     * Proxy origin (`WP_HOME`)
     * @see {@link https://bud.js.org/docs/bud.proxy/}
     */
    .proxy('http://site.test')

    /**
     * Development origin
     * @see {@link https://bud.js.org/docs/bud.serve/}
     */
    .serve('http://0.0.0.0:3000')

    /**
     * URI of the `public` directory
     * @see {@link https://bud.js.org/docs/bud.setPublicPath/}
     */
    .setPublicPath('/app/themes/sage/public/')

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json/}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
     */
    .wpjson.settings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .enable();
};

I have tried importing the foundation.scss in my resources/styles/app.scss file:

@import '../../node_modules/foundation-sites/scss/foundation.scss';

and in resources/scripts/app.js I have:

import domReady from '@roots/sage/client/dom-ready';

import foundation from "foundation-sites";

/**
 * Application entrypoint
 */
domReady(async () => {
  // ...
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);

I have tried making changes to my resources/styles/foundation-settings.scss file (which is a copy of the /node_modules/foundation-sites/scss/settings/_settings.scss file but changes I make to that file have no effect on the rendered site.

Can anyone who has managed to get this working please give me a hand with getting this set up correctly?

Many thanks in advance.

dalbeck · January 24, 2023, 9:10pm

I am using Foundation 6.7.5 without an issue (at least that I have seen so far) and here are the steps I took.

First: Removed Tailwind - Replacing Tailwind CSS with Bootstrap | Sage Docs | Roots
Second: Added native support for Sass - Replacing Tailwind CSS with Bootstrap | Sage Docs | Roots (Under add Bootstrap section)
Third: We now need to add Foundation as a dependency: yarn add foundation-sites --dev
Importing Foundation JS library:
→ Open /resources/scripts/app.js at the top of the document add import ‘foundation-sites’;
Next: Import CSS
→ Open /resources/styles/app.scss add to the top: @import “~foundation-sites/scss/foundation”; (here is a copy of my entire app.scss file: Sage app.scss (Foundation) · GitHub
In my bud.config.js file I added:
.provide({ jquery: ["jQuery", "$"], })
→ I did not alter .entry
In app.js I added:
import 'foundation-sites';
import 'what-input';

→ after domReady I added $(document).foundation();

Other notes, you will need to use yarn to add what-input and motion-ui. Then import those in the app.js file as well.

Let me know if you get stuck and I will try my best to help!

jmanis · January 25, 2023, 4:15pm

Hi dalbeck,
I can’t thank you enough, I have now got Foundation working with Sage 10! I am now looking for a way to selectively include Foundations JavaScript components like orbit, interchange etc as currently all components are included. Have you managed to find a way to do this? Once again thanks so much for the help with this.
Many thanks!

dalbeck · January 25, 2023, 5:21pm

Hey @jmanis

I haven’t gone through this route of selectively loading certain aspects of Foundations JS library, however I think what you need is here: JavaScript | Foundation for Sites 6 Docs

I believe you would just need to modify the app.js file to import specific components that you need.

If I circle back to this I will for sure post my solution here for future reference, but as of right now I just load the entire library.

Glad you were able to get the rest working, I have been using Foundation for like 8+ years now it feels like, happy to see others are still as well!

jmanis · January 26, 2023, 9:12am

Hi dalbeck,

Thanks for the reply, I found this in the Foundation docs:

// Only Dropdown and DropdownMenu will be included in your application.
import { Dropdown, DropdownMenu } from 'foundation-sites';

So will give that a try, I will post back here if I find a solution. Many thanks again.

dalbeck · January 26, 2023, 2:28pm

Great! Happy to help!

jmanis · January 27, 2023, 4:29pm

Quid addition from me for anyone having issues getting Foundation Motion UI working, make sure to include the mixins in your app.scss file:

// Import Foundation Motion ui
@import '~motion-ui/src/motion-ui.scss';
@include motion-ui-transitions;
@include motion-ui-animations;