A design system that fully embraces web standards.
Because everything else is a pain.
It's freedom, baby. Yeah!
Does 👏 not 👏 suh 👏 port 👏 IE.
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."
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?
It's called the web, people. Use it.
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- is compatible with everything
As a simple demonstration, here's 12 different technologies all using the same M- component:
In addition to execution speed, pages load faster because M- is so much smaller:
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!
npm install m-
Built assets including custom properties are located in
M- works with the latest versions of:
- Chrome for Android
- iOS Safari
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-
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.
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!
M- believes in and is committed to the web platform. Developing on the web is awesome because:
- It's open
- Has low barriers to entry
- Easier than other platforms
- Available on virtually every device in the world!
- Has the biggest and most active user base by far!
The intent of the M- API design is to be familiar. Where possible, M- matches native HTML, e.g.
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!
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.