Html5 & bootstrap themes integration

Hi here. I need help to create multiple similar projects. I need to integrate HTML5/BOOTSTRAP themes in frontity but i dont know how to do this easily.
THEME EXAMPLE

PROBLEM 1 - BOOTSTRAP
I have see three different methods to do this, Which is the best option?

PROBLEM 2 - HTML5 CODE IN CUSTOM PAGES
Frontity uses html2react to “parse” the content and you get html text plain and get img (maybe im wrong). Is too dificult for me to change this, i think best option is use html2react only for “archive” and “posts” and create custom pages in frontity project.
These pages must contain the html5/bootstrap code from theme, im lost here, i dont know how todo this JSX files? CONST parameters?

PROBLEM 3- CSS/JS FILES FROM HTML5/BOOTSTRAP THEME
How to integrate this in my frontity project? GLOBAL-CSS? How to call these files? in header?

PROBLEM 4 - CUSTOMIZE HEADER/FOOTER POST/ARCHIVE FRONTITY JS FILES
How to add containers, css clases,HTML code, divs, etc to these .js project files?
I need to see post and blog page as seen in the theme.

Thanks for all, and sorry for my english :wink:

Hi @jozuaugusto, welcome to Frontity! :wave:

You could indeed add bootstrap to emotion and / or add the CSS classes from bootstrap as global styles. This would more or less solve your problems 1 & 3.

However, your main problem would be converting the HTML templates that come with your theme to react… Unfortunately, there is no easy answer here. Frontity was created to work with react and JS at its very core and we take advantage of all the awesome features that come with it, but the price is that you would have to convert your HTML to react components.

If possible, I would recommend that you try to use a theme built with react in the first place, it would make working with frontity much easier! A quick search brings up many of them, e.g.: https://themeforest.net/tags/react

Best of luck!

@jozuaugusto what do you mean by HTML5/BOOTSTRAP themes? Something like this: https://themes.getbootstrap.com?

The problem with the regular bootstrap is that it includes jQuery, and that’s a problem in React.

The React Boostrap library seems quite complete: https://react-bootstrap.github.io/components/alerts/

To use React Boostrap, you need to include their css. You can do so like this:

import bootstrap from "bootstrap/dist/css/bootstrap.min.css";
import { Global, css } from "frontity";

const Theme = () => {
  // ...
  return (
    <Global styles={css(bootstrap)} />
    { /* ... your theme ... */ }
  );
}

It’s not ideal, because this won’t benefit from the CSS-in-JS approach, but at least it will work.


There is one thing I don’t understand: why do you have Bootstrap code inside the content?