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 works with any framework - client-side or server-side - or no framework at all because it's made from native HTML, custom HTML tags, and Custom Elements. SSR, SPA, PWA, static site, email template - whatever type of project you have M- will work. This is especially useful to organizations looking to share a design system, but committing to one JavaScript framework or one architecture is not possible or desirable.
Try M- right now by just linking to the CDN files below and then visit the doc site to learn more. If you want to use your own design language, just fork this project and customize the code (it's a really easy codebase to work in).
This is the web, so just add these links in <head>
and you're done!
<link rel="stylesheet" href="https://unpkg.com/m-@1.2.3/dist/min.css">
<script defer src="https://unpkg.com/m-@1.2.3/dist/min.js"></script>
Or install via NPM and bundle and host with your assets: npm install m-
(built files are located in /dist
)
M- 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.
- Clone the repo (or fork)
cd m-
npm install
gulp watch
cd docs
npm install
npm start
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.
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.
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.
- Zip the contents of
docs
excludingnode_modules
. - Go to AWS > us-east-2 > Elastic Beanstalk > Environments > MDocSite-env
- Click 'Upload and deploy' button
- Pick the .zip file from step one, accept the default version label, and click 'Deploy'
- Monitor the deploy. The site goes down for a minute and should automatically come back up with the new version.
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