Support and Documentation

Style packages

Style packages introduce a styling layer on a front-end bundle using built-in or uploaded CSS and JavaScript files. Style packages give users exponentially more ways to customize their themes beyond using Brightspot's back-end theme user interface.

How to create a built-in style package

You can incorporate built-in style packages into a front-end bundle. Each style package consists of a single CSS file and a single JavaScript file. The CSS file can link to other built-in files such as fonts or SVGs. When uploading the style package to a CDN, Brightspot uploads all resources linked from the CSS file.

To create a built-in style package, add a stylePackages item to your _config.json as shown below.

"stylePackages": {
  "frost": {
    "name": "Frosty",
    "cssPath": "styleguide/All.frost.min.js.css",
    "jsPath": "styleguide/All.frost.min.js",
    "default": true
  },
  "falcon": {
    "name": "Falconish",
    "cssPath": "styleguide/All.falcon.min.js.css",
    "jsPath": "styleguide/All.falcon.min.js"
  }
}

This powers the Built-In dropdown on the Themes page in Brightspot when this bundle is selected.

Tip

This dropdown is populated when the bundle or theme is saved. If the dropdown is empty, try resaving the theme.

How to create a custom upload style package

A custom upload style package is a .zip file that is uploaded to Brightspot. Custom upload style packages consist of a single CSS file and a single JavaScript file. The CSS file can link to other built-in files such as fonts or SVGs. When uploading the style package to a CDN, Brightspot uploads all resources linked from the CSS file.

To create a custom upload style package, create a .zip file with a _config.json in the root directory of the .zip file with the following contents:

{
  "name": "My Style",
  "cssPath": "/path/to/Main.css",
  "jsPath": "/path/to/Main.js"
}

These paths are relative to the root of the .zip file.