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!

Standards #FTW

Code depressed? Call 1-800-MDASH

28 components, 220+ utility classes, and it's how small???

"Nothing is faster than nothing."
-Me

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?

No.

Mdash intends to leverage HTML, not replace it or try to outsmart it.
This makes Mdash ideal for all web projects and skill levels.
linkable
tiny 6kb
responsive
zero dependencies
very compatible
accessible

Quick start

This is the web. Let's use it.

or npm

About

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 like SSR, SPA, PWA, static site, and even popular email clients.

What makes Mdash different?

Quite literally, nothing. Nothing is exactly what makes Mdash different:

It's just HTML plus custom HTML. 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:

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

Performance

Mdash is fast! It is by all practical measures instant. The execution speed comes from leveraging standards and reducing abstractions as much as possible in order to minimize code and retain browser optimizations. When it comes to code, nothing is faster than nothing. In addition to execution speed, pages load faster because Mdash is so much smaller than other UI libraries:

Mdash 6.8 kb
Bootstrap 71.4 kb
Material Web 2 79.5 kb
Zurb Foundation 87.8 kb
React Bootstrap 103 kb
Material-UI 134 kb
Semantic UI 174 kb
Microsoft Fabric 244 kb
Shoelace 294 kb
Material Web 3 353 kb
Note: Sizes are min+gzip and include stylesheets, scripts, and runtime dependencies. They do not include icons. In other words, this is the overhead before you can write your first line of code.

Installation

CDN

Mdash is designed for production use with a CDN. Copy and paste the following into the <head> section of your document and you're golden.

Icon font preload

<link href="https://unpkg.com/m-@3.2.0/dist/m-.woff2" rel="preload" as="font" crossorigin>

The preload option tells the browser to start downloading the icon font now instead of waiting for the stylesheet to be parsed. If you don't use icons, you don't need this.

Stylesheet

<link href="https://unpkg.com/m-@3.2.0/dist/m-.css" rel="stylesheet">

This file includes custom properties, all component styles, and utility classes.

Custom Elements

<script src="https://unpkg.com/m-@3.2.0/dist/m-.js" defer></script>

The defer option tells the browser to download the script but delay its evaluation to avoid blocking document parsing.

NPM

If the CDN is not an option, you can install the Mdash package and bundle the files.

npm install m-

Built assets (those three files above) are located in /dist. The hyper optimization of inlining is also possible with Mdash because its so small. Go for it you speed demon!

Browser support

Mdash works with the latest versions of all major browsers. Please file a bug if you see something not working as expected.

More about Mdash

The purpose

To return the UI layer back to its rightful owner: the web platform.

The UI layer - the pixels - should be built with the modern web platform. Technologies likes CSS Custom Properties, Web Components, and new HTML and JavaScript features can and should be used to create the UI layer. No dependencies needed!

The application layer - data, routing, business logic, services - should also be built with the modern web stack as well as 3rd-party libraries and frameworks.

Mdash 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, or whatever. It does this by embracing HTML (and CSS and JavaScript) and relentlessly leveraging it. The result is a fun and uniquely small design system with standards-level longevity.

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.

Design philosophy

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

Mdash 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 Mdash 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 Mdash API design is to be familiar. Where possible, Mdash matches native HTML, e.g. type="", name="", 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.