Render static pages content when using Bulma and others CSS Framework instead of Bootstrap

You may be having troubles when you try to render Static Pages plugin's content if you are using Bulma, or other CSS Framework instead of native Bootstrap one and a WYSIWIG widget in your admin panel.

Because Bulma, and perhaps some others CSS Framework, by default, overrides all the default style: p paragraphs ul ol dl lists h1 to h6 headings blockquote quotes em and strong table tr th td tables

All these tags will appear like any other span or div! Without any style.

When you render static pages in your layout, you probably use the twig tag {% page %} which renders both CMS page and Static Page plugin's page. CMS will render as you want, but not static pages, which will be rendered without any style.

As said in Bulma documentation, you should use the div.content tag, but if you do so:

<div class="content">
    {% page %}
</div>

All the CMS page will be rendered without Bulma styles, which is not what you want if you used Bulma to design your pages.

The way I do, which works perfectly is this tricks to avoid the CSS framework's reboot only in static pages content:

{% if staticPage.content is empty %}
    {% page %}
{% else %}
    <div class="content">
        {% component 'staticPage' %}
    </div>
{% endif %}

This way you can render any HTML tag with native style, or with Bulma styles:

<h1>Native HTML Style</h1>
<h1 class="has-text-primary">Bulma style</h1> /* Will be primary-colored */