Skip to content

elliot41/design-system

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Salesforce Lightning Design System

Build 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:

  1. Run npm start to start the Storybook development environment.

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

# Lint indentation, Sass, JavaScript files
npm run gulp -- lint

# Lint languages independently
npm run gulp -- lint:sass
npm run gulp -- lint:javascript
npm run gulp -- lint:javascript:test
npm run gulp -- lint:spaces
npm run gulp -- lint:html

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

# a11y validation
npm run gulp -- lint:a11y
# a11y validation on comma separated blueprint names
npm run gulp -- lint:a11y --components button,path,trees

# Lint examples using vnu, aXe, slds validation, and HTML5 validation
npm run gulp -- lint:examples

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

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

Got Feedback?

Please open a new GitHub Issue.

About

Salesforce Lightning Design System

Resources

License

BSD-3-Clause and 2 other licenses found

Licenses found

BSD-3-Clause
LICENSE.txt
Unknown
LICENSE-font.txt
Unknown
LICENSE-icons-images.txt

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 76.0%
  • CSS 23.9%
  • Ruby 0.1%