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

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