https://github.com/modulojs/modulo

A drop-in JavaScript framework for modular web components, kept to about 2000 lines
https://github.com/modulojs/modulo

api component css framework html javascript modulo modulojs ui web-components

Last synced: about 5 hours ago
JSON representation

A drop-in JavaScript framework for modular web components, kept to about 2000 lines

• Host: GitHub
• URL: https://github.com/modulojs/modulo
• Owner: modulojs
• License: lgpl-2.1
• Created: 2022-09-28T16:20:49.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-15T21:49:54.000Z (8 months ago)
• Last Synced: 2024-09-17T14:22:24.647Z (8 days ago)
• Topics: api, component, css, framework, html, javascript, modulo, modulojs, ui, web-components
• Language: JavaScript
• Homepage: https://modulojs.org/
• Size: 3.7 MB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![](www-src/img/mono_logo_percent_only.png)

# 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").

- Beginner-friendly features inspired by React, Svelte, and Vue.js, in only

  2000 lines of dependency-free, self-building JavaScript. A “no fuss” drop-in

  for existing web apps or Jamstack static sites.

- Try interactive demos and learn more on the website: 

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:

```html

```

2. Now define one or more Modulo web components (custom HTML elements).  First,

use `` and `` 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.:

```html

    

        

            Hello Modulo World!

        

        

            console.log('Hello Modulo JS world!');

        

        

            strong { color: purple; }

        

    

```

3. Now, you can use and reuse this new custom element wherever you want, just

like any normal HTML tag. E.g.:

```html

In a P tag: 

```


* *(Optional)* Download [src/Modulo.js](https://unpkg.com/mdu.js)

  (the single 2000-line file that contains all of the framework) to wherever

  you put JS files for your website (for example, `/static/js/Modulo.js`)

* **Continue?** Want to try more? The official beginner tutorial picks up where

  this leaves off:

  [Ramping Up with Modulo - Part 1](https://modulojs.org/tutorial/ramping-up/part1.html)

## NPM start

Prefer command-line tools, such as NPM? Run the following, and follow the

on-screen commands:

```bash

npm init modulo

```

-----

## License

(C) 2023 - Michael Bethencourt [LGPLv3](https://unpkg.com/mdu.js)