npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

m-

v3.2.0

Published

Mdash is a design system based on web standards. It's extremely small (see comparison chart), fast, simple, and compatible with any JavaScript framework.

Downloads

467

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jfbrennanjfbrennan

Keywords

uiwebcsshtmlfrontendwebcomponentscustomelements

Readme

Mdash UI elements are built with 100% web standards following the TAC CSS methodology. This makes Mdash extremely light, 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. 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 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 <head> 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">
<script src="https://unpkg.com/[email protected]/dist/m-.js" defer></script>

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

Then try some Mdash:

<m-alert type="success">Success!</m-alert>

Browser support

Mdash works with the latest versions of all mainstream browsers.

Working on this project

Pre-reqs: Node and Gulp CLI

  1. Clone the repo (or fork)
  2. cd m-
  3. npm install
  4. gulp watch
  5. cd docs
  6. npm install
  7. 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.

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 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