https://github.com/jfbrennan/m-

The modern web's design system.
https://github.com/jfbrennan/m-

6kb better-code css cures-coding-migraines custom-elements fun html javascript less-code more-winning no-code not-react painless pwa spa ssr standards static-site the-m-is-for-freedom

Last synced: 30 days ago
JSON representation

The modern web's design system.

• Host: GitHub
• URL: https://github.com/jfbrennan/m-
• Owner: jfbrennan
• License: mit
• Created: 2019-12-04T09:29:25.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-20T19:21:21.000Z (3 months ago)
• Last Synced: 2024-09-29T00:42:02.333Z (about 1 month ago)
• Topics: 6kb, better-code, css, cures-coding-migraines, custom-elements, fun, html, javascript, less-code, more-winning, no-code, not-react, painless, pwa, spa, ssr, standards, static-site, the-m-is-for-freedom
• Language: CSS
• Homepage: http://m-docs.org
• Size: 3.94 MB
• Stars: 300
• Watchers: 10
• Forks: 12
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


  

    

  



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 6kb | responsive | accessible | zero dependencies



Mdash UI elements are built with 100% web standards following the [TAC CSS methodology](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology). This makes Mdash [extremely light](https://m-docs.org/#performance), very fast, and compatible with 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements). 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](https://m-docs.org) for code samples and full API documentation. 

To apply your own design language, fork and customize Mdash. It's 100% vanilla HTML, CSS, and JavaScript.

## Quick start

This is the web. Include these files in `` and you're all set!

```html

```

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

Then try some Mdash:

```html

Success!

```

## Browser support

Mdash works with the latest versions of all mainstream browsers.

## Working on this project

_Pre-reqs:_ [Node](https://nodejs.org) and [Gulp CLI](https://gulpjs.com/docs/en/getting-started/quick-start)

1. Clone the repo (or fork)

1. `cd m-`

1. `npm install`

1. `gulp watch`

1. `cd docs`

1. `npm install`

1. `npm start`

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

### Developer 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](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance).

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

The [TAC CSS methodology](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology) is followed.

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-dot, m-icon, m-loader, m-menu, m-row, m-tab, m-tabs, m-tag, m-vbar

```