I've tried out several responsive CSS frameworks over the years. Bootstrap is out of the question: while it is popular, it is bloated and ends up being restrictive.
The most promising early in my search is called "Responsee". While it it responsive, there are some challenges with the column grid, in particular lining up columns in different rows. I finally gave up and sought out only flexbox based frameworks.
I found Bulma, quite by accident. It is refreshing in that it tries to only be a CSS framework. It misses the mark, but it is the closest to ideal. Still, I won't recommend it to anyone else – I am invested and committed to Bulma. I am able to work around its considerable limitations.
Where it misses the mark is where most CSS frameworks miss the mark: they go well beyond a CSS framework and attempt to be website application systems based on a CSS framework. For example, Bulma includes add ons like a carousel system that works, but has very limited application. It's actually easier to use Owl Carousel than the one offered by Bulma.
The major flaw in the Bulma CSS framework is quite similar to most CSS frameworks. They start with a CSS reset but do not "un-reset" to restore the CSS back to the W3 standards. I do agree a CSS reset is needed.
Why a CSS reset?
Each browser has its own interpretation of what HTML tags should look like. As a website designer, implementing websites across all the available browsers means that a reset is needed. The reset essentially goes back to the basics – the intent of the original CSS specification. Bulma does include a "mini-reset" that removes padding, margins and returns many HTML tags back to basics. But Bulma goes much further than a reset. Two of the aspects of this frustrate me considerably. That is Bulma completely removes all of the heading tags (h1 to h6) to have the same size and spacing as basic text. If you want a H1 tag to function as a heading, you can't simply say "<h1>Heading</h1>". You have to include Bulma's sizing. So that changes the heading to "<h1 class="is-size-1">Heading</h1>". And ditto for H2 to H6. That means you can also specify the unusual as in "<h1 class="is-size-6">Heading</h1>" and end up with a heading what would be equivalent to H6. Bulma did exactly the same thing with nested lists. UL and OL tags are broken, bereft of any values. A UL or OL tag presents as plain text with no list indentation.
I find that very limiting. I'm used to MVC (model-view-controller), where content should be separate from presentation. By having custom tags, that MVC is broken.
Since writing this, I have discovered other anomalies with Bulma. One of those is in the CSS code that defines a select tag. When used in conjunction with validation code, the errors are misplaced because of the "div" wrapper placed around a "select" tag. I've redefined how the "select" tag is displayed – still displaying a custom down caret (arrow) but without requiring any wrapper at all. That is totally unobtrusive and works perfectly with validation valid/error messages. My version also works with the various sizing options too. Now, before any comments start, a Bulma purist would suggest adding columns and place the error in the column beside the "select". Not quite so fast. Any framework – CSS, JS, or PHP – is intended to shorten the development process, minimize code, and be unobtrusive. I don't need more wrappers, more columns, or more code. I need simplicity.
Here's my "bulma-fix.min.css" file (and keep in mind, this is core fixes only, see the separate article on typography):
/* box sizing added by andy */
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; }
/* END: box sizing added by andy */
/* hamburger menu fixes */
.navbar-burger span{height:3px;left:calc(50% - 9px);width:18px;z-index:9}
.navbar-burger span:nth-child(1){top:calc(50% - 7px)}
.navbar-burger span:nth-child(2){top:calc(50% - 1px)}
.navbar-burger span:nth-child(3){top:calc(50% + 5px)}
.navbar-burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
/* END hamburger menu fixes */
/* navbar divider background color */
.navbar-divider{background-color: #E4E4E4;}
/* fix placeholder color */
.input::-moz-placeholder,.select select::-moz-placeholder,.textarea::-moz-placeholder{color:rgba(54,54,54,.8)}
.input::-webkit-input-placeholder,.select select::-webkit-input-placeholder,.textarea::-webkit-input-placeholder{color:rgba(54,54,54,.8)}
.input:-moz-placeholder,.select select:-moz-placeholder,.textarea:-moz-placeholder{color:rgba(54,54,54,.8)}
.input:-ms-input-placeholder,.select select:-ms-input-placeholder,.textarea:-ms-input-placeholder{color:rgba(54,54,54,.8)}
.input[disabled]::-moz-placeholder,.select fieldset[disabled] select::-moz-placeholder,.select select[disabled]::-moz-placeholder,.textarea[disabled]::-moz-placeholder,fieldset[disabled] .input::-moz-placeholder,fieldset[disabled] .select select::-moz-placeholder,fieldset[disabled] .textarea::-moz-placeholder{color:rgba(54,54,54,.3)}
.input[disabled]::-webkit-input-placeholder,.select fieldset[disabled] select::-webkit-input-placeholder,.select select[disabled]::-webkit-input-placeholder,.textarea[disabled]::-webkit-input-placeholder,fieldset[disabled] .input::-webkit-input-placeholder,fieldset[disabled] .select select::-webkit-input-placeholder,fieldset[disabled] .textarea::-webkit-input-placeholder{color:rgba(54,54,54,.3)}
.input[disabled]:-moz-placeholder,.select fieldset[disabled] select:-moz-placeholder,.select select[disabled]:-moz-placeholder,.textarea[disabled]:-moz-placeholder,fieldset[disabled] .input:-moz-placeholder,fieldset[disabled] .select select:-moz-placeholder,fieldset[disabled] .textarea:-moz-placeholder{color:rgba(54,54,54,.3)}
.input[disabled]:-ms-input-placeholder,.select fieldset[disabled] select:-ms-input-placeholder,.select select[disabled]:-ms-input-placeholder,.textarea[disabled]:-ms-input-placeholder,fieldset[disabled] .input:-ms-input-placeholder,fieldset[disabled] .select select:-ms-input-placeholder,fieldset[disabled] .textarea:-ms-input-placeholder{color:rgba(54,54,54,.3)}
/* END fix placeholder color */
.box{box-shadow: 0 0.5em 0.5em -0.125em rgb(10 10 10 / 20%),0 0 0 1px rgb(10 10 10 / 10%)}
.section:first-of-type{padding:1.5rem 3rem}
.footer{padding:1.5rem}
@media only screen and (max-width: 768px){.section:first-of-type{padding:.7rem .5rem}footer .hero-body{padding:.5rem}.footer{padding:.5rem}}
/* color helpers applied to everything */
.is-primary{background-color:#00d1b2;border-color:transparent;color:#fff}
.is-link{background-color:#485fc7;border-color:transparent;color:#fff}
.is-info{background-color:#3e8ed0;border-color:transparent;color:#fff}
.is-success{background-color:#48c78e;border-color:transparent;color:#fff}
.is-warning{background-color:#ffe08a;border-color:transparent;color:rgba(0,0,0,.7)}
.is-danger{background-color:#f14668;border-color:transparent;color:#fff}
.is-checkradio{background-color:#fff}
/* forms */
input,select,textarea{color:#171717!important}
.fieldset{background-color:transparent;border-radius:5px;color:#4a4a4a;display:block;margin:.5rem;padding:.5rem;border:1px solid #C9C9C9}
.fieldset > legend{color:#363636;display:block;font-size:1rem;font-weight:700;background-color:#fff;padding:0 5px;width:max-content;border:0 none}