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 these engineering goals:
- Smallest overhead possible - all of Mdash is just one 6kb stylesheet
- Compatible with every web project now and in the future
- Leverages the modern web platform
- Easiest codebase to maintain, use, and debug
Try Mdash right now by linking to the CDN files below and visiting the doc site for code samples and full API documentation.
Insert this in the <head> section of your project and you're all set:
<link href="https://unpkg.com/[email protected]/dist/m-.woff2" rel="preload" as="font" crossorigin>
<link href="https://unpkg.com/[email protected]/dist/m-.css" rel="stylesheet">Mdash is also installable as a package: npm install m-.
The path to the stylesheet is node_modules/m-/dist/m-.css. You should still preload the icon font.
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 changes
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-badge, m-card, m-breadcrumb, m-container, m-crumb, m-dot, m-icon, m-menu, m-tab, m-tabs, m-tag
Mdash works with the latest versions of all mainstream browsers.