Learn more about Modulo definitions through a tour of definition-related features with interactive component examples.

Component Parts

More info: Definition Types / Component Parts

Once you have included Modulo and activated it, you can fill it up with Component definitions, which are special tags in HTML format. These work like keywords or configuration settings in order to set-up the component and define it's apearance and behavior. Component definitions start with a "Component" opening tag in the format of <Component name="HelloWorld">.

What goes inside of Component Definitions? Why, Component Parts, of course! By using a Template and Style in a Component we can make a very simple starting component definition:

Example 1: SimpleStyle

MVC - The Model-View-Controller paradigm somewhat matches here: The State is the Model, the Template is the View, and the Script is the Controller.

Example 2: To-Do MVC

Template and Style are just the beginning. Here's the classic To Do MVC App written using Template, State, and Script, and taking advantage of these Modulo features: Template Variables ({{ item }}), Template Tags ({% for %} ... {% endfor %}), and DOM directives (state.bind, on.click).

Core Definitions

Markdown and HTML… at once!? Modulo uses a little "magic trick" that's visible if you do "View Page Source": This documentation is written in Markdown files that "disguise themselves" as HTML. This gets the best of all worlds: Directly viewable in a browser, directly editable in an editor, and directly loadable by Modulo. Try viewing source!

More info: Definition Types / Core Definitions

Modulo can do more than just define web components. It ships with dependency and configuration management tools (see "Include" and "Configuration"), a management command system with a powerful SSG / SSR build system (see "Artifact" and built-in management commands), a content management system (see "ContentList" and it's built-in content types), and finally file inclusion and namespacing tols (see "Library" and -src= pre-processor).

Example #1: Loading and Displaying Content

Combining the "Component Part" described above with the ContentList described here, we can create a simple Markdown file-based content management system:

What's "building" or "bundling"? Building" is a feature of Modulo where it packs up all the components, JavaScript, and CSS you have loaded on a particular page into single .js and .css files, respectively. Each single file, called a build, contains all the code from all your components and various includes, optimized for fast loading. You can run this and all Modulo commands from the Modulo menu, available in your browser's console.

Note that as with custom Component Parts, users can create or customize new, custom Core Definitions types as well, as well as registering custom management commands, or content types or formats.

Example #2: Custom Bundle

Using the Core Definition of <Artifact>, we can create custom build bundles ("artifacts") that only target certain operations, or modify code in a certain way. Since Artifacts use Modulo's templating language, we can use <script Configuration> to create a custom minify templateFilter, and output a file called: custom_bundle.(hash).js:

Custom Types

More info: Custom Types

It's easy to make re-usable Component Parts using JavaScript (or variants). See below for how easy it is to make your own version of a component part, to integrate custom JavaScript code or third party libraries: