Features:

• Customizable CSS property prefixes. For example, the prefix for "display" can be changed from "dis" to "d".

• Optional custom value names. For instance, the value "flex" can be associated with the custom name "fx".

• Selective addition of !important keyword utility classes. By setting generate_utility to true, utility classes with !important can be generated for each CSS property.

• Responsive design on-demand. Users can set screen sizes and apply CSS properties selectively for each size. Responsive settings are defined in the screenSizes object. The responsive property can be set to true or false for each CSS property.

• Use of tokens. Tokens are lists of names associated with values, organized by families, and reusable. Tokens prevent repeating the same names and values across multiple CSS properties. Each token is written as a CSS variable.

• CSS variables that are automatically generated.

• Automatic documentation of the CSS output. An interactive documentation is generated automatically.

• Instant file size impact of the settings.

• Offline functionality.

To get started, users need to download the starter project, edit the build.json file, and run it through a browser. The tool requires only a text editor, a web server, and a browser. The JSON settings include:

• separator: A string to split names, values, and utility prefixes.

• responsiveSeparator: A string to split screen size names.

• utilitiesPrefix: A string for utility classes.

• cssVariablesPrefix: A string used for tokens' CSS variables.

• screenSizes: An object that defines screen sizes.

The JSON tokens are lists of names associated with values, organized by families. Tokens are optional and can be left empty if unused.

The JSON properties object has keys that are valid CSS property names. Each CSS property has a prefix, generate_from to refer to a token, a list of values, an optional list of names, responsive which is a boolean, and a generate_utility boolean to generate utility classes.