Lightning Apps and Components

The Salesforce Lightning Design System is ready to use in your Lightning apps and components. It is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application. It is no longer necessary to add a static resource for Lightning Components running within these environments.

Your Lightning Out, Lightning Components for Visualforce (LC4VF), and Lightning Application automatically get the Lightning Design System stylesheets and design tokens by using the linked instructions to each. This is the easiest way to stay up-to-date and consistent with SLDS enhancements.

Note: If you still need to use a static resource with the scoped files that were previously included in the download, we have provided a tool for you to create your custom-scoped CSS. You will need to scope to your own unique scoping class name instead of .slds.

Please note the following when using the Lightning Design System with Lightning components:

• The Design System uses SVG icons. You can use them in your Lightning components by using one of the new Base Lightning Components called lightning:icon. You can explore the other Base Components in the Reference section of the Developer Guide.
• For details on how to use Design Tokens, read our documentation on Styling with Design Tokens.
• You can also find a range of open-sourced sample components in the ForceDotComLabs/sldsx project on GitHub.

Finally, we’d love to hear your feedback. Share your thoughts about any aspect of this tutorial or the Salesforce Lightning Design System in general via our GitHub issues.