@crispcode/modux

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.

Change Log

We're using the GitHub releases for changelog entries.