Jump to content

Bulma css framework


SamC
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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>

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...