modulojs / modulo

A drop-in JavaScript framework for modular web components, kept to about 2000 lines
https://modulojs.org/
GNU Lesser General Public License v2.1
12 stars 1 forks source link
api component css framework html javascript modulo modulojs ui web-components

Modulo

Modulo is a lightweight framework for creating HTML Web Components: Reusable snippets of HTML, CSS, and JavaScript that create new HTML-like tags that can be used and reused anywhere on your site. Modulo runs entirely in the browser, and can be incorporated with just a couple lines of code into any HTML file (see the "Quick start"), such that no terminal usage is necessary. However, if you prefer, you can also start projects using NPM from the Terminal (see the "NPM start").

Project Status: alpha (Well-documented with lots of examples, but still a work in progress -- help by trying it out!)


Quick start

  1. Include in any HTML file the single Modulo JavaScript file loaded from a CDN:
<script src="https://unpkg.com/mdu.js"></script>
  1. Now define one or more Modulo web components (custom HTML elements). First, use <template Modulo> and </template> to mark where in your HTML you are defining our components. Then, add "Template", "Script", and "Style" tags, to incorporate HTML, JavaScript, and CSS respectively into your component. E.g.:
<template Modulo>
    <Component name="HelloWorld">
        <Template>
            Hello <strong>Modulo</strong> World!
        </Template>
        <Script>
            console.log('Hello Modulo JS world!');
        </Script>
        <Style>
            strong { color: purple; }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
  1. Now, you can use and reuse this new custom element wherever you want, just like any normal HTML tag. E.g.:
<x-HelloWorld></x-HelloWorld>
<p>In a P tag: <x-HelloWorld></x-HelloWorld></p>

NPM start

Prefer command-line tools, such as NPM? Run the following, and follow the on-screen commands:

npm init modulo

License

(C) 2023 - Michael Bethencourt LGPLv3