Salesforce Lightning Design System
- Tailored for building Salesforce apps: Using the Lightning Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel.
- Continuously updated: As long as you’re using the latest version of the Lightning Design System, your pages are always up to date with Salesforce UI changes.
This project utilizes Storybook for component development. If you would like to know more about Storybook or how it works, check out their website.
Project Installation & Setup:
- Clone the repository down locally.
cdinto the project and run
npm installto install all project dependencies.
Running the Development Environment:
If you've just installed the project, you will need to run
npm run full-start to first perform a full build, which is necessary for Storybook to operate.
Whenever you add or remove a component, you'll want to perform this full-start. Otherwise, you can just run
npm start to start the Storybook server without a build.
Configuring Node and NVM
Node v12 is recommended for use with the Design System repository, and NVM is the recommended choice for managing multiple versions of Node on your computer.
A .nvmrc file is included in this project to aid in local development. To utilize it for setting your project's node version, run
nvm use in the root of the directory.
Additionally, you can set up a deeper shell integration for automatically invoking the nvmrc file when you change into the project directory by
following these instructions.
Developing in Storybook
Once the development server is started with
npm start, you can load it at http://localhost:9002.
See the annotations guide.
Starts the Storybook server for local development.
npm run full-start
Performs a full build and dist before starting the Storybook server. Useful for when a component or utility is added or removed from the system.
npm run gulp -- lint
Lint the code base for syntax and stylistic errors.
Pull Request Checks
To run all the checks a pull request will run in Travis use the following command.
# To run every check against all blueprints npm run pr-checks # To run every check but target certain blueprints for slow checks like aXe and vnu npm run pr-checks -- --components button,path,trees
npm run build-dist
Generate the Lightning Design System into the
npm run gulp -- styles
Compile Sass to CSS into
npm run gulp -- clean
Delete temporary build and local files.
npm run gulp -- styles:stats: Useful stats about the project's deliverables.
npm test: run all tests
See the troubleshooting guide.
Contributing Back to SLDS
See the contributing guide.
- Source code is licensed under BSD 3-Clause
- All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
- The Salesforce Sans font is licensed under our font license
Please open a new GitHub Issue.