Getting started with Salesforce Lightning Design System

The Lightning Design System is a design framework for building enterprise apps that gives you look and feel similar to Salesforce Lightning Experience. It’s clear, consistent, modern, flexible, more efficient and very easy to use as salesforce has done all the hard work making the whole experience beautiful, thus setting a new standard. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel. You can leverage the Lightning Design System in Visualforce pages and in Lightning Components.

It’s important to understand that Lightning Design System makes use of a new markup structure and styling classes. For this reason it is best used with new pages and apps, and making it quite challenging to apply it to existing visualforce pages

You could easily use lightning design system together with other css frameworks as the SLDS CSS is fully namespaced with the slds- prefix to avoid any CSS conflicts. CSS uses a standard class naming convention called Block-Element-Modifier syntax (BEM):

• Block represents a high-level component (e.g. slds-button)
• Element represents a descendant of a component (e.g. slds-button__icon)
• Modifier represents a different state of a block or element (e.g. slds-button--neutral)

Working with Lightning Design System in Visualforce

There are few things to consider while working with the Lightning Design System:

1. Download the Design System Zip file and upload it as a Static Resource.
2. There is also an alternative to downloading the Design System, you can install it directly in your development org using an unmanaged package from this link.

If you go through the first approach that is downloading the design system zip file, then please name it as SLDSXXX where XXX is the version number (e.g. SLDS104) for consistency with the code examples, and so you can track your current version.

Defining a Path to the SLDS Static Resource that you just downloaded.

To get access to the design system zip file in your Visualforce, you would therefore use the following syntax:

Note : Here 104 is the version number, when using this in your visualforce page, replace it with the version number that you have downloaded.

SLDS icons are retrieved through URL paths in a <use> tag. When working in a Visualforce page, you will have to define the path to the Static Resource in order for icons to appear.

Every time you use Design System markup, it should be placed inside an outer wrapper <div> with the slds class

Here are some examples that will give you an idea on how easy is it to modify some commonly used components on visualforce pages, just by adding classes defined in salesforce lightning design system and give them Lightning look and feel.

1. Classic Look :

   

   Lightning Look :

   

2. will display on two separate lines(Refer to image below)

   

   Add the following styling to your visualforce page to resolve this out:

   <style>
.slds h3 {
  display: inline-block;
 }

   Output after applying style:

   

3. <apex:pageBlockTable>

   Classic Look:

   

   You need to replace the pageBlockTable with the dataTable and add following value to its styleclass attribute:

   styleClass="slds-table slds-table--bordered slds-table--cell-buffer"

4. Lightning Look:

   

Visuaforce page look and feel Comparison:

Classic Look:

Lightning Look:

Conclusion: Salesforce has worked really hard to make the life of developers/designers easy by taking full care of designing aspect by embracing the beautiful design that gives Lightning Experience look and feel, thus allowing developers to focus more on the functionality aspect and adding new features. It’s simple, very intuitive and gives user a pleasant experience.

About the Author: Apoorv works as a Software Developer at Astrea and has expertise on Apex and Visualforce.

For any query on Salesforce Lightning Design System, contact support@astreait.com