Lib-appjs-es NPM

Lib-AppJS

Lib-AppJS is an application with modular architecture. Lib-AppJS based on Ecmascript for architecture, jQuery to fast build DOM elements, Bootstrap and animate.css for pretty view. I reject to use vue or another framework because of more dynamically situations than they may give. And i stops on jQuery (again :) First modules { Alert, Dialog } allow You to full control Bootstrap's alert and modal components. You can make Your own modules as You wish.

Installation

Via github:

git clone https://github.com/in-the-beam/lib-appjs-es

Via npm

npm install --save-dev lib-appjs-es

Install dependencies

npm install

Include JS

Create a file, i.e. lib-appjs.js with content like in Wiki_Home.md Then include lib-appjs.js in your project Example:

// assume you required the jquery and ther librarien before
//require('path/to/lib-appjs/src/js/index_all.js'); // Whole project
require('path/to/lib-appjs/src/js/index_app.js'); // Only LibAppJS

$(function()
{
    let App     = new window._app( {} );
    App.alert   = new window._alert( {} );
    App.dialogs = [
        new window._dialog( {} ),
        new window._dialog( {} )
    ];
    App.dialog = () => {
       return App.dialogs[ 0 ];
    };
    window.App  = App;
});

Include CSS

in your sass file Whole project @include 'path/to/lib-appjs/src/sass/lib-appjs.scss'; Only LibAppJS @include 'path/to/lib-appjs/src/sass/styles';

Using dist

Head section

    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
        <link rel="stylesheet" href="dist/vendor.min.css">
        <link rel="stylesheet" href="dist/lib-appjs.min.css">
        <link rel="stylesheet" href="dist/demo.min.css">

Scripts section

        <script src="dist/manifest.js"></script>
        <script src="dist/vendor.js"></script>
        <script src="dist/lib-appjs.min.js"></script>
        <script src="demo.js"></script>
    </body>