search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.37k stars 3.95k forks source link

Where should h1-h6 be used? #1155

Closed backspaces closed 7 years ago

backspaces commented 7 years ago

Overview of the problem

This is about the Bulma Docs I'm using Bulma version [0.5.1] My browser is: Chrome, Canary

I am sure this issue is not a duplicate: searched and didn't find an answer.

Description

I've noticed that h1-h6 have the same font "weight" (size). #393 I've also noticed <h1-h6> used in Bulma examples/sites.

I'd like the docs to mention when I should use them in my css, they seem to be obsolete?

Steps to Reproduce

Simply place <h1>H1 Tag</h1> <h2>H2 Tag</h2> within a Bulma container or section or ...

Expected behavior

Well, I expect the same size due to #393 (although am puzzled by that). But mainly I expect to have some documentation on where to use them and why they are all the same size.

Actual behavior

No explanation as to h1-h6 use. Possibly this is unique to individual Bulma templates?

Thanks for the great project, BTW .. and sorry if this is too noob for words!

backspaces commented 7 years ago

Here is an example from the docs:

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

If I change the h1 to h6 there is no change. And if I change the h's to div's, there seems to be no difference. I'm guessing there is a good reason having to do with fine-points of css.

jgthms commented 7 years ago

It's because the markup has no impact on the styling since HTML and CSS serve different purposes.

More about here http://bulma.io/documentation/overview/classes/

backspaces commented 7 years ago

Makes sense, thanks. But does that mean I could use <div> for just about everything? I even saw <i> used in an example and it had nothing to do with italic!

Great project, btw, and I'm learning Emmet. Unbelievable.

jgthms commented 7 years ago

Yes you can use <div> only if you want, although it's not recommended.

backspaces commented 7 years ago

Thank you for the response, this is puzzling for a noob.

Is there a "best practices" for which tags to use? I assume I just follow the examples but it would be great to know why particular tags are more appropriate than others.

Thanks again!

jgthms commented 7 years ago

Here's more info: http://marksheet.io/html-syntax.html

nedjo commented 7 years ago

What I find works: