comix-ngn

What it does

Webcomics aren't ready for the Web. Each page is spread over multiple webpages, wasting time and bandwidth. Its bad for authors & really bad for readers, especially on phones. Comix-ngn works faster than any server alone.

Instead of constantly requesting the same assets every page, comix-ngn handles everything in browser, loading only the next page when it needs. The result is that the webcomics load much faster for the end user, and its much more efficient than the traditional methods.

Features

Remarklably easy to set up, can be done in two HTML tags
36 KB Minified + No external dependicies
Loads fast on first load, 200-400 ms
Drastically reduces page reloads and page requests, as everything is down on a single page
Does not conflict with any other JS libraries, it minds its own buisness
Retains majority of features from traditional webcomics, while adding useful new ones
jQuery plugin to use together with jQuery
Extensible with plugins
Compatible with all modern browsers
Requires Javascript

Get Started

Simply include the script, [Core]:

<script src="comixngn.js.org/ghs/1.1.1/comixngn.min.js"></script>

And create a Webcomic [Stage]:
```
<div id="cng" class="venue"></div>
```
Adding the class venue turns any element into a stage
To control the Stage. add a [Controller]:
```
<div cglink="cng"><button class="prev"></button><button class="next"></button></div>
```
Adding the attribute cglink turns any element into a controller. Note: cglink binds the controller to a [stage]

To add additional features, use a plug-in:

<script src="bellerophon.cng.min.js"></script>

[Recommended]: For fastest load time, copy and paste the contents of bellerophon.cng.min.embed.html into your html. While this adds 1.8KB to your HTML file that won't be cached, it will virtually eliminate the app from increasing the load time of your site*.
- set defer = true or !0, to defer the loading of all of the apps scripts so that it is removed from the critical render path. Set it to false or 0, to load immediately [Not Recommended].
- set mainsrc to the version of comix-ngn use want to use: comixngn.js or comixngn.min.js [Recommended]. You probably shouldn't change this unless you are debugging.
- If using Bellerophon Embed, do not add additional plugins via the script tag. Since they load immediately while comixngn.js may be deffered, the plugins will panic and refuse to load. Simply add the plugin path as a string to the loadcng array in Bellerophon Embed to include plugins.

*Time to render or DOM Content Loaded

Setting the Stage

Now that you have created a stage, you will need a script.JSON (referred to as scripts). Scripts determine the behavior and settings of the app, which pages it should include and how to display them, and how everything is organized.
How to make Scripts
Comix-ngn comes with a self-contained tool that creates scripts aptly dubbed Writer.html. Since its an html page, you can simply run it in any browser and download the script it produces. Do not upload Writer.HTML to your file host, it serves no purpose for the end user and is quite large.**
Writer

**Compared to comix-ngn ;)

Demo Sites

All copyrights belong to their respective owners.

Images and text owned by other copyright holders are used here under the guidelines of the Fair Use provisions of United States Copyright Law. The following sites are meant to mirror their counterparts as closely as possible using the framework, showing its flexibility. If you are a copyright owner, and you feel that your work is being improperly used please notify me immediately at seun40@gmail.com.

xkcd
~1522/1548, minor glitches, DIFF
Questionable Content
3001/3001, DIFF
Spinnerette
520/? minor graphical glitches and missing features, DIFF
Cyanide and Happiness
0/3984
Subnormality
0/?
Homestuck
0/?
Gunnerkrigg Court
0/1537
El Goonish Shive
0/?
Misfile
0/?
MegaCynics
0/?
Surviving the World
0/?

License

MIT