paginize v1.0.1

Note: Paginize is highly tailored to how I write frontend code, so don't expect it to be super customizable or anything. Maybe that'll change in the future(?)

Paginize

A little thing I made to make my frontend development life somewhat easier :P.

Paginize basically generates a HTML and a CSS file based on some functions you've used.

Paginize also has support for elements, which anyone can make and are easily reusable.

Include

var paginize = require("paginize");

Functions

init(title) - Basically "creates" the HTML/CSS code.

• title: Title of the page Returns variable you have to provide in every other function

var document = paginize.init("Title");

webFont(document, fontname) - Sets the font of the entire page.

• document: Document variable
• fontname: Can be either system (default font of current system you're on), Roboto (Roboto from Google Fonts), or Inter (Inter from Google Fonts), these are basically the only fonts I use, and if I need one, I'll add it

addJquery(document, type) - Adds Jquery to the page.

• document: Document variable
• type: Can be either regular (aka uncompressed), min, slim, or min-slim/slim-min

addTag(document, parent, tag) - Appends a HTML tag to parent

• document: Document variable
• parent: Parent element (CSS selector), e.g. body. Will get appended to said element.
• tag: HTML tag, like <h1>I am a Heading 1!</h1>

addStyles(document, selector, code) - Adds properties to selector

• document: Document variable
• selector: CSS selector, e.g. body
• code: Javascript object with styles, e.g.:

{
    "width": "50px",
    "background": "black"
}

editStyle(document, selector, property, value) - Edits/adds one property of selector

• document: Document variable
• selector: CSS selector, e.g. body
• property: CSS property you want to add/change
• value: Value of property

useTemplate(document, path, parent, classname) - Use a template from a HTML file (meant for Paginize)

• document: Document variable
• path: Path to template
• parent: Parent element (CSS selector), e.g. body. Will get appended to said element.
• classname: The class name of the elements in the template. In the template, "PAGINIZE_CLASS" will get replaced by this. Classname can be generated with randomClassName()

Templates look a bit like this:

<style>
    /* These styles will be added to the CSS file */

    .PAGINIZE_CLASS {
        font-size: 50px;
    }
</style>

<paginize-content>
    <h1 class="PAGINIZE_CLASS">
        Anything within the paginize-content tag will be appended to the "parent" argument.
    </h1>
</paginize-content>

After it has been added, people can further customize the element by simply editing styles of the classname argument.

export(document, directory) - Creates the actual HTML/CSS files, for you to do whatever you want with it

• document: Document variable
• directory: The directory the files should be exported to. For example, if you enter ./out, out will contain index.html and style.css

randomClassName() - Generates a random class name for you to use, made up of random numbers and letters (starting with an underscore) Returns the class name