A design system that fully embraces web standards.

Because everything else is a pain.

It's freedom, baby. Yeah!

Does 👏 not 👏 suh 👏 port 👏 IE.

Standards #FTW

Depressed? Call 1-800-M-DASH

Some say it's the HTML6 we never got.

So modern it feels old!

React is a scam.

Tiny design system means a big...probability of faster pages.

"Nothing is faster than nothing."
-Me

My AWS bill was $42 last month!!

You should stop reading this.

How many messages are there?

17, including this one.

Does it loop though?

No.

M- seeks to leverage HTML, not replace it or try to outsmart it.
This makes M- ideal for all web projects and skill levels.
linkable tiny 6kb   responsive WCAG 2.1 very compatible zero dependencies

Quick start

It's called the web, people. Use it.

or npm

Introduction

What is M-?

M- (pronounced "em dash") is a UI library. It's small and robust enough to be used as your product's design system or for a basic website.

What makes M- special?

Quite literally, nothing. M- bucks the trend of fussy over-engineered solutions.

There are no new concepts or methodologies. Nothing proprietary, no dependencies, and no build steps. It's just a novel approach to leveraging standards that results in the smallest and most compatible UI system available.

M- works with any framework or no framework and works for all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.

Where did M- come from?

This approach to standards-based design systems is the result of building several of them in large engineering organizations where - for better or worse - tech stacks and project architectures vary wildly, but need to share a common system of UI components.

<m->

M- is compatible with everything

M- can be used anywhere HTML is used because it is HTML. That means SSR, SPA, PWA, static sites, and email templates are compatible, as well as virtually* all JavaScript frameworks past, present, and future. That's the power of leveraging web standards!

As a simple demonstration, here's 12 different technologies all using the same M- component:

*Framework compatibility with Custom Elements is being tracked on custom-elements-everywhere.com. Today, all but one works with this standard.

Performance

M- is fast! Its execution speed comes from leveraging standards as much as possible in order to minimize code, retain browser optimizations, and eliminate dependencies. The latest JavaScript frameworks and virtual DOMs are still relatively expensive abstractions with execution overhead, and when it comes to code, nothing is faster than nothing!

In addition to execution speed, pages load faster because M- is so much smaller:

M- 6.8kb
Bootstrap 71.4kb
Material Web 79.5kb
Zurb Foundation 87.8kb
React Bootstrap 103.1kb
Material-UI 134.2kb
Semantic UI 174.3kb
Microsoft Fabric 244.1kb
Note: Sizes are min+gzip and include stylesheets, scripts, and runtime dependencies. In other words, this is the overhead before you've written your first line of code.

In 2020 Material-UI was overtaken by Antd as the most popular React design system. Antd is 392kb min+gzip (too fat to fit in the chart!). "But you gotta tree-shake it!" Yeah, as if being a total pig wasn't bad enough now I have to put in the effort to help it lose weight. Antd would no doubt be < 100kb min+gzip if it leveraged HTML. We need to stop the React over-engineeering!

Installation

CDN

Development: https://unpkg.com/m-@1.2.3/dist/dev.[css|js]

Production: https://unpkg.com/m-@1.2.3/dist/min.[css|js]

npm

npm install m-

Built assets including custom properties are located in dist/.

Browser support

M- works with the latest versions of:

Other modern browsers that support Custom Elements are likely to work, but are not tested (file a bug if you see something). IE is not supported and is unlikely to work even if you polyfill.

More about M-

Purpose

To make [the UI part of] Web Development great again.

It's all become too complicated and time-consuming. The front-end is starting to feel like enterprise Java.

Jimmy Fallon's ew!

So, within the scope of design systems, M- brings the easy back. It gives you a complete set of modern compatible-with-everything UI components instantly available from a CDN. No downloads. No CLI. No configuration. No build steps. No prespiling the virtual tree-shake lint matrix. It does this by embracing HTML (and CSS and JavaScript) and relentlessly leveraging it. The result is a fun, uniquely small, and fast design system with standards-level longevity.

The m- prefix

A prefix is required for any custom HTML (tags or elements). "M" is short for markup, because M- is all about that declarative markup!

Design philosophy

M- believes in and is committed to the web platform. Developing on the web is awesome because:

M- was designed with all that in mind. It's why CDN install is the first option and not buried or unavailable as if linking to other resources on the internet is a last resort. It's why M- components are built with standard, approachable tech and not a popular JavaScript library. It's why there is no special syntax or proprietary ideas and why there's no dependencies. It's why the project is open source.

The intent of the M- API design is to be familiar. Where possible, M- matches native HTML, e.g. type="", name="", disabled, and when there isn't a native example to follow M- strives to use familiar patterns, e.g. dismissible="false" for Alert was chosen because it feels similar to the native draggable="false" attribute. If you could cover up all the m- prefixes in your markup, the hope is you couldn't tell the difference between native HTML elements and M-.

It's for everyone!

The JavaScript community has been convinced of an awful lie:

Modern web development requires special tools, syntax, compilers, and all sorts of time-wasting pain.

The web is an open platform accessible to everyone and so a design system for the web shouldn't require advanced knowledge just to get started, and it shouldn't require a commitment to learn a specific framework's idioms and API in order to make full use of it. M- serves true beginners equally as well as it does professional software engineers. So, whether you're building your first website or a large scale application with millions of users, M- helps you quickly build UI with significantly less code and standards-based code.