Coffeescript User Interface System (CUI)

Documentation

https://programmfabrik.gitbooks.io/coffeescript-ui/

https://programmfabrik.github.io/coffeescript-ui/doc/index.html

Installation

npm install --save-dev git+https://github.com/programmfabrik/coffeescript-ui.git

Icons: It is necessary to include font-awesome to be able to use icons. CUI also provides some icons which can be used with svg- prefix.

Versions

• cui.min.js: Minified (default version)
• cui.js: No minified (recommended for development)

Usage

With require

require('coffeescript-ui') (uses default version)
require('coffeescript-ui/public/cui.js')

With <script> tag

<script src="node_modules/coffeescript-ui/public/cui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="node_modules/coffeescript-ui/public/cui.js" type="text/javascript" charset="utf-8"></script>

Use cui.css (Optional, recommended)

With CUI.CSSLoader

CUI.ready ->
    new CUI.CSSLoader().load(url: 'node_modules/coffeescript-ui/public/cui.css')

With require

require('coffeescript-ui/public/cui.css')

With <link> tag

<link rel="stylesheet" type="text/css" href="node_modules/coffeescript-ui/public/cui.css">

Usage with webpack

It's recommended to use webpack.ProvidePlugin to avoid "require" in each file.

plugins: [
    ...
    new webpack.ProvidePlugin({
        'CUI': "coffeescript-ui" // or "coffeescript-ui/public/cui.js" (for development)
    })
    ...
] 

Build

The first step is to download all dependencies with npm install

After that, it's necessary to run one of the following build commands

• npm run build: Builds the default version
• npm run build:minify: Builds the minified version
• npm run build:all: Builds one of each version
• npm run build:watch: Builds the default version and watch for changes

You will find the bundled file inside public folder.

It's not necessary to build the project before use it, because public directory has always the last version.

Test

To run the tests:

npm run test

Live Demo

https://programmfabrik.github.io/coffeescript-ui/demo/index.html

Live Tutorial

https://programmfabrik.github.io/coffeescript-ui/tutorial/index.html