FAQ

FAQ

What is the Salesforce Lightning Design System?What is the Salesforce Lightning Design System?

It is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.

Is any JavaScript included as part of the framework?Is any JavaScript included as part of the framework?

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.

What browsers are supported?What browsers are supported?

BrowserVersion
Google ChromeLatest
Mozilla FirefoxLatest
SafariLatest
Internet Explorer11
Microsoft EdgeLatest

As a designer what do I need to know about the design changes in the Winter ‘18 release?As a designer what do I need to know about the design changes in the Winter ‘18 release?

  • We’ve enhanced font hierarchy to draw attention to what's most important in the moment and improve legibility.
  • We’ve condensed the spacing of content (from 16px to 12px) to allow more information on the page. You’ll especially notice this in the tightening of data tables.
  • We've added layering and a colorful graphics to the layout to create contrast between foreground and background cards. The cards have white backgrounds and drop shadows, while the page background introduces color.
  • The components we’ve updated include cards, avatar, data tables, and page headers.
  • For more detailed information, please visit this Salesforce UX blog post:Evolving the Lightning User Experience

As a developer what do I need to know about the design changes in the Winter ‘18 release?As a developer what do I need to know about the design changes in the Winter ‘18 release?

  • With the changes to the page background color, you may notice some of your custom components are transparent, rendering the text on the dark background. You can fix that easily by adding the class .slds-card to the outer wrapper of your component.
  • If you need default tabs to appear to be in a card, you can place the .slds-tabs_card class on the .slds-tabs_default DOM node. This will give the tabset padding and drop-shadows like a card.
  • When the .slds-card class is used inside .slds-tabs_default, .slds-modal, or another .slds-card, they no longer have the drop-shadow card look. Instead they are simply white. In some situations, you may need to differentiate your card from content around it. You can add the .slds-card_boundary class to the .slds-card for a rounded border.
  • On some pages, you’ll notice the header is attached to a list view. If you have a custom page where you’d like to attach the header to a component below, add the .slds-has-bottom-magnet class to the .slds-page-header. Then add .slds-has-top-magnet to the component below. This will visually attach the components to each other.
  • If you have been using SLDS in Visualforce via the <apex:slds /> tag, your Visualforce pages will also inherit the new styling in Winter ’18.
  • For more detailed information, please visit this developer blog post:Get your Lightning components ready for Winter ’18

How can I design responsively using the Salesforce Lightning Design System?How can I design responsively using the Salesforce Lightning Design System?

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.

Can I use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework?Can I use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework?

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

Is the Salesforce Sans font full Unicode?Is the Salesforce Sans font full Unicode?

Salesforce Sans contains 492 Latin script characters, and supports a wide range of languages. It doesn’t contain non-Latin characters, so in that sense it’s not “full” Unicode.

What CSS syntax does the Salesforce Lightning Design System use? Where did the double hyphenations go? Why are their underscores in your CSS classes?What CSS syntax does the Salesforce Lightning Design System use? Where did the double hyphenations go? Why are their underscores in your CSS classes?

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.

How do I display SVG icons with Lightning Components?How do I display SVG icons with Lightning Components?

How do I link to icons in Visualforce?How do I link to icons in Visualforce?

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" class="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.

How do I link to Lightning static resources like stylesheets and icons?How do I link to Lightning static resources like stylesheets and icons?

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 slds244 then you should include the style sheet in this format:

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

The tool to create your custom CSS is available here.

I am seeing Visualforce errors like: The prefix xlink for attribute xlink:href associated with an element ... is not boundI am seeing Visualforce errors like: The prefix xlink for attribute xlink:href associated with an element ... is not bound

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.

What does the “Requires ui:scrollerWrapper” badge mean?What does the “Requires ui:scrollerWrapper” badge mean?

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 class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
        <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation"><a class="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" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
      <ui:scrollerWrapper>
        <div class="slds-form slds-form_stacked slds-form_short-stack">
          <fieldset class="slds-form-element">
            <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
            <div class="slds-form-element__control">
              <span class="slds-checkbox">
                <input type="checkbox" name="default" id="checkbox-1" value="on"/>
                <label class="slds-checkbox__label" for="checkbox-1">
                  <span class="slds-checkbox_faux"></span>
                  <span class="slds-form-element__label">All opportunities owned by you</span>
                </label>
              </span>
            </div>
          </fieldset>
        </div>
      </ui:scrollerWrapper>
    </div>
  </aura:component>