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.