Html5 & bootstrap themes integration

🙋Get Help
1

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:

2

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!

3

@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?

2 Likes
4

Thanks for your responses,

@luisherranz can you see this option and tell me is the best option?

emotion-bootstrap

I want to use bootstrap to make homepage, about us page, etc and use frontity to show blog section and blog posts…

I want to create simple websites using frontity and bootstrap. Is more easy for me code these pages in bootstrap.

Code a custom render in html2react is a great job (for use in a wp working site or wp template )
And code these pages in Js is very complex for me.

Thank you!!

5

It could work, although I don’t know how you would deal with future updates to bootstrap (is that an issue?).

Two things:

  • injectGlobal is not supported by Frontity. Copy and paste that into a <Global> component.
  • Do not copy all css props to your project. Each time you want to use a css prop, copy and paste only that into your project. The goal is that you end up with only the code you actually use.

Let us know how it goes!

1 Like
6

A post was split to a new topic: Bootstrap: The pseudo class “: first child” is potentially insecure when processed on the server side. Try changing it to “: first type”

7

Thank you spent hours trying to get to this to work

1 Like