Bulma: Put by default the usual behaviour of h1, h2, ...

[somenxavier]

If you don't put class="title" or "class="title is-1" you don't get the usual size of <h1>Hello</h1>. Please change that this behaviour was the default one.

[somenxavier]

You needs to put in <div class="content">. Please document it

[rogervila]

Its already documented: http://bulma.io/documentation/elements/content/

[somenxavier]

But it's not documented in titles: http://bulma.io/documentation/elements/title/

[jgthms]

For consistency, the semantic value of HTML elements is separated from its default styles. Hence why Bulma only uses CSS classes: http://bulma.io/documentation/overview/classes/

[backspaces]

Are the Hn's the only cases where you choose to override HTML?

I've seen any number of sites style the Hn's, but never not distinguish between them.

My 2cents: leave html alone, even if you think of it as a legacy mistake. For example, in Vue components that convert to html, your conversion of Hn's will break the intended use.

I was lead to believe Bulma was class-only based.

Is there a way to turn off the Hn conversions .. like eliminating one of the css files?

Thanks.

[joallard]

Sorry to bump this up again, but this is a major turn-off as someone new to Bulma. I was looking at different frameworks, and Bulma was like a breath of fresh air: no nonsense, descriptive, semantic classes. It gets out of my face. All good.

But now, I'm trying it out on an existing website, and it messes up all the content. All styles are reset, h1 h2 h3 are meaningless, and I need to add a class to everything. For me, that's the opposite of expressiveness, it's boilerplate code. Boilerplate makes me miserable. Just like boilerplate classes in other frameworks, like btn-xl-4-foo make me miserable.

So I add .content on the parent for things to behave normally. But now all Bulma selectors have higher specificity than what I put in, so I'll need to scope it to .content every time I want to add a style.

From someone who was looking for a framework that gets out of my way when I don't need it, and gives me powerful simple tools when I do need it, I'm sorry to say but this design decision is really disappointing.

Now I need to choose whether to remove Bulma, or to deal with adding classes and selectors everywhere. Or add back the default styles manually.

[Skaven]

My point of view is exactly the opposite - I very much appreciate, that I do not have to set margin and padding and overwrite size or line spacing every time I use the title. The way Bulma solves typography is absolutely great and it is one of the reasons why I chose this framework for my projects.

[p4tin]

I know this issue is closed but I am using in code a library that convert markdown to HTML and wanted to use bulma to style the site but I will not be able to now. sigh!!!

[joallard]

Still struggling with this through a year later, I've gradually created a Bulma dereset file as a Gist.

It's not good at all – it's mostly bits of code I've patched over different personal projects – but it's better than starting over every time, trying to remember good defaults for h1, h2, everything, then writing those in. (Edit: I might also have copy-pasted code from Bulma's .content, to be double-checked for attribution purposes)

If people affected want to contribute, I'm happy to make this into a repo. Just leave comments on there. Maybe someday we'll figure out an adaptable solution that's acceptable to most people using Bulma, but for now, this kinda works.

Edit: Actually, @jgthms, would you accept a PR implementing a setting to switch between reset and normalize on builds?

[dagnelies]

One more vote for restoring the default behavior of h1-h6 without extra classes.

I cannot stress enough how utterly counter intuitive it is to have them all the same size/weight as a paragraph. It is just confusing and pointless.

I assume every user of bulma/buefy sooner or later runs into this. Like "WTF?! Why is my title rendered as normal text?!?" ...checks in the browser debugger what's wrong ...and everyone googles its way through this strange boilerplate to add. H1 is exactly that, a big title, why on earth would you like to render it small? To force the user to add boilerplate code?! Success! 😉

[laurensV]

The extra class on its own is not that bad of an idea to me, but what is really annoying: the styles under .content are different than the corresponding Bulma classes.

Class title is-1 should be exactly the same as h1 under the content class.

Also, the presedence is really strange if you want to combine the two. For example:
I have the content class wrapped around my entire app, but then if you mix h1.content with the class subtitle is-3, the font-size of is-3 gets the precedence (so the text becomes smaller which is what I suspected and want), but the font-weight is not the font-weight of .subtitle (font-weight: 400;) but the font-weight of .content h1 (font-weight: 600;)

Ideally I would just want h1 have the same styling as title is-1, unless I overwrite it with other classes, like is-3 or subtitle. This can only be accomplished if the .content class is removed and the styling matches the classes..

[zhqu1148980644]

Same issue when using react-mardown