Salesforce Lightning Design System
JavaScript CSS Other
Latest commit 0a8497e Jan 12, 2017 @kaelig kaelig committed on GitHub Merge pull request #1927 from salesforce-ux/hotfix/control-docsearch-…

Fix search and control DocSearch configuration through package.json
Failed to load latest commit information.
.scss-linters Add custom linter to prevent breaking the scoped build Mar 4, 2016
__tests__ Update Spring-17 Snapshot again, but generating Spring-17 examples fi… Dec 15, 2016
app_modules Upgrade Sentry to the latest version of the API Jan 12, 2017
design-tokens Add additional field service tokens Nov 30, 2016
scripts Merge pull request #1927 from salesforce-ux/hotfix/control-docsearch-… Jan 13, 2017
site Control DocSearch configuration through package.json Jan 13, 2017
test Generate the icon zip from SLDS, name it consistently with how the to… Oct 13, 2016
ui Add class to table Jan 9, 2017
.babelrc Update React to 15.4.1 and allow usage of object rest spread in JavaS… Dec 1, 2016
.editorconfig Merge pull request #1404 from salesforce-ux/summer-16 Aug 18, 2016
.eslintignore Ignore the design-tokens directory Sep 2, 2016
.eslintrc.yml Update React to 15.4.1 and allow usage of object rest spread in JavaS… Dec 1, 2016
.gitattributes Initial commit Sep 4, 2015
.gitignore Bring in all tokens from the design tokens npm package Sep 2, 2016
.hound.yml Enable ESLint in HoundCI Jun 13, 2016
.scss-lint.yml Mention the changes and update documentation Sep 15, 2016
.sldsrc.defaults.yml Document overrides directly in the default configuration Jul 1, 2016
.stylestatsrc Compare local CSS stats with the public version Mar 3, 2016
.travis.yml Run snapshot tests after the build has succeeded Dec 22, 2016 Fix branch name in contribution guidelines Mar 6, 2016
Gemfile Update scss-lint Nov 15, 2016
Gemfile.lock Update scss-lint Nov 15, 2016
Makefile Match axe core version with axe-webdriver Dec 30, 2016 Add summer-17 to the PR template Nov 3, 2016
Procfile Remove Heroku Babel compilation Dec 14, 2015 Update design tokens path Dec 29, 2016 Merge branch 'winter-17' of… Dec 6, 2016 Fix comparison branch to spring-17 Jan 9, 2017
Salesforce_CLA.pdf Initial commit Sep 4, 2015
app.json Cleanup app.json May 19, 2016
browserslist Link to the browser support page Jul 21, 2016
gulpfile.babel.js Merge branch 'winter-17' of… Nov 9, 2016
gulpfile.js Add copyright notice Jan 10, 2016
karma.conf.js Remove empty line Nov 16, 2016
npm-shrinkwrap.json 2.2.1 Jan 9, 2017
package.json Control DocSearch configuration through package.json Jan 13, 2017
visualtest.config.js add visual test names for corporate saucelabs Feb 22, 2016

Salesforce Lightning Design System Build Status

Welcome to the Salesforce Lightning Design System brought to you by Salesforce UX.

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

Quick start

gem install bundler
npm install
npm start

Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.


Install gulp globally:

npm install --global gulp


Generate and run the Lightning Design System.

gulp serve

Run the lightning design system.

Faster than gulp, as it won't re-generate the whole site before starting the server. Useful when mainly working on styles.

gulp lint

Lint the code base for syntax and stylistic errors.

# Lint indentation, Sass, JavaScript files
gulp lint

# Lint languages independently
gulp lint:sass
gulp lint:js
gulp lint:js:test
gulp lint:spaces
gulp lint:html
gulp lint:vnu (optional: --component "{trees_base_with*,trees_base_deep*}")


gulp pages: generate the site’s pages.

gulp styles: compile Sass to CSS.

gulp clean

Delete temporary build and local files.


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


npm test: run all tests


npm and Node.js

The Salesforce Lightning Design System uses npm to manage dependencies. Please install Node.js, and try running npm install again.

If Node.js is already installed, make sure you’re running v6 or up.

Ruby dependencies

Ruby comes pre-installed on macOS. For other systems, check

If gem install bundler fails, run sudo gem install bundler and try running npm install again.

JavaScript and compilation issues

JavaScript dependencies sometimes get out of sync and inexplicable bugs start to happen. Follow these steps to give a fresh start to your development environment:

  1. The installed npm version must be at least v3.10. You can update your npm with: npm install npm -g (sudo may be required).
  2. Re-install dependencies: rm -Rf node_modules && npm install
  3. npm start

If this did not work, try running npm cache clean and repeat the above steps.

Contributing to the code base



Got feedback?

Please open a new GitHub Issue.