Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Mdash logo

A design system that fully embraces web standards.

Mdash seeks to leverage HTML, not replace it or try to outsmart it.
This makes Mdash ideal for all web projects and skill levels.

linkable | tiny 8kb | responsive | WCAG 2.1 accessible | very compatible

Mdash is a design system based 100% on web standards. This makes Mdash extremely light, very fast, and compatible with just about any type of web project.

Mdash can work with any framework client-side and server-side or no framework at all because it's made from native HTML, custom HTML tags, and Custom Elements. Be it SSR, SPA, PWA, static site, and even some email templates - whatever type of project you have Mdash will work. This is especially useful to organizations looking to share a design system across products.

Try Mdash right now by simply linking to the CDN files below and visiting the doc site for code samples and full API documentation. If you want to apply your own design language, fork Mdash and customize the code (it's a very very easy codebase to work in).

Quick start

This is the web, just link to these in <head> and you're all set!

<link rel="stylesheet" href="">
<script defer src=""></script>

Or install via NPM and bundle with your own assets: npm install m- (built files are located in /dist)

Then try some Mdash:

<m-alert type="success">Success!</m-alert>

Browser support

Mdash works with the latest versions of:

  • Chrome
  • Chrome for Android
  • Safari
  • iOS Safari
  • Firefox
  • Edge

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.

Working on this project

Pre-reqs: Node and Gulp CLI

  1. Clone the repo (or fork)
  2. cd m-
  3. npm install
  4. gulp watch
  5. cd docs
  6. npm install
  7. npm start

That builds Mdash, watches for changes, and starts the doc site. Start coding!

Coding notes

Custom Element constructors have strict rules about what you can safely do inside them. Please get familiar with Requirements for custom element constructors and reactions.

Some components are custom HTML tags that require no JavaScript. Other components are Custom Elements and for these the styles are also maintained in a separate CSS file.

How to publish the npm package

Just run gulp release when a new version is ready to be published. Be sure to set the appropriate semver type (patch, minor, major) in the npm version command in the gulpfile beforehand. Don't forget to then deploy the doc site.

How to deploy the doc site

  1. Zip the contents of docs excluding node_modules.
  2. Go to AWS > us-east-2 > Elastic Beanstalk > Environments
  3. Click 'Upload and deploy' button
  4. Pick the .zip file from step one, accept the default version label, and click 'Deploy'
  5. Monitor the deploy. The site goes down for a minute and should automatically come back up with the new version.

Other stuff

Some IDEs complain about unknown HTML tags. If that's the case, add this list to make it happy:

m-accordion, m-alert, m-autocomplete, m-badge, m-box, m-breadcrumb, m-col, m-container, m-crumb, m-dialog, m-dot, m-icon, m-loader, m-menu, m-row, m-tab, m-tabs, m-tag, m-vbar