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.

Our two preferred methods are:

1. Using Chassis CSS via package manager so you can use and extend our source files.
2. Using Chassis CSS's compiled distribution files for a quick prototype — see the Quick Start — though you lose 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 how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Chassis.

CSPs and embedded SVGs

Several Chassis CSS components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via background-image) so you can more thoroughly review your options.

• 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

Based on community conversation, some 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. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.