Create-zim-template NPM

Create a Zimjs start-template Beta

npm NPM

Create a Zimjs project fast and powerfull

Usage

Make sure you have npx installed npx is shipped by default since npm 5.2.0)

npx create-zim-template <my-app-folder>

Or with yarn:

yarn create zim-template <my-app-folder>

If not installed please try with install global npm or yarn

1- npm i create-zim-template -g or  yarn global add create-zim-template

2- create-zim-template <my-app-folder->

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .zim         // folder dist output
├── apps       // folder create zimjs code
├    └── index.js
├    └── app1.js
├    └── app2.js
├    └── ****.js
├── asstes       // folder asstes
├    └── css
├    └── img
├    └── js //--> lib cretate.js + zim.js + box2D.js + physics.js + pizzazz3.js = app.js minify 
├── layouts         // layout template html
├    └── default.htm
├── scss            // template css with sass
├     └── style.css
├     └── partials                      
└── styleguide        // option create doc ...etc
      └── index.md
      └── template.html

Exemple page apps

apps/zimapp.js

---

title: exmple zim // this a title of page html <title>{{title}}</title>
                       
---


var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1024;
var height = 768;
var color = light; // ZIM colors like green, blue, pink, faint, clear, etc.
var outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use

var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;

    // see https://zimjs.com/learn.html for video and code tutorials
    // see https://zimjs.com/docs.html for documentation
    // see https://zimjs.com/bits.html for 64 Interactive Media techniques

    // put your code here (you can delete this sample code)

    // with chaining - can also assign to a variable for later access
    new Rectangle()
        .center()
        .drag();

    // without chaining
    // var circle = new Circle(100, pink);
    // circle.center();
    // circle.drag();

    stage.update(); // this is needed to show any changes
}); // end of ready

Dist folder :/ .zim/zimapp.html You can change the folder dist in the file config.yml

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>exmple zim </title>


<script src="/assets/js/app.js"></script>

<script src=""></script>

<meta name="viewport" content="width=device-width, user-scalable=no" />

</head>

<body>

<script>


var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1024;
var height = 768;
var color = light; // ZIM colors like green, blue, pink, faint, clear, etc.
var outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use

var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;

    // see https://zimjs.com/learn.html for video and code tutorials
    // see https://zimjs.com/docs.html for documentation
    // see https://zimjs.com/bits.html for 64 Interactive Media techniques

    // put your code here (you can delete this sample code)

    // with chaining - can also assign to a variable for later access
    new Rectangle()
        .center()
        .drag();

    // without chaining
    // var circle = new Circle(100, pink);
    // circle.center();
    // circle.drag();

    stage.update(); // this is needed to show any changes
}); // end of ready

</script>
</body>
</html>

create with ZIM

Zim : JavaScript Canvas Framework - Created by danzen https://zimjs.com

A consistent, complete, simple and colorful Canvas Framework that provides quick visual results. ZIM is great for learning to code but also powerful for professionals to make games, apps, art and more for desktop and mobile!

Please see the About section for why we use ZIM to make Interactive Media.
https://zimjs.com/about.html