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

Overview

Kelp was designed to be customized without any build steps or compile process.

  • CSS variables let you modify fonts, colors, sizes, and more.
  • Cascade Layers make it easy to modify existing styles and add new ones.
  • Web components can be configured with HTML attributes and extended with custom events.
  • The entire library is unminified, and written in vanilla CSS and JavaScript.

Add your customizations to a kelp.custom.css file (or whatever name you’d prefer), and load it alongside the main kelp.css file.

<link rel="stylesheet" href="./css/kelp.css">
<link rel="stylesheet" href="./css/kelp.custom.css">

Kelp also includes a custom theme builder you can use to create a custom color palette with your brand colors and identity.