The Salesforce User Experience team has come up with a great UI framework called Lightning Design System. The intention is to build application, visualforce pages with this framework which will comply with the new Salesforce lightning look and feel. And the best part is that you don’t need to play with CSS.

Now you probably started thinking why I should go for this new Lightning Design System when I have Twitter Bootstrap or Foundation with which also I can achieve the same. The reason is very simple and they are as follows –

  • With the use of this new Lightning Design System, your application or visualforce page will comply with the new Salesforce look and feel.
  • It is a new design system and it is getting improved every day. So as long as you are referring the latest version of design system, you are getting most out of this new framework.
  • The CSS is fully namespaced with slds- prefix which will avoid CSS conflicts.
Ingredients of the Framework:
Salesforce Lightning Design System framework comes with four types of resources.
  • CSS Framework: This will contain UI components, such as page headers, form elements, buttons, grid layout system. This will come up with a single purpose helper class which will assist with spacing, sizing and other visual adjustments.
  • Icons: Includes action, custom, standard and utility icons both in PNG and SVG format.
  • Font: Salesforce designed a new font – Salesforce Sans font. This font is available here.
  • Design Tokens: These are simple variables which will help you design pages, application matching your brand. 
Usage of the Framework:
You can use this framework in –
  • Visualforce pages. (You don’t need Lightning Experience enabled in your org for this).
  • Lightning pages and components
  • Mobile apps.
  • Standalone web apps.
Ok enough of theory.

Let’s start preparing our environment, so that we can play around.

Before we even start we need to install Lightning Design System as static resource. To use this framework in visualforce page, you need to create a CSS file with a custom scoped outer wrapper. Don’t worry. Salesforce comes up with CSS Customizer tool for this. You can use that by following the below steps –
  • Click on Design System CSS Customizer Tool.
  • Choose the Salesforce release and scoping class. You need to remember the class name as you are going to refer the same during visualforce page development.
  • Once done, upload the zipped file as static resource in Salesforce. Please name it SLDSXXX where XXX is the version. The day when I am writing this blog post, the latest version is 2.0.3. So my static resource name is SLDS203.
  • Done.
Let’s write our first Visualforce page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <head>
            <title>Salesforce Lightning Design System Trailhead Module</title>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS203,'assets/styles/salesforce-lightning-design-system-vf.css')}"/>
        </head>
        
        <body>
            <div class="suddeb">
                <p class="slds-text-heading--label slds-m-bottom--small">
                    Salesforce Lightning Design System Trailhead Module
                </p>
            </div>
        </body>
    </html>
</apex:page>
After saving this visualforce page, if you execute, you will see that the look and feel in as per the new Salesforce look and feel. Awesome.

Let’s now understand the important stuffs here –

  • Line# 3: To use Salesforce Lightning Design System, you need to make sure that you are including the below attribute in html tag, which will enable support for SVG icon sprite maps within Visualforce.
  • Line# 2: We are turning off header, sidebar and built in stylesheet. With this turned on, you can’t add extra attribute in html tag(specified above), which means SVG will not be supported.
  • Line# 6: This is the step/way how you are including lightning design system stylesheet from static resource. This is very important to make sure lightning design system CSS stuffs are available in your visualforce page.
  • Line# 10: To use Lightning Design System markup in visualforce page, it should be placed inside an outer wrapper
    with scoping class you created using CSS Customizer tool. In my case,  the name of the scoping class is: “suddeb“. 
  • Don’t worry about Line# 11 for the time being. I will explain the same in my next post.
Great. So we have created our first visualforce page with Lightning Design System. In my next post, I will get into more details. Till then, please provide your feedback. Thanks.