Use zurb foundation with frontity

Hi

How can I use foundation framework with frontity?

1 Like

Hey @wazidshh, welcome to the community :smiley:

Yes, but when using React is always recommended to use the React version. In this case of foundation that’s React-Foundation.

This line is not going to work tho:

// Add Foundation to index.js
import 'foundation-sites/dist/css/foundation.min.css';

because we do a lot of CSS optimization and don’t allow css files on Frontity.

But I’m going to investigate a solution. I’ll let you know.

1 Like

Thanks for replying; I have been digging in this for so long. Will be waiting for your solution if any.

Thanks again

Maybe we should allow something like:

import { Global, css } from 'frontity';
import { Button } from 'react-foundation';
import foundationStyles from 'foundation-sites/dist/css/foundation.min.css';

const FoundationStyles = () => <Global styles={css(foundationStyles)} />;

const MyTheme = () => (
  <div>
    <FoundationStyles />
    <Button />
  </div>
);
2 Likes

I was thinking precisely about that, but configuring it so all .css imports use the raw-loader by default.

1 Like

PR on progress: https://github.com/frontity/frontity/pull/133

@wazidshh the PR was already merged in Frontity v1.

Could you please update using

> npm update

and let us know if it works?

Amazing! It works

But I dont know why single style sheet is getting split into multiple style tags

Does that also happen in production? (npx frontity build && npx frontity serve)

works fine build version but when I build I get this error 40%20PM

but it serves the site

Great. So it’s something emotion does in development mode then.

Could you please file a bug with that problem in GitHub? https://github.com/frontity/frontity/issues/new/choose

Thanks!

@wazidshh the problem you reported was solved here: https://github.com/frontity/frontity/pull/144

You can do a npm update and it should not appear again :slight_smile: