Lightning Design System

Salesforce Lightning Design System

CSS ToolkitDesign System
salesforce-ux/design-systemwww.lightningdesignsystem.com

README

Salesforce Lightning Design System

Build Status Dependabot Status

Welcome to the source code repository for Salesforce Lightning Design System, brought to you by Salesforce UX.

SLDS is...

- 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.

Getting Started


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:


1. Clone the repository down locally.
2. cd into the project and run npm install to install all project dependencies.

Running the Development Environment:


The Storybook development environment can be started by running npm start

Whenever you add, remove, or alter a component's css annotation metadata, you'll need to restart Storybook to see those changes.

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.

Annotations


See the annotations guide.

Tasks


npm start


Starts the Storybook server for local development.

npm run gulp -- lint


Lint the code base for syntax and stylistic errors.

  1. ```
  2. # Lint indentation, Sass, JavaScript files
  3. npm run gulp -- lint

  5. # Lint languages independently
  6. npm run gulp -- lint:sass
  7. npm run gulp -- lint:javascript
  8. npm run gulp -- lint:javascript:test
  9. npm run gulp -- lint:spaces
  10. npm run gulp -- lint:html

  12. # HTML5 validation
  13. npm run gulp -- lint:vnu
  14. # HTML5 validation on comma separated blueprint names
  15. npm run gulp -- lint:vnu --components button,path,trees

  17. # a11y validation
  18. npm run gulp -- lint:a11y
  19. # a11y validation on comma separated blueprint names
  20. npm run gulp -- lint:a11y --components button,path,trees

  22. # Lint examples using vnu, aXe, slds validation, and HTML5 validation
  23. npm run gulp -- lint:examples
  24. ```

Pull Request Checks


To run all the checks a pull request will run in Travis use the following command.

  1. ```
  2. # To run every check against all blueprints
  3. npm run pr-checks

  5. # To run every check but target certain blueprints for slow checks like aXe and vnu
  6. npm run pr-checks -- --components button,path,trees
  7. ```

Compilation


npm run build-dist

Generate the Lightning Design System into the .dist directory.

npm run gulp -- styles

Compile Sass to CSS into .assets/styles.

npm run gulp -- clean

Delete temporary build and local files.

Stats


npm run gulp -- styles:stats: Useful stats about the project's deliverables.

Tests


npm test: run all tests

Troubleshooting


See the troubleshooting guide.

Contributing Back to SLDS


See the contributing guide.

Licenses


- Source code is licensed under BSD 3-Clause
- All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0

Got Feedback?


Please open a new GitHub Issue.