Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Applying SLDS to Visualforce Pages

You can use the Lightning Design System (SLDS) to build Visualforce pages that match the look and feel of the Salesforce mobile app. To use SLDS, it takes some tweaks in your code and a few things to remember. For the most part, Visualforce code that uses SLDS works without issue.

Using SLDS in Visualforce Pages

Every time you use SLDS, add <apex:slds /> to your page and wrap your code in a scoping class, <div class="slds-scope">...</div>.

1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
2
3  <!-- Import the Design System style sheet -->
4  <apex:slds />
5
6    <!-- REQUIRED SLDS WRAPPER -->
7    <div class="slds-scope">

Many of the best practices we’ve discussed for Visualforce development for mobile apply here as well. Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with SLDS.

SLDS Class Naming

SLDS uses a standard class naming convention called Block-Element-Modifier syntax (BEM) to make the class names less ambiguous.

A block represents a high-level component (for example, car).
An element represents a descendant of a component (car__door).
A modifier represents a particular state or variant of a block or element (car__door--red).

Visualforce Developer Guide

Applying SLDS to Visualforce Pages

Using SLDS in Visualforce Pages

SLDS Class Naming