It reeks of the same utter and total lack of understanding the point of HTML and CSS as every other "framework". The moment you see presentational classes like this:
class="txt-center txt-xxl">
RUN! You're looking at the same inept nonsense that made HTML 3.2 an abortive train wreck of how not to use a markup language. ALL they're doing is using classes instead of tags and attributes to say in the markup what they want things to look like.
The same can be said of the use of fairy tale made up tags that provide ZERO semantics since the UA has no idea what they MEAN. All those <m-whatever"> tags semantically mean nothing.
I mean just view-source their "examples" page to see the asshattery in action.
<body class="bg-offwhite">
<m-container>
<m-breadcrumb>
<nav>
<a href="/">Home</a>
<span>Examples</span>
</nav>
</m-breadcrumb>
<h1 class="mar-b-xs">Examples</h1>
<h2 class="txt-gray-5 mar-t-none">Take a peek at one of these demo pages or scroll down to see tons of component examples</h2>
<m-row>
<m-col span="4">
<m-box>
<h4 class="mar-t-none"><a href="/examples/checkout">Checkout demo</a></h4>
<p>A recreation of Bootstrap's Checkout example page demonstrating form elements and validation.</p>
</m-box>
</m-col>
<m-col span="4">
<m-box>
<h4 class="mar-t-none"><a href="/examples/pricing">Pricing demo</a></h4>
<p>A recreation of Bootstrap's Pricing example page.</p>
</m-box>
</m-col>
</m-row>
</m-container>
H2 on something that is NOT starting a new subsection, H1 that is NOT the heading that everything on the SITE is a subsection of, skipping over H3 entirely, "row" tags instead of just letting something like flex-wrap do it's job? /FAIL/ at basic HTML. The next part is even worse:
<hr>
<h1 id="alert" class="txt-center txt-xxl">Alert</h1>
<m-container>
<h4>All types</h4>
<m-alert type="info">Sign up for <a href="#alert" class="fnt-bold">premium</a> to see the full list</m-alert>
<m-alert type="success">Your order has been received! A confirmation email was sent to john@example.com</m-alert>
<m-alert type="warn">Your flight has been canceled.</m-alert>
<m-alert type="error">You do not have permission to delete records.</m-alert>
<h4>Not dismissible</h4>
<m-alert type="info" dismissible="false">You can't get rid of me.</m-alert>
<!-- <h4>Autodismiss (default of 4 seconds and 5, 6, 7 seconds)</h4>-->
<!-- <div>-->
<!-- <m-alert type="info" autodismiss>Goodbye in 4...</m-alert>-->
<!-- <m-alert type="success" autodismiss="5">Goodbye in 5...</m-alert>-->
<!-- <m-alert type="warn" autodismiss="6">Goodbye in 6...</m-alert>-->
<!-- <m-alert type="error" autodismiss="7">Goodbye in 7...</m-alert>-->
<!-- </div>-->
</m-container>
<hr>
Jumping straight from H1 to H4, meaningless tags wrapping obvious paragraphs, horizontal rule after it (placing it before another H1) when not breaking thought... It's almost like they're choosing the few semantic tags based on what they want things to look like, and that's NOT HTML's flipping job.
You get to the next one and they're wrapping single input/label with fieldset -- it's called a fieldSET for a reason and all they're creating is alt-nav hell. Later on they're using LABEL to do LEGEND's job and don't even provide labels for checkboxes!
And that's before we talk about how they just slop anchors into menus with zero block-level breaks. View-source their home-page and you get monuments to "eye cans haz teh intarwebs" like:
<body class="flex" style="height: 100%">
<m-icon id="menu-toggle" name="menu" class="hidden pos-absolute pointer txt-md"></m-icon>
<aside id="menu" class="pad-all-md">
<div>
<div id="m-logo" aria-label="M- logo" class="push pull fnt-bold pos-relative mar-b-xs"><span class="pos-absolute">m-</span></div>
<small class="block mar-b-md txt-center txt-gray-6">1.4.0</small>
<nav>
<a href="/" class="block mar-b-xs">Home</a>
<a href="/examples" class="block mar-b-xs">Examples</a>
<a href="/comparison" class="block mar-b-xs">Comparison</a>
<a href="https://github.com/jfbrennan/m-" class="flex align-items-center mar-b-xs"><m-icon name="github" class="mar-r-xs"></m-icon> GitHub</a>
<a href="https://twitter.com/realEmDash" class="flex align-items-center mar-b-xs"><m-icon name="twitter" class="mar-r-xs"></m-icon>Twitter</a>
<hr class="mar-t-md mar-b-md">
<h4 class="mar-t-none mar-b-sm">Layout</h4>
<a href="/head-tags" class="block mar-b-xs">Head tags</a>
<a href="/container" class="block mar-b-xs">Container</a>
<a href="/grid" class="block mar-b-xs">Grid</a>
Because of course the logo and menu are a literary aside, it's fine to just dump anchors into a NAV tag, and the first headings on a page should be depth 4 with no 3, 2, or 1 preceding them, an HR before a numbered heading makes total sense, and you need to crap the same classes on each and every blasted element over and over -- NOT! Utter and total /FAIL/ at web development as it's telling non-visual users to go f*** themselves.
Much less how they've suckered themselves into using 21k of markup for 6.9k of plaintext with barely any "real" formatting, not even 12k of HTML's job.
It is painfully and obviously apparent -- as with all frameworks -- that these clowns do NOT know enough HTML or CSS to be creating a system like this in the first place, much less having the unmitigated GALL to tell others how to do so. Utterly and totally devoid of proper semantics, the separation of concerns, or even the slightest understanding of what HMTL and CSS are, much less are even for!
Topic: How do you feel about Mdash? (Read 1418 times)