The Lightning Design System is ready to use in your Visualforce pages.
For an extensive getting started tutorial, please see our Trailhead module. We cover setup, and the Lightning Design System class structure, before building a list view page and a record home page with a number of our components.
If you want to dive straight in, here are a few things to note when working with the Lightning Design System in Visualforce:
- As an alternative to downloading the Lightning Design System, you can install it directly in your development org using an unmanaged package.
- 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.
- All your Design System markup needs to be contained, or scoped, within a
<div class="slds">outer wrapper.
- Apex tags such as
- 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 MSIE, 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 Lightning Design System components, are documented in the Trailhead module.
Finally, we’d love to hear your feedback. Please share your thoughts about any aspect of the Lightning Design System via our GitHub issues.