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

CSS Layers

Kelp uses CSS layers to control cascade order and scope CSS to the UI library.

  • kelp. The parent layer for the library. Code outside this layer will take priority, making it easier for you to override Kelp with other libraries.
  • kelp.theme. Customize the default theme (colors, fonts, sizes, and so on).
  • kelp.extend. Add new features and customize existing components.
  • kelp.helpers. Add new utility classes and customize existing ones.
  • kelp.effects. Add or override state-based effects (like :hover or :active).

Using CSS layers means you can load your files in any order you want, prevents unexpected side-effects when adding customizations, and lets Kelp work without any build step.

Note: Kelp uses several other internal CSS layers. It's recommend that you do not use them. They can change without notice and create unintended conflicts.