Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Using the Salesforce Lightning Design System in Apps

The Salesforce Lightning Design System (SLDS) provides a look and feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom stand-alone Lightning applications a UI that is consistent with Salesforce, without having to reverse-engineer our styles.

Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. This method is the easiest way to stay up to date and consistent with Lightning Design System enhancements.

To extend force:slds:

1<aura:application extends="force:slds">
2    <!-- customize your application here -->
3</aura:application>

Using a Static Resource

When you extend force:slds, the version of Lightning Design System styles is automatically updated whenever the CSS changes. If you want to use a specific Lightning Design System version, download the version and add it to your org as a static resource.

We recommend extending force:slds instead so that you automatically get the latest Lightning Design System styles. If you stick to a specific Lightning Design System version, your app’s styles will gradually start to drift from later versions in Lightning Experience or incur the cost of duplicate CSS downloads.

Note

To download a version of Lightning Design System that doesn’t exceed the maximum size for a static resource, go to the Lightning Design System downloads page.

Salesforce recommends that you name the Lightning Design System archive static resource using the name format SLDS###, where ### is the Lightning Design System version number (for example, SLDS252). This lets you have multiple versions of the Lightning Design System installed, and manage version usage in your components.

To use the static version of the Lightning Design System in a component, include it using <ltng:require/>. For example:

1<aura:component>
2    <ltng:require 
3        styles="{!$Resource.SLDS252 +
4            '/styles/salesforce-lightning-design-system.min.css'}" />
5</aura:component>

Lightning Aura Components Developer Guide

Using the Salesforce Lightning Design System in Apps

Using a Static Resource

See Also