iamfrntdv / adm-dev-kit

ADM DEV KIT - Component Driven Static Website Development Tool.

# ADM DEV KIT ADM-DEV-KIT is static web server and build tool built with plugins and tools like Node.js, JSPM, Express.js, Browser-Sync, Gulp.js, PostHTML, PostCSS and others. Main goal of ADM-DEV-KIT is to give ability to develop in component driven way. It is also focused on web standards and optimisation.

FEATURES

• Component driven development with independent components;
• No need to use HTML or CSS inside JS for components;
• HTML, JS, CSS is compiled separately;
• Development and build environment;
• Project Init Tool ADM DEV KIT INIT PROJECT - initialise project with ease;
• PostHtml;
• PostCSS - use future css today;
• JSPM - install third party libraries, bundle JS;
• Browser-Sync - automatically reload browser on file changes;
• EsLint - check your JS code;
• StyleLint - check you CSS code;
• Pre-commit;
• Default CSS;
• MY-IP-UI - helps to open project on other devices;
• and much more…

DOCUMENTATION

• Introduction
• Server and Build
• Project Source
• Examples (coming soon)

QUICK START

Manual Project Setup

In project’s folder run command:

npm i —save adm-dev-kit

Example of Project Structure

adm-dev-kit-project-example/
	|- src/
		|- index/
		|- index.pug
	|- views
	|- gulpfiles.js
	|- server.js

Create server file:

//server.js
const app = require('adm-dev-kit');

app.server({
    src: './src',       // working directory
    views: './views'    // express views folder
});

Create build file:

//gulpfile.js
const app = require('adm-dev-kit');

app.build({
    src: './src',       // working directory
    dest: './dest'      // build directory
});

Project’s Source Files

In project’s root folder create src/ folder for project’s source files and view/ folder for view.

Create index.pug inside src/ folder it will represent main page of the project.

Adding JavaScript

JSPM is used as main JS bundler. To add any JS file use JSPM’s System.import:

p.hello-world Hello, World!
script System.import('hello-world.js')

Important to know path to any js file should be relative to src/ folder:

src/
    |- index
        |- hello-world
            |- hello-world.pug
            |- hello-world.js
    |- index.pug
    
index.pug:
...
include index/hello-world/hello-world.pug
...

hello-world.pug:
script System.import('index/hello-world/hello-world/hello-world.js')

Adding CSS

PostCSS is used as main pre and post processor for CSS. To add CSS just use link tag:

link(href="hello-world.css" type="text/css" rel="stylesheet")
p.hello-world Hello, World!

Important to know path in href should be relative to src/ folder:

src/
    |- index
        |- hello-world
            |- hello-world.pug
            |- hello-world.css
    |- index.pug
    
index.pug:
...
include index/hello-world/hello-world.pug
...

hello-world.pug:
link(href="index/hello-world/hello-world/hello-world.css" type="text/css" rel="stylesheet")

Running Server

To run server use:

npm start

After server has started jspm file will be generated automatically to src/ folder. Don’t delete this file, it is required for the build.

Build

To build project just run:

gulp

Gulp will build everything automatically, no worry!

Setting up project using ADM DEV KIT INIT PROJECT

Initialise your project in few simple steps using ADM DEV KIT INIT PROJECT. You can create project automatically or proceed through question form to get

Automatically:

Manual:

adm-dev-kit's Issues

Browser Sync Support

Jspm build fix

Remove unused node modules

Remove unused node modules to prevent

Write better documentation

Performance issue

Performance should be improved for faster page render. Maybe some cache plugins or change watchers or even new way of compiling files.

Markdown Support

It would be great if there was markdown support

Universal routes

Put config out of node_modules folder

While building images url doesn't update in built css

Merge ADM-DEV-KIT-INIT-PROJECT

merge https://github.com/iamfrntdv/adm-dev-kit-init-project

JS and CSS relative to include path

Currently to parse JS or css path should start from root folder no matter where JS or css is, something like this:
<link href="hello-world/hello-world.css"/> where first hello-world is folder name where current css file is

It would be much easier to use something like this:
<link href="hello-world.css"/>

Migrate to postcss-css-variables

It would be good idea to migrate to postcss-css-variables instead of using postcss-simple-variables