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