M- seeks to leverage HTML, not replace it or try to outsmart it.
This makes M- ideal for all web projects and skill levels.
linkable | tiny 6kb | responsive | WCAG 2.1 accessible | very compatible
M- (pronounced "em dash") is a design system based 100% on web standards. This makes M- extremely light, very fast, and compatible with just about any type of web project.
M- 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 M- will work. This is especially useful to organizations looking to share a design system across products.
Try M- 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 M- and customize the code (it's a very very easy codebase to work in).
This is the web, just link to these in
<head> and you're all set!
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/min.css"> <script defer src="https://unpkg.com/[email protected]/dist/min.js"></script>
Or install via NPM and bundle with your own assets:
npm install m- (built files are located in
Then try some M-:
M- works with the latest versions of:
That builds M-, watches for changes, and starts the doc site. Start coding!
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.
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.
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-dialog, m-dot, m-icon, m-loader, m-menu, m-row, m-tab, m-tabs, m-tag, m-vbar