jgthms
Stop altering heading sizes
This is about Bulma.
Overview of the problem
This is about the Bulma CSS framework I'm using Bulma 0.9.4 My browser is: all
Description
Bulma makes no mention of font sizes in the documentation. But as soon as I import the CSS file all my headings shrink. Why is this happening? Please don't do it
Steps to Reproduce
Make an html file with an <h1> element. See it's big. Add Bulma. See the heading is small.
Expected behavior
Heading is big
Actual behavior
Heading is small
Arg. And Bulma also gets rid of bullet points on <ul><li>. What is going on here?
What is going on here?
Bulma uses Jeremy's own minireset before applying its custom styling.
Use title and subtitle classes to set your headings sizes.
And Bulma also gets rid of bullet points on <ul><li>
Use the .content class on a parent to reintroduce typical content styles.
I would highly recommend reading the documentation. https://bulma.io/documentation/elements/content/
I never understood this decision too. What's the point of having <h1>My Title</h1> being the same size as paragraph text? None. Why do we have to add classes to each title like <h1 class="title is-1">My Title</h1>? Besides the time wasting to figure out what's wrong, adding this class is IMHO pure useless boilerplate. H1 should be a title by default, not a paragraph, it's changing the semantics of the html tags.
Moreover, if you don't have control over some generated pieces like markdown, it just screws the result. There are workarounds, like wrapping it using content and such, but these are still workarounds. Here again, time is wasted looking for them since it is so unintuitive.
...same for getting rid of bullet points. CSS frameworks should improve an existing page by default, not render it unreadable without adding extra classes everywhere. My two cents.
That said, thanks for this library. It's open source and a lot of work, so thank you for that. Nevertheless, if I could change one little thing to this css framework, it would be exactly that: to not override h1-6 and bullet points.
There are workarounds, like wrapping it using content and such, but these are still workarounds.
I wouldn't call adding the .content wrapper a workaround. That's a logical designation. Not all pages or designs warrant having a default style on all the elements, so adding a single class that opts you into traditional document styles is a nice compromise.
CSS frameworks should improve an existing page by default
Bulma is intended for designing interfaces rather than pages or documents in particular. I'd argue that's a different concern which warrants a different tool.
There are plenty of semantically good reasons to use <ul> in interface design, and I always turn off bullet points for those. If the interface includes a segment of typical page content, it makes sense to wrap that portion of the interface with a .content.