Issue #910Opened February 28, 2018by tommedema1 reactions

[Question]: estimation of complexity to support existing html pages without predefined CSS structure?

Question

I have a large amount of static websites, some which have been developed quite a while ago (using Bootstrap etc.) and some which have been developed more recently (using CSS grid etc.). Some use inline styles, some use class based styling, some style based on component hierarchy (#id > div > ul > li for example), some immediately style elements by the html component name (e.g. form), and others use a combination of all these.

I believe that Grapes works solely with BEM-like CSS styling. I.e. each component has its own class. Is this correct?

In addition, some of these static sites depend on large CSS libraries like Bootstrap, which I would want to pass into grapes.init's style property. Would this be very challenging to achieve?

How complex would it be for me to built in support for arbitrary CSS styling? Is this something that would require a complete overhaul or could it be done relatively easily? Would you be able to provide me with some pointers in the right direction?

Answers (3)

tommedema• March 4, 20181 reactions

@artf thanks, I see. I actually like that you rely on the browser's CSS parser because I am already noticing performance issues with large templates. If you also rely on something like postcss I fear that performance may further degrade.

I am currently testing Grapes with a large variety of templates. Will compile a list of issues with fiddles.

Most rendering issues come from the fact that doctypes are not applied, but there are some others as well. There are some some functionality issues such as if you duplicate a component, and then change its style, the original component's style is also adjusted. This seems to be because grapes adjusts the original class rather than editing styles inline for the component that you have selected.

I hope I will be able to contribute as well, so first goal would be to get your insights on each issue, and then hopefully I can help out in fixing them.

Will close this issue for now and re-open when I have some examples.

artf• March 2, 20180 reactions

I believe that Grapes works solely with BEM-like CSS styling. I.e. each component has its own class. Is this correct?

Is the "selector/class viewer" which is only able to let you edit styles of class-based selectors, like .class1 .class1.class2 but GrapesJS should import all your rules without any problem

In addition, some of these static sites depend on large CSS libraries like Bootstrap, which I would want to pass into grapes.init's style property. Would this be very challenging to achieve?

You can load external stuff in this way

const editor = grapesjs.init({
  ...
  canvas: {
    styles: ['...file1.css', '...file2.css', '...']
    scripts: ['...file1.js', '...file2.js', '...']
  }
});

How complex would it be for me to built in support for arbitrary CSS styling?

What do you mean exactly with arbitrary CSS styling?

tommedema• March 2, 20180 reactions

@artf Thanks for the answer! I think I may need to explain my use case more.

It's not always realistic to expect someone importing a template to define what CSS comes from external libraries. The reason for this is that typically CSS is compiled and minified to a single bundle. So, bootstrap rules etc. will be merged together with the rules specific to this HTML page. Therefore it's not possible to define which files should be imported separately.

With arbitrary CSS styling I meant the collection of the different ways to style HTML elements with CSS selectors (classes vs native html elements vs inline etc.)

So far I noticed 3 reasons why my current templates render wrong in Grapes' editor:

the doctype of the template is ignored; html4 templates are rendered differently than html5, therefore doctypes should be preserved or defined when importing a template (html + css + doctype instead of html + css)
all class and style information defined above the wrapper is ignored, e.g. a template with such structure:

<!DOCTYPE html>
<html lang="nl" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml" class="js flexbox canvas no-touch hashchange rgba multiplebgs ...">
...
<body class="  m-nl l-nl page-homepage is-loggedout  reboot  index-homepage  ">

Will not be rendered as it should because the classes defined in the template's html and body elements are lost.

Grapes is injecting CSS into my template that affects the way it renders, some of this CSS is redundant. For example it forces a margin: 0 even though the original template did not depend on a reset margin. This causes the template to render differently inside the editor than inside a normal browser window. Fortunately this is easily fixed by removing the CSS rules that are not necessary.

I have spent 2 days going through your source code. Really like the documentation, MVC pattern, and structure with Backbone! I would be happy to propose a solution to retaining this "wrapper information" and to create a PR to resolve this.

My current priority is to go through the code again to fully understand the CSS parser as to answer my own questions above. I'll probably find one or two issues for which I would be happy to create PRs too.

My ultimate goal is to be able to import static HTML documents (including doctype and all styling without knowing which css rules are part of Bootstrap etc., including minified CSS etc) and to have them render in Grapes as they would in a normal browser window.

Since you suggest that Grapes should already work out of the box with any kind of CSS styling, would it be an idea that I come back to you with a static HTML + css template that renders wrong inside Grapes? I will also do my own research on why I believe it is not rendering the way it should be (other than the 3 reasons above).

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[Question]: estimation of complexity to support existing html pages without predefined CSS structure?

Question

Answers (3)

Related Questions and Answers

[QUESTION] Get content with inline CSS

How to add !important in all the generated apis

[Question] Change HTML of Panel buttons from span to button

Incorporate juice inliner (or similar) to inline css for html email creation

Paid Plugins That Match This Issue

Browse Plugin Categories