Skip to main content Accessibility Feedback
Skip to Documentation Content
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About
Documentation
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About

Custom Install

Kelp provides a few different ways to customize which features and components are included.

Download Tool

The Custom Download Tool let’s you pick-and-choose which features and components you want to include… without having to touch the command line or run your own build.

It generates a custom CSS file and (if needed) JavaScript file with just the stuff you want.

It’s the fastest and easiest way to customize your build, and ensures you don’t miss anything important (like forgetting some CSS that goes with a JS component).

Use the Custom Download Tool →

Buildless Modules

The /modules directory in the source code contains Kelp’s unbundled vanilla CSS and JavaScript.

The CSS files use @import and the JavaScript files use the native ES imports (import). You can comment out or delete the imports for any features you don’t want, and create your own custom setup in seconds.

/* Components... but only load callouts */
/*@import "./components/badges.css";*/
@import "./components/callouts.css";
/*@import "./components/avatar.css";*/
/*@import "./components/skeleton.css";*/
Performance Consideration. Downloading many smaller files dramatically reduces the effectiveness of gzip and brotli compression. You might consider running a build or using the custom download tool.

Run a Build

You can drop the source code into your build tool of choice, or use the included Kelp ESBuild script to quickly compile your customized CSS and JavaScript files.

To use the included ESBuild script, run the following command line prompts…

npm install
npm run build

File Structure

Kelp includes both bundled and modular files.

For performance reasons, it’s strongly recommend that you either use the bundled version, or create your own bundle.

  • /css - The bundled CSS file.
  • /js - The bundled JavaScript files.
  • /modules - The modular CSS and JavaScript files.

None of Kelp’s files are minified.

If your server sends files compressed with gzip or brotli, minifying saves just a single kb of file size but makes the code far harder to read, debug, and work with.