Getting Started With Lightning Design System for Visualforce

Hello There ! Welcome Back 🙂

Today, we are gonna learn how to use the Lightning Design System to beautify your Visualforce Pages.

So, first things first. What is the Lightning Design System ?

The Lightning Design System is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS. In fact using the new Design System markup results in pages which have the Lightning look and feel without writing any CSS to create the world’s best enterprise app experiences.

The Design System bundles four types of resources:

  • The CSS framework
  • Icons – PNG and SVG (both individual and spritemap) versions of the Salesforce action, custom, doctype, standard, and utility icons.
  • Font – the Cute ‘Salesforce Sans’ (My Personal Favourite)
  • Design Tokens

You can use the Design System across a range of technology stacks:

  • Visualforce pages  but, only HTML markup because the Design System is not yet compatible with <apex> tags, but it might be compatible in the future.
  • Lightning pages and components
  • Mobile apps
  • Standalone web apps

Awesome, Right ? Lets get started.

In this tutorial, we are only going to focus on how to use Lightning Design System(SLDS) with Visualforce Pages.

Here are some important points to keep in mind when using SLDS with Visualforce Pages:

  • All your Design System markup needs to be contained within a  <div class="slds"> as outer wrapper.
  • To use the SVG spritemap icons, add the attributes xmlns="" xmlns:xlink="" to the <html> element (the html tag).

Step 1: Getting the Lightning Design System

The best and the easiest way to get the LDS into your org is by installing an unmanaged package found on its website hereThe package creates a static resource of the SLDS in your org. And once you are done, you can access the SLDS in your visualforce page just like any other static resource, like this:(Depricated)

New Method:
1) Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
I am using “slds” as a scoping class in my case.
2) The file you download will be named “”, just rename it to something convenient and short like “LDS”.
3) Upload the zip file as your Static Resource.
4) And once you are done, you can access the SLDS in your visualforce page just like any other static resource, as ahown below:

Step 2: Creating Our First Visualforce Page Using The Lightning Design System

A huge library of components offered by the Design System can be found hereWe will be using a Page header, Form and a Button Component. First, add the ststic resource reference into your visualforce page as shown above in Step 1, Second, Add a <html> element with the attributes as shown below, this is mainly because we are gonna use SVG icons from the SLDS icon library.

Third, and the most important step, Add a <body> element and a <div> element with its class as your scoping class as shown below:

Now, lets add A Page Header and a Form component, copy and paste the code below into the <div> created above and save. and your whole code should look like this:

And your page should look similar to this:

I have also created a Demo Page for hands-on Experience Here.

So, what did we do here ? We created a visualforce page using various components and modifiers

  1. Page Header : The outer <div> has the class slds-page-header which applies page header style. Inside that we have a two column Grid System. The first grid column contains two elements with Text heading utility classes. It has two modifier classes applied, slds-no-flex and slds-align--middle. The first, slds-no-flex, is one of the Design System layout utilities and removes flexbox from the column so it does not resize. slds-align-middle is an alignment utility which adjusts the vertical placement of the column contents so they align with the taller column to the left.Inside the second column, we have a Button component with the class slds-button: “New Account” which has a modifier class, slds-button--neutral, applying minimal styling.
  2. Input Form : Two wrappers. First, a <div> wrapper adds page structure. Inside this is a second wrapper element, a <fieldset> with classes: slds-box, slds-theme--default, and slds-container--small. These three classes create a white, boxed, small, area to keep things nice and tidy. The title in the <legend> tag adds a title at the top of the box. The <legend> element’s id attribute corresponds to the aria-labelledby attribute on the <section>element for accessibility. Now the Form, The Design System provides several form layouts including horizontal, stacked, and inline. Here, we apply a vertical stacked layout to the <form> with the slds-form--stacked class. Each label and input pair are placed within a wrapper div with the slds-form-element to provide optimal spacing. Inside the wrapper, the <label> element has a slds-form-element__label class. The <input> field is placed inside another wrapper <div> with class slds-form-element__control , again to provide optimal spacing. The <input> field itself has the  slds-input class.

So there it is, we just learnt how to design beautiful visualforce pages without writing a single line of CSS. Awesome, Right?

I have also created a Demo Page for hands-on Experience Here.

You can also learn more about the Design System in this Great Trailhead Module Here.

Explore the Amazing Design System Library Here and create beautiful pages 😀

If you like the content, give it some sharing 🙂

Happy Coding 🙂
For more Salesforce Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Thank you, See you in the next one & Peace 😀

Stay update with our latest posts by subscribing to our newsletter. It is free!

12 thoughts on “Getting Started With Lightning Design System for Visualforce”

  1. Hi . Raghu.

    Thanks for your post. It helped a lot for me as I am new to LDS.
    But I am facing an issue. I cant see the contacts list here on the page. I can see the header alone

    1. Hello Ms.Swetha,
      Hope you are doing great 😀

      Thank you so much for your kind words of appreciation! 😀
      The contacts list is only a part of the demo, I have not included that code in this blog post.
      I will be writing a blog post on it very soon!

      I hope it helped,
      Thanks 🙂

  2. I notice that your demo page is not showing the header. In your code I don’t see where you have set showHeader=false. I want to show the header but I have not been able to do so. I even specifically set showHeader=true but no luck. Any insights will be appreciated. Thanks!

  3. Hey. I need to find access and figure out how to use the SLDS icons but the PNG version not the SVG. Do you know how to do this? Or get access to the PNG library? I need to use the PNG version of the icon.

    1. Hello Nathan,
      Hope you are doing great! 😀

      Yup, you can find the PNG version of the icons in the slds folder under assets/icons/, in that folder there are folders named after the type of icons(eg: utility) and without the suffix ‘-sprite’.

      So the source for the img tag should be similar to this, src="{!$YourSLDSResource}/assets/icons/utility/add_60.png

      I hope it helps,
      Thanks 😀

Leave a Reply

Your email address will not be published.