FAQ

The Salesforce Lightning Design System (SLDS) is:

Brand and product design guidelines, Design Patterns and Component Blueprints for creating unified UI in the Salesforce ecosystem.

• A Design Pattern is:

  Principle-driven guidelines of a repeatable experience.

• A Component Blueprint is:

  Framework agnostic, accessible HTML and CSS used to create components. This includes:

  • Pre-production markup: this is the markup on the SLDS website
  • Production CSS: in general, the SLDS CSS.
  • Interaction Guidelines: including desired component lifecycle, mouse and keyboard interaction, accessibility guidelines and JS guidelines

We have updated the terminology to help alleviate confusion around this term by splitting it into two pieces: the SLDS Component Blueprint and the Lightning Component.

• Component Blueprints are:

  Framework agnostic, accessible HTML and CSS used to create components. This includes:

  • Pre-production markup: this is the markup on the SLDS website
  • Production CSS: in general, the SLDS CSS.
  • Interaction Guidelines: including desired component lifecycle, mouse and keyboard interaction, accessibility guidelines and JS guidelines

• Lightning Components are:

  A functional, reusable component built on the Lightning platform. This includes:

  • Base Lightning Components:

    A programmatic component, built according to the SLDS Component Blueprint, without logic or functionality.

  • Experience Lightning Components:

    A functional, declarative or programmatic component, built from Base Lightning Components.

  • Custom Lightning Components:

    A functional, reusable component built on the Lightning platform, with or without Base or Experience components.

No. The Salesforce Lightning Design System is a pure CSS framework that you can use with any front-end development framework you’d like, including Salesforce-specific technologies such as Visualforce and Lightning, as well as third-party frameworks like React or Angular.

Since v2.3.1, we no longer support Bower since it is not actively supported. To install the Lightning Design System as a managed package, please use npm.

We recommend that you make good use of our flexible and powerful Grid System, which will help you construct responsive layouts that scale elegantly across screen sizes.

Yes. All CSS selectors are prefixed with .slds- to prevent any collisions.

The Salesforce Sans font was removed from the Design System in 2.15.0. Lightning Experience now uses the native sans-serif font on your system or device. This change improves readability and performance and provides a better experience for users of non-Latin languages. Please see the Summer '21 release notes for more information.

The Salesforce Lightning Design System CSS uses a standard class naming convention called “BEM” (Block-Element-Modifier):

• Block represents a high-level component (e.g. .slds-button)
• Element represents a descendent of a component (e.g. .slds-button__icon)
• Modifier represents a different state of a block or element (e.g. .slds-button_neutral)

Initially we used the double hyphen style for BEM notation. Due to the fact that double hyphens are problematic in an XML environment (which doesn't allow double hyphens within comments), we have upgraded our syntax to use the single underscore style. The old syntax is now deprecated and will work for the next 18 months. We'll give an update on the exact release in which we will remove the backwards compatibility soon. Please stay tuned.

For more information, refer to our Markup and Style page and this article on guidelines for BEM naming which has more detail on why BEM is a useful convention.

Please review Getting Started with Lightning.

Use the <apex:slds /> element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is a streamlined alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages.

To reference assets in the Lightning Design System, such as SVG icons and images, use the URLFOR() formula function and the $Asset global variable. Use the following markup, for example, to reference the SVG user icon.

<svg aria-hidden="true" className="slds-icon slds-icon--large slds-icon-standard-user">
  <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>

Note: XML namespaces are required to be added to the html element:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Please refer to our Trailhead Module and the documentation page "Using the Lightning Design System" in our Visualforce Developer Guide for more detailed instructions and examples.

Lightning Components also use a special syntax to reference your static resources. Since Salesforce Lightning Design System is either included in platform or can be extended in other use cases, it's rare that you need to add it as a static resource. In the rare case that you do, you need to edit the code you cut and paste from the Salesforce Lightning Design System. If you are adding a custom scoped file as a static resource named slds2232 then you should include the style sheet in this format:

<ltng:require styles="/resource/slds2232/assets/styles/salesforce-lightning-design-system-ltng.min.css" />

The tool to create your custom CSS is available here.

This is likely because the namespace needs to be added to the HTML element:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Please refer to our Trailhead Module for more detailed instructions and examples.

If you’re developing for Lightning Experience, this badge indicates a component that can be supported on mobile through the use of the ui:scrollerWrapper component. More information about ui:scrollerWrapper can be found in the Lightning Developer Guide. The Lightning Design System scrollable class does not bypass the “Pull to Refresh” scrolling behavior on mobile devices, so using ui:scrollerWrapper allows you to set up scrollable content areas on mobile devices that don’t interfere with other behavior.

Here’s an example of how you might use ui:scrollerWrapper to make a tab’s content scrollable using the lightning namespace:

<aura:component>
  <lightning:tabset>
    <lightning:tab label="Item One">
      <ui:scrollerWrapper>
        <div>
          Tab Content Goes Here
        </div>
      </ui:scrollerWrapper>
    </lightning:tab>
    <lightning:tab label="Item Two">
      Sample Content Two
    </lightning:tab>
  </lightning:tabset>
</aura:component>

Here’s an example of how you might use ui:scrollerWrapper to make a tab’s content scrollable using plain SLDS HTML:

<aura:component>
  <div className="slds-tabs_default">
    <ul className="slds-tabs_default__nav" role="tablist">
        <li className="slds-tabs_default__item slds-is-active" title="Item One" role="presentation"><a className="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Plain HTML</a></li>
    </ul>
    <div id="tab-default-1" className="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
      <ui:scrollerWrapper>
        <div className="slds-form slds-form_stacked slds-form_short-stack">
          <fieldset className="slds-form-element">
            <legend className="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
            <div className="slds-form-element__control">
              <span className="slds-checkbox">
                <input type="checkbox" name="default" id="checkbox-1" value="on"/>
                <label className="slds-checkbox__label" for="checkbox-1">
                  <span className="slds-checkbox_faux"></span>
                  <span className="slds-form-element__label">All opportunities owned by you</span>
                </label>
              </span>
            </div>
          </fieldset>
        </div>
      </ui:scrollerWrapper>
    </div>
  </aura:component>