A design system that fully embraces web standards 🤗
Think of it as HTML6
So modern it feels old!
Because UI should be fun 🥳
It's freedom, baby. Yeah!
Code depressed? Call 1-800-MDASH
28 components, 220+ utility classes, and it's how small???
"Nothing is faster than nothing."
The AWS bill was $90 last month!!
You can stop reading this.
How many of these are there?
15, including this one.
Does it loop though?
This is the web. Let's use it.
What is Mdash
Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.
Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.
What makes Mdash special
Quite literally, nothing. Nothing is exactly what makes Mdash special. There's no new concepts or abstractions. Nothing proprietary, no dependencies, not even a build step. As a result, no other UI library is as small or easy or familiar as Mdash.
Take a look around and compare Mdash's size and markup to see how "nothing" really is better.
Where did Mdash come from
Mdash is the result of building design systems in large engineering organizations where - for better or worse - tech stacks and architectures vary wildly, but the products still need to share common UI elements. It was during this time the TAC CSS methodology was created with Mdash being the first open-source implementation.
Compatible with everything
Mdash can be used anywhere HTML is used because it is HTML. Larger organizations especially benefit here because unlike other UI libraries, Mdash will work with all your products regardless of technology. To demonstrate, here's code samples of 13 different technologies all using the same Mdash component:
In addition to execution speed, pages load faster because Mdash is so much smaller:
Just copy/paste these into
<link href="https://email@example.com/dist/m-icons.woff2" rel="preload" as="font" crossorigin>
<link href="https://firstname.lastname@example.org/dist/m-min.css" rel="stylesheet">
<script src="https://email@example.com/dist/m-min.js" defer></script>
npm install m-
Built assets including custom properties are located in
Mdash 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 Mdash
To make the UI layer incredibly simple and easy.
Depending on the kind of project you're working on, you can use Mdash 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 Mdash supply the final layer of UI.
Frameworks are misused
The UI layer of web applications has been overcomplicated and made dependent upon non-standard frameworks and methodologies that, in the context of generic UI components, do not add value. Frameworks are best applied to application-centric problems like routing, state management, and high-level product-centric component structure. Frameworks are not ideal for pure UI-centric problems like layout, shared UI elements, and generic styles.
The m- prefix
A prefix is required for any custom HTML (tags or elements). The "m" is for markup, because Mdash is all about that beautiful declarative markup! And no the name "Mdash" doesn't have anything to do with Lodash. It was suggested the proper name be changed from "M-" to "Mdash" to help with search engine results.
Mdash 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 Mdash API design is to be familiar. Where possible, Mdash matches native HTML, e.g.
disabled, and when there isn't a native example to follow Mdash 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 Mdash.
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. Mdash 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, Mdash helps you quickly build UI with significantly less code and with the longevity that only comes with standards-based code.