Most of the CSS resets and frameworks have a glitch in them. I understand my opinion goes against the grain on this. My opinion, though, is the correct way of looking at this (in my opinion, LOL).
It's about the MVC. The goal of all content management systems is to separate content from presentation and data-processing from content. When you have to "customize" code to meet the needs of the framework, MVC is impossible to achieve – it is defeated.
That's exactly what happens when Bulma zeros out the heading tags h1, h2, h3, h4, h5, and h6. They do exactly the same and zero out all levels of ul, and ol. Heading tags (h1-h6) and ordered and unordered lists (ul and ol tags) present exactly the same as regular text you would find in a paragraph "p" tag.
That's wrong, just plain wrong.
I'm sure the argument is why would you change from Bulma to something else. Well, that's the whole idea behind MVC. Change to another content management system, another templating engine, or another framework of any kind should NOT mean re-doing any content. It should apply to the content seamlessly.
Bulma has it wrong. The default CSS for h1 tag is:
h1 |
display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; |
Bulma takes that all away. No font-size, no margins. If you want the effect of an h1 tag, you have to specify it as <h1 class="is-size-1">Your heading</h1>. Wow, that means you can also use ANY size class. Just as valid is <h1 class="is-size-6">Your heading</h1>. That would create a heading with the same size and spacing as an H6. Wow.
Here's what Bulma makes it look:
<h1>My Heading</h1> =
My Heading
... followed by paragraph text
<h1 class="is-size-1">My Heading</h1> =
My Heading
... followed by paragraph text
And <h1 class="is-size-3">My Heading</h1> =
My Heading
... followed by paragraph text
Sorry for the bad examples. Same for the bad Bulma. My background includes a ten-year stint as a newspaper compositor. (The trade was called "printer", but I had nothing to do with presses). As a compositor, I became intimately involved with fonts, type, and spacing. Even the CSS standards for h1 to h6 weren't really adequate for me, I needed custom spacing to suit previous and next textual elements. So my custom "reset" caters to my needs.
And, here's my "myreset.min.css":
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
/*! By Andy Prevost: My BULMA re-normalize */
html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}
html,body{font-family:"Open Sans",Arial,Helvetica,sans-serif;background-color:#fff}
body{color:#000;min-height:100%;padding-bottom:10px!important}
h1,h2,h3,h4,h5,h6{display:block;font-weight:700!important;line-height:1.2!important;margin:.67rem 0 .3rem!important}
h1{font-size:2.5rem!important}
h2{font-size:2rem!important}
h3{font-size:1.6rem!important}
h4{font-size:1.4rem!important}
h5{font-size:1.25rem!important}
h6{font-size:1.1rem!important}
pre{color:#000;padding:0;margin:0;padding-top:1rem}
code{color:#000;display:block;font-family:courier,monospace;background-color:#f1f1f1;padding:2px;font-size:105%;white-space:pre;padding:1rem;margin:0}
ul,ol{margin:revert;margin-left:revert;padding-left:revert;line-height:1.25}
ul{list-style-position:outside;list-style-type:disc}
ul ul{list-style-type:circle;margin-left:revert}
ul ul ul{list-style-type:square;margin-left:revert}
ol{list-style-position:outside;list-style-type:decimal}
ol ol{list-style:upper-alpha;margin-left:revert}
ol ol ol{list-style:lower-roman;margin-left:revert}
ol ol ol ol{list-style:lower-alpha;margin-left:revert}
li ul,li ol{margin:revert;padding:revert}
p{font-size:1rem;margin:.3rem 0!important}
blockquote{font:italic 400 1.2rem/1.5 "Times New Roman",Times,serif!important;border-left:.4rem solid #039be5;padding:0 1em;margin:2em 0}
.main{padding:1.5rem}
@media screen and (min-width: 1024px){.main{padding:1.5rem}.main.is-medium{padding:3rem}.main.is-large{padding:6rem}}
... and note, I prefer Open Sans as a sans-serif font, that's the first import and I default to that font for the entire site. Feel free to substitute your own preference.
The above fixes most of the sizing and spacing issues. It also fixes a number of form issues – although I do have a custom form css specifically for Bulma framework. There are a few customizations in Bulma that cause some alignment problems when used with validation. One in particular that I am pleased with my own fix, that is the way Bulma implements the <select> tag is to put a div wrapper around it. While it is a recognized way to customize the select tag down caret, it also misaligns when validating and throwing errors. My implementation does not need a wrapper (or Font Awesome objects), looks better (in my opinion), and works nicely with validation error displays. Article about that coming shortly.
Comments
-
Adele 3 months ago
Hello i am kavin, its my first occasion to commenting anywhere, when i read this paragraph i thought i could also create comment due to
this good article.