Customize

Overview

There are multiple ways to customize Chassis. Your best path can depend on your project, the complexity of your build tools, the version of Chassis CSS you're using, browser support, and more.

Two paths are supported:

1. Using Chassis CSS via package manager to use and extend the framework source files.
2. Using Chassis CSS's compiled distribution files for a quick prototype — see the Quick Start — though this loses the ability to override settings or tokens at build time.

For your own Sass compiler, see using Chassis CSS with Sass.

For teams that will own the framework long-term, Clone and Customize covers replacing the token foundation with your own and shipping a build that's entirely yours.

As you familiarize yourself with Chassis, continue exploring this section for more details on the global options, the color system, how Chassis builds components, the CSS custom properties, and how to optimize your build.

CSPs and embedded SVGs

Several Chassis CSS components include embedded SVGs in the compiled CSS to style components consistently across browsers and devices. For organizations with stricter CSP configurations, all instances of embedded SVGs (all applied via background-image) are documented below for review.

• Accordion
• Carousel controls
• Close button (used in alerts and modals)
• Form checkboxes and radio buttons
• Form switches
• Form validation icons
• Navbar toggle buttons
• Select menus

Options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Carefully review your own security policies to decide on the best path forward.