Use Semantic UI instead of Emotion?

Hi there, how would one approach using a framework like Semantic UI or even Bootstrap or similar with Frontity?

Thanks,
Kris

Hi @kris! :wave:

I think you can use either Semantic UI or Bootstrap without any problem. Since Frontity uses React, you should use the React version of those libraries:

Then, instead of import CSS files directly (we don’t allow CSS files in frontity) you have to import them as strings and use Global and css from Frontity as shown below. It’s needed to be done this way because we do a lot of CSS optimization.

For example, for Semantic UI:

import { Global, css } from 'frontity';
import { Button } from 'semantic-ui-react';
// Import Semantic UI CSS as string
import semanticUIStyles from 'semantic-ui-css/semantic.min.css';

const SemanticUIStyles = () => (
  <Global styles={css(semanticUIStyles)} />
);

const MyTheme = () => (
  <div>
    <SemanticUIStyles />
    <Button />
  </div>
);

Let me know if you need help or something.
Cheers!

2 Likes