GitHub - salesforce-ux/design-system: Salesforce Lightning Design System
source link: https://github.com/salesforce-ux/design-system
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Salesforce Lightning Design System
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
- Clone the project with
git clone https://github.com/salesforce-ux/design-system.git
- Run
npm install
in the root design-system folder. - Run
npm start
to launch the Previewer. - Visit http://localhost:3003/local/preview
Having trouble getting these steps to work on your machine? Follow the troubleshooting guide.
Previewer
The previewer is an interactive tool for creating blueprints.
It runs at the designated url on startup and is the primary means of viewing your work - it will live update as you make changes.
You can choose the blueprint, variant, and modifiers to preview as well as background color and screen size. It also previews the sass docs.
Everything in the design system is driven by annotations and the previewer is no different. To see any work in the previewer, you must add annotations to your code.
Annotations
See the annotations guide.
Blueprint Documentation
See the blueprint documentation guide.
Tasks
npm start
Start the Lightning Design System preview app.
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 && npm run 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 to the code base
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
- The Salesforce Sans font is licensed under our font license
Got feedback?
Please open a new GitHub Issue.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK