A design system that fully embraces web standards.
Because UI should be fun.
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!
Tiny design system means a big...probability of faster pages.
"Nothing is faster than nothing."
The AWS bill was $90 last month!!
You should stop reading this.
How many messages are there?
16, including this one.
Does it loop though?
This is the web. Use it.
What is M-?
M- (pronounced "em dash") is a UI library. It's small and robust enough to be used for basic websites or a shared design system.
What makes M- special?
Quite literally, nothing.
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 common UI elements.
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:
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 your UI layer simple and easy.
The UI layer of web applications has been overcomplicated and made dependent upon non-standard frameworks and methodologies that, in the context of UI components, do not add much value. Frameworks are best applied to application-centric problems like routing, state management, and some high-level component structure. They are not ideal for UI-centric problems like layout, shared UI elements, and generic styles.
Depending on the kind of project you're working on, you can use M- on its own or alongside your framework of choice. In the latter case, the framework is responsible for the structure and state of your application while HTML and M- supply the final layer of UI.
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!
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 with the longevity that only comes with standards-based code.