Bulma

[benanamen]

I just ran across the CSS Framework Bulma. Interested in feedback about it.

https://bulma.io/

[Jason Knight]

Like most of these halfwitted incompetent monuments to mental-huffing midgetry, it is painfully apparent the CREATORS of this system do not know enough HTML, CSS, or accessibility to be developing websites, much less telling others how to do so.

Just look at their "responsiveness" page.

https://bulma.io/documentation/overview/responsiveness/

Pixel measurements for breakpoints? Fixed breakpoints? Assuming certain PX values represent specific device types? /FAIL/ at web development on most every level.  The use of PX ALONE should be a giant flare fired in the air warning anyone away from it, but their use of terminology and methodology is broken gibberish nonsense.

JUST like their "Sass map" colour BS
https://bulma.io/documentation/overview/colors/

Which amounts to nothing more than forming a reliance on presentational markup in the form of presentational classes that have ZERO damned business in any competently written HTML.

Just look at the bloated markup with endless pointless classes for nothing and lack of semantics in ANY of the examples. These clowns wouldn't know semantic markup if it bit them in the arse.

Hence derpitude like their cards example:

Code: [Select]

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>
Why does it need the extra DIV around everything? what makes EITHER of the images be mathematical figures. If it's the title/heading for the card, what the bloody blue blazes makes either FRAGMENT a flipping paragraph? Much less the content section that actually appears to be a grammatical paragraph but lacks <p> around it? DERP! AHERPAFREAKINGDERP!

Or the message boxes:

Code: [Select]

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>
DIV with a class for nothing around an obvious paragraph, <p> around a header when we have perfectly good numbered headings for that, what the bloody blue blazes makes these a "complete article"?!? Static BUTTON in the markup that appears to be scripttard only, with a made-up aria role that again, if you need an Aria role you're using the wrong huffing tag or failing to include meaningful attributes -- like TITLE -- on it. Or worse, omitting content that shouldn't be treated as optional!

Non-semantic half-assed HTML with endless pointless idiotic classes for ntohing.

I have NEVER seen a "HTML/CSS framework" that wasn't ignorant incompetent garbage made by people who have not the first blasted bit of business working with either language, and dipshit rubbish like this only further reinforces my belief that the entire CONCEPT of a front-end frameworks is so utterly flawed from top to bottom, it is effectively impossible to make one that's worth a damn.

Just another "missing kid on the milk carton" showing what's wrong with how this industry thinks about doing things.

The only thing this asshattery makes easier is doing things wrong. Complete waste of code for people who want to use more HTML and CSS than they need to, making things as complex, difficult, and hard to maintain as possible.

As evidenced by a simple "view source" of their website, what with the HR used where there's no changes in topic, anchors blindly slopped into NAV, and the endless pointless idiotic derpy "classes for nothing" thrown at every joe-blasted tag.

102k of markup to deliver 7k of plaintext and a half dozen content media elements? /FAIL/ at web development and indicative they don't know enough to be telling anyone else how to build a website. More so with all the "JS for nothing" mated to a lack of graceful degradation.

[benanamen]

Exactly what I was looking for. Thansk DS.

So a "competitor" to Bulma is supposed to be https://tailwindcss.com/. I assume it is the same type of "derpitude".

[Jason Knight]

Tailwind? Even their little TT code example on their home page is 100% cringe-worthy:

Code: [Select]

<div class="md:flex bg-white rounded-lg p-6">
<img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
<div class="text-center md:text-left">
<h2 class="text-lg">Erin Lindford</h2>
<div class="text-purple-500">Customer Support</div>
<div class="text-gray-600">erinlindford@example.com</div>
<div class="text-gray-600">(555) 765-4321</div>
</div>
</div>
See all the presentational classes like text-gray, text-center, h-16, w-15, bg-white, etc, etc? See the INVALID class names with the MD: bs? See how every blasted element has a class for ZERO legitimate huffing reason?

/FAIL/ at the most basic concepts of HTML and CSS, utterly undoing the twenty years of progress we've had since idiocy like <font> and <center> were deprecated. The very notion of using classes in this manner simply broadcasts to the world a failure to understand why CSS exists, how to use it, or why so many things were deprecated in 4 Strict.

Again, a poster child for the "3i" of web development; ignorance, incompetence, and ineptitude.

A likely contributor to why Tailwind's train wreck of a website is blowing 87k of markup to deliver 5.7k of plaintext and only two media elements -- not even 16k of HTML's flipping job. Tied to an ape-shit ridiculous 480k of CSS in three files when they don't even HAVE media targets...

When there is little legitimate reason for any competently coded SITE to need more than 48k in one file per media target FOR THE ENTIRE SITE!

Even just this:

Code: [Select]

  <link rel="stylesheet" href="/assets/build/css/main.css?id=e994f5f9525b4219e81f">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
Is an epic /FAIL/ at web development due to a missing -- and very important -- attribute.

Of course being a front-end framework the fact that they want you to install via NPM? /FAIL/ at separation of concerns too.

This page alone:
https://tailwindcss.com/docs/responsive-design

Being MORE than enough proof these clowns do NOT know enough HTML or CSS to be writing a single blasted thing client side... again with the PX media queries, presentational classes, DIV for nothing, DIV+classes doing numbered headings and SMALL's job, etc, etc, etc.

They've got this idiocy:

Code: [Select]

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

Doing the job of:

Code: [Select]

<div class="describeThisCardType">
<img
src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
alt="Woman paying for a purchase"
>
<div>
<h2>
Marketing<br>
<a href="#" >Finding customers for your new business</a>
</h2>
    <p>
Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
</p>
  </div>
<!-- .describeThisCardType --></div>
Because if you're saying things like "rounded-lg" or "uppercase" or "font-bold" you have utterly and thoroughly failed to divine the entire reason CSS exists, why it's separate form HTML, what semantic markup -- A sick euphemism for using HTML properly -- is for, and to be brutally frank has one's cranium wedged so far up 1997's rectum we'd need to call an orthodontist to handle the extraction.

You LITERALLY might as well go back to using FONT, CENTER, BGCOLOR, LINK, ALIGN, BORDER,  with those TABLE for layout everyone so clearly seems to miss for piss knows what reason. All this idiocy does is recreate that same broken mentally challenged mentality with classes instead of tags and attributes.

As I've said a number of times and places, I do not think it is even possible to create a "front end framework" that isn't total incompetent and ignorant trash -- because how every blasted one of them works -- using classes to say what you want things to look like -- is the antithesis of proper use of HTML and CSS.

Just like the halfwitted bald-faced lie that throwing classes at everything instead of leveraging selectors makes render "faster" or "easier". Since writing twice the code and handing twice the instructions to the browser is going to be better/faster/easier. Tell me another one Josephine.