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 6kb | responsive | accessible | zero dependencies
Mdash is a design system. It is based 100% on web standards following the TAC CSS methodology, which has helped Mdash achieve its engineering goals:
- Smallest overhead possible (all of Mdash is just one 7kb stylesheet)
- Compatible with every web project past, present, and future
- Leverage the modern web platform
- Easiest codebase to maintain, use, and debug
Try Mdash right now by simply linking to the CDN files below and visiting the doc site for code samples and full API documentation.
This is the web, so link to these files in <head> and you're all set:
<link href="https://unpkg.com/[email protected]/dist/m-.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/m-.js" defer></script>Or install via NPM npm install m-. The path to the stylesheet is node_modules/m-/dist/m-.css.
Thank you for your interest in improving Mdash! You'll need to clone or fork the repo and have Node.js installed.
Run these and start making source code changes
npm installnpm run watch
Edit doc site and preview your changes
- Edit /docs/index.html
- Open it in your browser to see
Opening a pull request
- Be sure your changes have followed the TAC CSS methodology
- If editing docs, please follow the patterns you see in that file
- For the PR summary in GitHub please use the conventional commit format
Some additional notes
The project follows the TAC CSS methodology. Getting familiar with that will help when making contributions.
Your IDE might warn about unknown custom HTML tags. If that's the case, this is the list of custom tags your IDE needs to know about:
m-accordion, m-alert, m-autocomplete, m-badge, m-box, m-breadcrumb, m-col, m-container, m-crumb, m-dot, m-icon, m-loader, m-menu, m-row, m-tab, m-tabs, m-tag, m-vbar
Mdash works with the latest versions of all mainstream browsers.