FAQ

Frequently Asked Questions

What is the Lightning Design System?What is the 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 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

How can I design responsively using the Lightning Design System?How can I design responsively using the 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 Lightning Design System together with Bootstrap or any other CSS framework?Can I use the 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 Lightning Design System use? Why do you have double hyphenations and underscores in your CSS classes?What CSS syntax does the Lightning Design System use? Why do you have double hyphenations and underscores in your CSS classes?

The 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)

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 Visualforce static resources like stylesheets and icons?How do I link to Visualforce static resources like stylesheets and icons?

Visualforce uses a special syntax to reference your static resources, and you need to edit the code you cut and paste from the Lightning Design System. If you want to load the master stylesheet and you uploaded the Lightning Design System as a static resource named SLDS221 then you should change the <apex:stylesheet /> value to:

<apex:stylesheet value="{!URLFOR($Resource.SLDS221, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

This is similar for icons, for example this User one from the Standard Icons sprite:

<svg aria-hidden="true" class="$"slds-icon slds-icon--large slds-icon-standard-user"">
  <use xlink:href="{!URLFOR($Resource.SLDS221, 'assets/icons/standard-sprite/svg/symbols.svg#user')}" />
</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">

Using a custom CSS scope class is now required for building with Visualforce and Lightning Design System. The scoped file is no longer included in the download files, but can instead be created using this tool to create your custom CSS.

Please refer to our Trailhead Module 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 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 Lightning Design System. If you are adding a custom scoped file as a static resource named SLDS221 then you should include the style sheet in this format:

<ltng:require styles="/resource/SLDS221/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.