Toolbox for frontend apps

Usage no npm install needed!

<script type="module">
  import zelzCrank from 'https://cdn.skypack.dev/@zelz/crank';



yarn add -D @zelz/crank

@zelz/crank is a frontend toolkit developed by Zelzen. It's designed to let you focus on building apps instead of building build tools. That said, it does have opinionated rules and guidelines that we have found work well.
Of course, you can always override to suite your own project.

Config Files


Extend config off of eslint-config.js



    "extends": "./node_modules/@zelz/crank/eslint-config.js"


Babel Preset

Add @zelz/crank/babel to your .babelrc file.
This preset includes option for production and dev builds.

Should only be used in react based projects.

Supports options for target, modules, and loose. These are passed to @babel/preset-env.



    "presets": [
        ["@zelz/crank/babel", {
            "mode": "browser" // Either browser | node


These rules are based around usage of CSS-Modules.
That means ids and universal-identifiers are errors.
It is also strict against nesting classes (in less or sass), to allow for composable and easier to read CSS



    "extends": "@zelz/crank/stylelint-config"

CLI (crank)

crank also comes with a cli tool to help with commits, commit linting, and bootstrapping project.

Run npx crank --help to get a list of available commands.