You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Lightning Design System for Visualforce Page


By: Radha

Introduction 

A new UI toolkit from Salesforce called Lightning Design System provides UI patterns and specialized components. Here, we are going to implement Lightning Design System in Visualforce page. We normally design the Visualforce page with the Salesforce standard CSS and tags that incorporate standard style. Modern enterprise apps are created through Salesforce lightning since it uses the Lightning CSS. To implement the lightning design in Visualforce page, Salesforce now released lightning CSS and guidelines to use those style classes in html and apex tags. This gives better user experience that is consistent with Salesforce core features. Let us see how we can implement this style.

Stylesheet 

We can download the design system from the below link

https://lightningdesignsystem.com/downloads/

Either we can clone it from GitHub or download the zip file. Salesforce also provides a tool for us to create custom-scoped CSS. For your information

https://tools.lightningdesignsystem.com/css-customizer

Here using the CSS-customizer, I have added my own scoping class called “MST” and generated the zip file. This includes pre-built CSS framework, font and icons. We now upload the file in static resource.

LDS in Visual Force Page 

To use the stylesheet in VF page

<apex:stylesheet value=”{!URLFOR($Resource.SLDS_Custom, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}” />

Assets includes styles for Visualforce and style which is specially compiled for lightning.

Components  

Lightning Design System reflects the pattern and components that support the Salesforce product. I have used some components in this article. Let see how the components are used in Visualforce page.

Global Header 

The global header applicable across all contexts in the page/app

lightning design system

Screenshot 

Global Navigation 

This contains list of navigation links, App Launcher, App Name, and Pages that the App includes.

lightning design system

Screenshot

Here I have used two tabs to navigate and perform CRUD operation in a custom object. List item tab lists all the created records. JQuery is used to navigate over the tabs.

Forms 

The form contains interactive lightning design to submit information

Input text box 

lightning design system

Screenshot

Select List 

The actual lightning style is done using <select> element which can also be implemented in <apex:selectList>

lightning design system

Screenshot 

salesforce lightning design system

Checkbox 

To ensure that checkboxes look same everywhere, Salesforce use a custom DOM.

salesforce lightning design system

Screenshot

In this stock app a script is used to convert the selected Ids to JSON and pass it to the method through <apex:actionFunction>.

 Docked Form Footer 

The Form footer has buttons. The actual lightning button style is done using <button> element which can also be implemented in <apex: commandlink >

salesforce lightning design system

Screenshot

Data Tables 

Data tables are enhanced version of html table. Here to display dynamic data, <apex:repeat> is used to iterate the table row.

salesforce lightning design system

salesforce lightning design system

Screenshot

salesforce lightning design system

Spinners 

CSS loading indicators are used to show while retrieving data or when the page loads.