Tools

SLDS Scope Customizer

Sections

Astro at the edge of an oversized magnifying glass, looking at technical blueprints below

Introducing SLDS Scope Customizer

SLDS Scope Customizer is a simple command you can run to build a scoped version of SLDS 1 CSS. You can generate it on demand from the command line as often as you'd like. You can even include it in your CI process to auto-generate it if that suits your needs.

Get Started

To use the SLDS Scope Customizer, make sure you follow these steps:

  1. Clone or download the Salesforce Lightning Design System repo
  2. Run npm install && npm run build within the root of the project directory
  3. Run npm run slds:customizer and follow the prompts

We'd love to hear from you! If you have any comments/questions/feedback, please file an issue.

Walkthrough

  1. Initial prompt after running npm run slds:customizer
    Command line screenshot after executing the command `npm run slds:customizer`
  2. Completed command after responding to the prompts
    Command line screenshot after responding to the prompts
  3. Snippet of resulting CSS
    Screenshot of partial CSS output from running the SLDS Scope Customizer