Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
What is Salesforce Mobile Classic?
Salesforce Platform Development Process
Tell Me More: Where Visualforce Pages Can Appear in the Salesforce App
Guidelines and Best Practices
Sharing Visualforce Pages Between Mobile and Desktop
Excluding Visualforce Pages from Mobile or Desktop
Creating Visualforce Pages That Work in Mobile and Desktop
Choosing an Architecture for Visualforce Pages in the Salesforce App
Optimizing the Performance of Visualforce Pages in the Salesforce App
Visualforce Components and Features to Avoid in the Salesforce App
Known Visualforce Mobile Issues
Considerations and Limitations for Using Visualforce in the Salesforce App
Prepare a Support Request for Problems with Visualforce Pages in the Salesforce App
Choosing an Effective Page Layout
User Input and Interaction
Managing Navigation
Introduction to the Salesforce Lightning Design System
Style Existing Visualforce Pages with Lightning Experience Stylesheets
Applying SLDS to Visualforce Pages
Use SLDS Icons in Visualforce
Create a Visualforce Page for the Salesforce App Using SLDS
Responsive Page Design Using SLDS
Using Visualforce Pages as Custom Actions
Performance Tuning for Visualforce Pages
Adding Visualforce to a Force.com AppExchange App
Using JavaScript in Visualforce Pages
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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