Visualforce

Visualforce

Get the Lightning Experience in Visualforce.

Use the Salesforce Lightning Design System Stylesheets in Visualforce.

To use the Design System CSS in Visualforce you have two options:

  1. Add <apex:slds /> to your page and wrap your code in a container:
    <div class="slds-scope">...</div>
    See this code in context on Trailhead and learn more in our Visualforce Developer Guide.
  2. Or (not recommended…): create a CSS file with a custom scoped outer wrapper. A tool to create your custom CSS is available here.

If you want to dive straight in, here are a few things to note when working with the Salesforce Lightning Design System in Visualforce:

  • When using the component sample code from this site, be sure to replace all static resource paths with the Visualforce URLFOR syntax, as summarized in the FAQ.
  • Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with the Salesforce Lightning Design System. The Trailhead unit on Visualforce development within Lightning explains options for styling legacy code to look like the new Lightning UI. For best results with the Salesforce Lightning Design System, use the markup style as outlined in the component examples, and use JavaScript Remoting, Remote Objects or a similar API for data access.
  • To use the SVG spritemap icons, add the attributes
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    to the <html> element as documented in the Trailhead module. Do not add the attributes to individual <svg> elements as can cause a page rendering bug.
  • To use SVG spritemap image icons with Internet Explorer, use the svg4everybody script.
  • Currently, if you need to use the Salesforce header or sidebar, you can not specify the
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    on the <html> element. In this case, the SVG icons are not supported.

Details on all the above, as well as introductions to many of the Salesforce Lightning Design System components, are documented in the Trailhead module.

We’d love to hear your feedback. Please share your thoughts about any aspect of the Salesforce Lightning Design System via our GitHub issues.

Use Lightning Experience Stylesheets in existing Visualforce pages.

Styling Apex components in your Visualforce page with the look of Lighting Experience is made easy. Simply add the attribute lightningStyleSheets="true" to the <apex:page> tag. This method can be used along with the Salesforce Lightning Design System CSS method above.

Learn more on the Salesforce Developer site.

Finally, this feature is currently in beta and we would really appreciate your feedback to make the feature better. Post your thoughts in the Lightning Now! Success Community and tag it with #LEX4VF to give us the heads up.