Comment by Ryosuke on "Can you recommend any clean and modern framework for UI?"

I'm assuming you're looking for a CSS framework, and not something like a component system for React/JS.

I really dig Semantic UI and the way they define their classes. It makes it easy to create an entire themed site without altering/overriding too much of their CSS. And I think it looks more modern than Bootstrap. It doesn't have an official built-in calendar module, but the community has one.

But Bootstrap is pretty standard, everyone loves that one. You can also check out Bulma, which pimps itself as a modern framework.

I tried Kube and didn't like it. I didn't like their grid system, or the way you override CSS. Foundation is a bit oversimplified, it'd be a better base to modify. I didn't like Materialize or Material Web Components. Materialize was broken in half the browsers (dropdowns should always work), and the Web Components were missing half the components I needed (which Materialize had -- but executed poorly).

You can check out this list on Github of CSS frameworks to see some others I didn't mention (like Primer from Github).

I could almost take semantic UI seriously until I looked at the tag soup of the examples. The best I can say about them is at least they seem to understand H1..H6's bloody job which is more than I can say for bootcrap or W3.css... but the moment I see this:

<td>
    <h4 class="ui image header">
        <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
        <div class="content">
            Mark
            <div class="sub header">Executive
        </div>
    </h4>
</td>

It's a safe bet they don't know enough about HTML to be telling others how to use it. An H4 in a TD as the only content. Sorry, that's a TH SCOPE="ROW"'s bloody job. Just like other examples that should have headings -- the text even SAYS heading, and they don't.

<div class="ui container">
    <div class="ui relaxed divided items">
        <div class="item">
            <div class="ui small image">
                <img src="assets/images/wireframe/image.png">
            </div>
            <div class="content">
                <a class="header">Content Header</a>
                <div class="meta">
                    <a>Date</a>
                    <a>Category</a>
                </div>
                <div class="description">
                    A description which may flow for several lines and give context to the content.
                </div>
                <div class="extra">
                    <img src="assets/images/wireframe/square-image.png" class="ui circular avatar image"> Username
                </div>
            </div>
        </div>

Classes for nothing, endless pointless DIV for nothing, braille and screen readers would treat some sections as run-on sentences., with anchor and a class doing H4's job.

... and again another of these frameworks that fails to use the bloody MEDIA attribute -- since I'm SO sure their screen media layout makes sense for print, aural, tty, and braille.

WHY do people use these things? How can any perceived advantages outweigh the blatant ineptitude?

Search Hashnode