Bulma css framework

[SamC]

Ok, so after revisiting my totally custom site in order to make some changes, I realise the hard way that my code made sense at the time. It's complex, 50% modular and a bit of a nightmare. So I'm redoing it with a framework.

I saw Bulma and gave that a whirl locally and quite liked it, makes a lot of repetitive things very quick to get going. However, there is one problem for me in the framework, the need to add classes to headers in order to render them, as, believe it or not, headers!

http://bulma.io/documentation/elements/title/

So I've got my RTE, add some content, the usual stuff:

<h2>Sub header</h2>
<p>This is a paragraph where I happily type away in the RTE then click save not worrying about class names or anything.</p>

Then realise that I have literally no easy way of styling these headers. As a default, these will both look like paragraph text unless you do the following:

<h2 class="title is-2")>Sub header</h2>
<p>This is a paragraph where I happily type away in the RTE then click save not worrying about class names or anything.</p>

<h2 class="title is-2")>Another sub header</h2>
<p>This is a paragraph where I happily type away in the RTE then click save not worrying about class names or anything.</p>

Now there's no way in hell I'm going to add a class every time I want a h2 in the RTE (i.e. from the styles dropdown). And in my template, the field is simply rendered thus:

<?php namespace ProcessWire; ?>

<section class="section">
    <div class="container">
        <?php echo $page->body; ?>
    </div>
</section>

Is there a sensible way of handling this? I mean do people not use an RTE in this way? Do they separate all content into header/body fields in order to be able to use classes more easily  in their templates?

A news article for example would have multiple headers and paragraphs, a case for a repeater perhaps?

Any advice is appreciated, thanks.

[dragan]

That's the problem with CSS-frameworks. They do some stuff OK, save you time in the short-run, but they're a pain in the neck when you want to have it your way.

Nowadays I don't understand the wish for using a CSS-framework. At the very least, you should be highly selective (e.g. only get helper-classes and mixins).

tbh, this

<h2 class="title is-2">

looks retarded...

What's known im BEM philosophy as modifiers makes sense, but h already stands for heading, and h2 already states that it's a level 2 heading. Why overcomplicate things so much? What's next?

<p class="is-paragraph">lol</p>
<table class="is-tabular-data">...</table>

 

[rick]

3 minutes ago, dragan said:

That's the problem with CSS-frameworks. They do some stuff OK, save you time in the short-run, but they're a pain in the neck when you want to have it your way.

Nowadays I don't understand the wish for using a CSS-framework.

I agree. I come from a very old school of IBM bookmaster coding so I still prefer the simple approach.

[Sergio]

1 hour ago, SamC said:

Is there a sensible way of handling this? I mean do people not use an RTE in this way? Do they separate all content into header/body fields in order to be able to use classes more easily  in their templates?

Maybe you can create a textformatter to add the classes for you automatically after page save. Or, in your sass file, extend the .title class for all headers.

[LostKobrakai]

Did you see that page? http://bulma.io/documentation/elements/content/

[SamC]

4 hours ago, dragan said:

tbh, this

<h2 class="title is-2">

looks retarded...

Maybe not the best I concur.

Just now, LostKobrakai said:

Did you see that page? http://bulma.io/documentation/elements/content/

Wow. I missed that totally. Feeling stupid, but that's life! Thanks @LostKobrakai