@crispcode/modux NPM

MODUX

A framework used in front end application creation

Getting started

You can should checkout the Documentation before getting started with MODUX.

Installation

npm install @crispcode/modux --save-dev

You can also create a basic project structure without the need to install modux, by using the npx command:

npx --package=@crispcode/modux -c "modux boilerplate basic create"

How to use

Modux has the following commands available from the command line: Command|Description -|- modux start | Starts the local modux project in development mode modux build | Compiles the project for production. Output will be in the build directory modux boilerplate | Provides information on modux boilerplate. This is used to create project structures based on a template

Add to your package.json scripts:

  "scripts": {
    "start": "modux start",
    "build": "modux build"
  }

To run use: npm start or npm run build

Polyfill

In order to support older versions of browsers, you can use polyfill.io

Modux classes

Name	Usage	Description
Router	`import { Router } from '@crispcode/modux'`	A static class used to manipulate states and urls
Component	`import { Component } from '@crispcode/modux'`	The Component class. Components are the backbone of the application
Module	`import { Module } from '@crispcode/modux'`	The Module class. Modules are the main part of modux

Utils classes

Name	Usage	Description
approx	`import { approx } from '@crispcode/modux'`	Used to approximate a number to a certain number of decimals
Communication	`import { Communication } from '@crispcode/modux'`	The Communication class, used to handle http requests
Cookie	`import { Cookie } from '@crispcode/modux'`	A static class used to manipulate cookies
DateTime	`import { DateTime } from '@crispcode/modux'`	A Date class wrapper
Device	`import { Device } from '@crispcode/modux'`	A static class used to get device information
extend	`import { extend } from '@crispcode/modux'`	Extends an object with another object
font	`import { font } from '@crispcode/modux'`	A font loader
html	`import { html } from '@crispcode/modux'`	Convert string to html
isNumber	`import { isNumber } from '@crispcode/modux'`	Checks if the value is a number
isObject	`import { isObject } from '@crispcode/modux'`	Checks if the object is an Object
loader	`import { loader } from '@crispcode/modux'`	The Loader class is used to preload files
logger	`import { logger } from '@crispcode/modux'`	A class to mimic window.console
loop	`import { loop } from '@crispcode/modux'`	Loop through a collection Object or Array
radians	`import { radians } from '@crispcode/modux'`	Convert an angle from degrees to radians
rnd	`import { rnd } from '@crispcode/modux'`	Generate a random number between two values
scroll	`import { scroll } from '@crispcode/modux'`	A library used for scrolling window or an element
sounds	`import { sounds } from '@crispcode/modux'`	A class used to manipulate Sounds
uid	`import { uid } from '@crispcode/modux'`	Generates a random unique identifier
Url	`import { Url } from '@crispcode/modux'`	A class used to manipulate urls

Configuration

You can create a file called modux.config.js in the root of your folder, which needs to contain a function with one parameter and returns an object. The parameter of the function will be filled with the current webpack configuration. This gives the user a chance to modify the default webpack configuration based on their needs.