Configuration

• Prepare your Sass files

  • File setup

  • Working with Bootstrap variables

  • Creating custom styles

• How to use Bootstrap functions

  • Color contrast

• Escape SVG

¶Prepare your Sass files

Working with source files showcases how powerful themes can be. You can use smart features like Sass variables to change anything in terms of colors, typography, component properties, and more.

And no worries. You don't need to be a Sass/CSS expert to do this.

¶File setup

The main Sass file will look a little bit different. You will have to import your theme's variables. Here's how:

// Import the default variables and function
@import "@webpixels/css/core/functions";

// Your theme's variables
@import "./variables";

// Webpixels CSS
@import "@webpixels/css/base";
@import "@webpixels/css/forms";
@import "@webpixels/css/components";

// Your custom styles (optional)
@import "./custom";

The newly created variables file will store the values you want to override.

We suggest adding additional Sass files to extend and override our CSS with your own custom styles. The major benefit of keeping a theme’s source files separate from your own additions is a simpler upgrade path when Webpixels CSS is updated.

¶Working with Bootstrap variables

Every Sass variable in our CSS includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying the source code. Copy and paste variables as needed, modify their values, and remove the !default flag.

// Your variable overrides
$primary: #000;
$body-bg: #FFF;

Create a new file for storing the new Sass variables and import it as shown in the example above.

¶Creating custom styles

In the main.scss file we've already added a new @import, which can be used to add new custom components and styles. Make sure you have the new file named custom.scss in your scss folder:

@import "./custom";

¶How to use Bootstrap functions

You can lighten or darken colors with tint-color() and shade-color() functions. These functions will mix colors with black or white, unlike Sass' native lighten() and darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.

Later, you can use these functions like this:

.custom-element {
    color: tint-color($primary, 10%);
}

.custom-element-2 {
    color: shade-color($danger, 30%);
}

¶Color contrast

An additional function we use is the color contrast function, color-contrast included in Bootstrap. It utilizes the WCAG 2.0 algorithm for calculating contrast thresholds based on relative luminance in a sRGB colorspace to automatically return a light (#fff), dark (#212529) or black (#000) contrast color based on the specified base color.

.custom-element {
    color: color-contrast(#000);
}

// returns `color: #fff`

You can also specify a base color with our color map functions:

.custom-element {
    color: color-contrast($dark); // returns `color: #fff`
}

¶Escape SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

// Data URIs must be quoted.
$svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");

// Using the function
escape-svg($form-check-input-checked-bg-image)