Socket
Book a DemoInstallSign in
Socket

maille

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

maille

Component library for MithrilJS

latest
Source
npmnpm
Version
0.1.8
Version published
Weekly downloads
3
50%
Maintainers
1
Weekly downloads
 
Created
Source

Maille: A component library for Mithril

Maille is a component library built for Mithril JS.

Learn more about Maille (as well as see a site built with Maille) @ maille's homepage.

Quickstart

Maille can be used with modern build tools and without, usually just a <script> or import away.

With ParcelJS

The examples below assume you are using ParcelJS, or any sufficiently powerful and convenient build toooling.

index.ts:

import m from "mithril";

import "maille/components/alert/style.css";
import Alert from "maille/components/alert";

const App = {
  view: (vnode) => {
    return   m("main", [
      m("h1", "New Maille Project"),
      m("h2", "Thanks for using Maille!"),
      m(
        Alert,
        {title: "Default", description: "Alert description"},
        m("p", "A detailed explanation, anything can go here"),
      ),
    ]);
  }
}

With Vanilla JS (no build tooling)

Maille can be used without build tooling -- no compilation step needed, just include the styles and javascript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import all Maille styles at once -->
    <link rel="stylesheet" href="https://mrman.gitlab.io/maille/target/maille.min.css"/>

    <!-- You can also import maille styles one by one, here are some examples -->
    <!-- <link rel="stylesheet" href="https://mrman.gitlab.io/maille/target/button.shared.min.css"/> -->
  </head>
  <body>
    <!-- All in one (includes Mithril, Fonts, etc) -->
    <script src="https://mrman.gitlab.io/maille/target/maille.min.js"></script>

    <!-- If you'd prefer the lighter SVG font-less build, which contains Mithril -->
    <!-- <script src="https://mrman.gitlab.io/maille/target/maille.fontless.min.js"></script> -->

    <!-- Your code goes here -->
    <script type="text/javascript">
      // m is assumed to be mithril
      // maille.min.js exports a global called MAILLE
      m.mount(
        document.body,
        m("div", [
          m("h1", "Your Web Site"),
          m(MAILLE.Button, {rounded: true}, "Rounded"),
        ]),
      );
    </script>
  </body>
</html>

For more information on how can use Maille, check out maille's homepage.

Development

To get started developing maille, to the following:

  • Clone this repository
  • make (installs required packages, performs a build)
  • make serve (serves the landing page with parcel

The landing page should serve as an example for every component that is in Maille.

Some more useful Makefile targets:

  • make ts-build (builds the project into dist)
  • make ts-watch (build

Keywords

mithril

FAQs

Package last updated on 26 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts