Framework

Static Kit is a simple, standardized toolkit to aid in the creation and compilation of various static assets (Javascript, CSS, or images) for traditional frontends of all kinds.

This library is simply an organizational wrapper to minimize and normalize the process of setting up and operating common development tools. The framework is designed to work hand-in-hand with the Static CLI to compile and optimize assets (the CLI leans heavily on esbuild, Dart Sass, sharp, and other third-party tools for the various compilation and optimization tasks).

Installation

The Static Framework is best installed via the Static CLI. To install with the CLI, use the install command.

# Install the Static Framework into
# a new directory named "static"
$ static install --dir static
Static SUCCESS: Static Framework was installed.

The framework is also able to be downloaded directory from Github:

https://github.com/wndrfl/static-kit

Configuration

The Static Framework can be configured through the .staticrc file that exists in the framework’s top directory. This JSON-formatted file is able to supply important instructions to the CLI as to various customizable features within the framework.

# Example .staticrc
{
    # A path to a custom file that will
    # be used to compile all static assets instead of
    # the native Static CLI compiler (optional)
    "compiler" : "./path/to/custom/compiler.js",

    # Relative paths for all static src
    # and dist directories (required)
    "paths" : {
        "dist" : {
	    "css" : "dist/css",
	    "images" : "dist/images",
	    "js" : "dist/js"
	},
	"src" : {
	    "images" : "src/images",
	    "js" : "src/js",
	    "scss" : "src/scss"
	}
    }
}

File Structure

The Static Framework file structure is divided into two main sections: src and dist. Within each of these two directories is a series of subdirectories organized by asset type – js, css, and images.

# Default file structure
/static
    ∟ .editorconfig
    ∟ .gitignore
    ∟ .staticrc
    ∟ package.json
    ∟ /dist
        ∟ /css
        ∟ /images
        ∟ /js
    ∟ /src
        ∟ /css
            ∟ # scss build files
        ∟ /images
            ∟ # unoptimized images
        ∟ /js
            ∟ /lib
            ∟ # js build files

.editorconfig
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

.staticrc
The .staticrc file provides JSON-formatted configurations for the Static CLI.

/src
The src directory contains all editable, uncompiled versions of any Javascript, SCSS, or image files. Generally, this is the directory that developers should operate in, as this is the directory that is ultimately referenced when the CLI attempts to compile static assets. When the CLI “watches” for changes, it monitors the contents of this directory, as well.

/dist
The dist directory contains all compiled or bundled versions of any Javascript, SCSS, or images files. During each compilation, the files in this directory are overwritten with new compiled versions. It is not recommended to directly edit any files in this directory, as they have a high chance of being overwritten during the next compilation.