Skip to content

Latest commit

 

History

History
65 lines (54 loc) · 4.47 KB

overview.md

File metadata and controls

65 lines (54 loc) · 4.47 KB
layout title description group toc aliases sections
docs
Customize
Learn how to theme, customize, and extend Boosted with Sass, a boatload of global options, an expansive color system, and more.
customize
false
/customize/
/docs/customize/
/docs/5.3/customize/
/docs/customize/overview/
title description
Sass
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
title description
Options
Customize Boosted with built-in variables to easily toggle global CSS preferences.
title description
Color palette
Learn about Boosted's color palette.
title description
Color theme
Learn about and customize the color systems that support the entire toolkit.
title description
Color modes
Explore our default light mode and the new dark mode, or create custom color modes yourself.
title description
Components
Learn how we build nearly all our components responsively and with base and modifier classes.
title description
CSS variables
Use Boosted's CSS custom properties for fast and forward-looking design and development.
title description
Optimize
Keep your projects lean, responsive, and maintainable so you can deliver the best experience.

Overview

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

Our two preferred methods are:

  1. Using Boosted [via package manager]({{< docsref "/getting-started/download#package-managers" >}}) so you can use and extend our source files.
  2. Using Boosted's compiled distribution files or [jsDelivr]({{< docsref "/getting-started/download#cdn-via-jsdelivr" >}}) so you can add onto or override Boosted's styles.

While we cannot go into details here on how to use every package manager, we can give some guidance on [using Boosted with your own Sass compiler]({{< docsref "/customize/sass" >}}).

For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use.

As you familiarize yourself with Boosted, 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 Boosted.

CSPs and embedded SVGs

Several Boosted 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]({{< docsref "/components/accordion" >}})
  • [Alerts]({{< docsref "/components/alerts" >}})
  • [Breadcrumb]({{< docsref "/components/breadcrumb" >}})
  • [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
  • [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
  • [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
  • [Form star rating]({{< docsref "/forms/checks-radios#star-rating" >}})
  • [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
  • [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
  • [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
  • [Pagination]({{< docsref "/components/pagination" >}})
  • [Quantity selector buttons]({{< docsref "/forms/quantity-selector" >}})
  • [Select menus]({{< docsref "/forms/select" >}})
  • [Tags]({{< docsref "/components/tags" >}})

Based on community conversation, some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), 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.