Gatsby: How to use or setup Foundation CSS with Gatsby

[kumar-gitdev]

Hi,

We are planning to use Gatsby as a Framework for our company, one of the requirement is using Foundation CSS with Gatsby, could some one guide me how to use Foundation CSS(https://foundation.zurb.com/) and Gatsby together I don't see any documentation or working examples.

Thanks,
Kumar.

[grantmoran]

Since the Foundation CSS is written in Sass, you're best bet is to utilize gatsby-plugin-sass and load it accordingly.

Foundation npm install

[kumar-gitdev]

Hi Grant,

Thanks for the response. currently I was able resolve the issue searching online, right now I am able to use the foundation and gatsby together, but lack of documentation and examples disappointed me, may be in future I will try to create some example and post it in my git hub page.

Below are the steps I have used to resolve the issue (it might help some one):

1. Install foundation-sites using npm install (in your package JSON you can use "foundation-sites": "^6.4.3" or some different version)

2. gatsby saas plugin: In your gatsby-config.js you have to use saas plugin (gatsby-plugin-sass)

   plugins: [
   gatsby-plugin-sass]

3. In your code create _settings.scss file and inside this file import the @import '~foundation-sites/scss/util/util';
   also copy and paste the foundation style definitions in to the _settings.scss file
   https://github.com/zurb/foundation-sites/blob/develop/scss/settings/_settings.scss

4. Inside your main component.js or main Layout.js file you have to (refer) import the the below foundation-sites files from your local node module(foundation-sites).

@import '~foundation-sites/scss/util/util';
@import './settings';
@import '~foundation-sites/scss/foundation';

after the above steps you should be able to use the foundation css in your gatsby html code any where inside components or layouts etc..

Hope this will help.

Thanks,
Kumar.

[kumar-gitdev]

Just an update everything works fine in gatsby dev mode, but when I do a gatsby production build I see some error saying "window" is not available during server side rendering.

Below is the error details:

ERROR #95312

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

276 | /* eslint-disable */
277 |

278 | window.matchMedia || (window.matchMedia = function () {
| ^
279 |
280 | var styleMedia = window.styleMedia || window.media; // For those that don't support matchMedium
281 |

WebpackError: ReferenceError: window is not defined

• foundation.esm.js:278 Module../node_modules/foundation-sites/dist/js/foundation.esm.js
  node_modules/foundation-sites/dist/js/foundation.esm.js:278:1

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!