Customize

# CSS variables

Cartzilla builds upon the foundation of CSS custom properties (also known as CSS variables) introduced by Bootstrap, enhancing these capabilities with additional variables for its custom components. This approach allows for extensive customization of every component as well as global variables, covering styles from sizes and spacing to colors.

## Discovering CSS variables

To identify the CSS variables available for a specific component, you can use the following methods:

1. Browser inspector: The easiest way to learn about the CSS variables associated with a component is to highlight it with the browser inspector. This tool will display all CSS properties, including custom variables, applied to the selected element.
2. Source files: Open the `.scss` file corresponding to the component inside the `src/scss/components` folder using your editor. CSS variables are typically listed at the top of the file, corresponding to the parent wrapper of the component.

### Example of globals CSS variables

Cartzilla also provides global CSS variables that allow for template-wide customization. These are defined within the `:root` selector.

    // As seen in the Browser inspector

    :root, [data-bs-theme=light] {
      --cz-primary: #f55266;
      --cz-secondary: #6c727f;
      --cz-success: #33b36b;
      --cz-info: #2f6ed5;
      --cz-warning: #fc9231;
      --cz-danger: #f03d3d;
      --cz-light: #fff;
      --cz-dark: #222934;
      ...
    }

### Range Slider component CSS variables

Here is how CSS variables are scoped within the Range Slider component:

    // Inside src/scss/components/_forms.scss
    // During compilation, the --#{$prefix} placeholder is replaced with cz-, reflecting the predefined variable prefix in the final CSS output.

    .range-slider {
      --#{$prefix}range-slider-height: #{$range-slider-height};
      --#{$prefix}range-slider-bg: #{$range-slider-bg};
      --#{$prefix}range-slider-connect-bg: #{$range-slider-connect-bg};
      --#{$prefix}range-slider-handle-size: #{$range-slider-handle-size};
      --#{$prefix}range-slider-handle-bg: #{$range-slider-handle-bg};
      --#{$prefix}range-slider-handle-active-bg: #{$range-slider-handle-active-bg};
      --#{$prefix}range-slider-handle-border-width: #{$range-slider-handle-border-width};
      --#{$prefix}range-slider-handle-border-color: #{$range-slider-handle-border-color};
      --#{$prefix}range-slider-handle-border-radius: 50%;
      --#{$prefix}range-slider-pips-color: var(--#{$prefix}body-color);
      --#{$prefix}range-slider-pips-font-size: #{$range-slider-pips-font-size};
      --#{$prefix}range-slider-pips-border-width: var(--#{$prefix}border-width);
      --#{$prefix}range-slider-pips-border-color: #{adjust-color($border-color, $lightness: -6%)}; // stylelint-disable-line
      --#{$prefix}range-slider-tooltip-padding-y: #{$tooltip-padding-y};
      --#{$prefix}range-slider-tooltip-padding-x: #{$tooltip-padding-x};
      --#{$prefix}range-slider-tooltip-bg: #{$range-slider-tooltip-bg};
      --#{$prefix}range-slider-tooltip-color: #{$range-slider-tooltip-color};
      --#{$prefix}range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size};
      --#{$prefix}range-slider-tooltip-border-radius: #{$tooltip-border-radius};
    }

## Customizing the template using CSS variables

Cartzilla allows for flexible customization through CSS variables, which can be applied at both the global and component levels to tailor the styling to specific needs.

### Global scope customization

To customize the template at a global level, you can define custom CSS variables within the `<style>` tags and place them in the `<head>` section of your HTML file. This method affects the styling page-wide.

Example of adding global variables to the `<head>` section:

    <!DOCTYPE html>
    <html lang="en" data-bs-theme="light">
      <head>
        <style>
          :root {
            --cz-primary: #007bff;  /* Blue shade for primary color */
            --cz-secondary: #555e67; /* Darker shade for secondary color */
          }
        </style>
        ...
      </head>

### Component scope customization

For more localized changes, component-scoped variables can be added directly to a component's parent element using the `style` attribute. This method allows you to customize individual components without affecting others.

Example of customizing the `.range-slider` component:

    <div class="range-slider" style="--cz-range-slider-bg: #e9ecef; --cz-range-slider-handle-bg: #007bff;">
      <!-- Range slider component content -->
    </div>

### Understanding the `cz-` prefix

The `cz-` prefix for CSS variables is derived from the `$prefix` variable defined in `src/scss/_variables.scss`. This prefix helps to namespace Cartzilla's CSS variables, avoiding conflicts with other styles or scripts.

    // Inside src/scss/_variables.scss

    // Prefix for CSS variables
    $prefix: cz- !default;

If you need to change this prefix, copy the `$prefix` variable to `src/scss/_user-variables.scss` and update its value there. This customization will propagate through all related CSS variables in your project.

#### Updating the prefix in user variables

    // Inside src/scss/_user-variables.scss
    $prefix: myapp- !default;  // Change prefix to 'myapp-'

This will change the prefix from `--cz-` to `--myapp-` for all CSS variables, ensuring a unique and consistent branding style across your template.

Top