Start tracking your progress
Trailhead Home
Trailhead Home

Use the Salesforce Lightning Design System to Style Visualforce Pages

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe what the Salesforce Lightning Design System (SLDS) is and what it’s used for.
  • Explain how to use SLDS in Visualforce development.
  • Style a Visualforce page for the Salesforce app using SLDS.

Use SLDS in Visualforce Pages in the Salesforce App

The Salesforce Lightning Design System (SLDS) helps you build applications with the look and feel of our modern user interface, used by both the Salesforce app and Lightning Experience. The Lightning Design System is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create this new Salesforce look and feel.

The Latest Accounts page you made in the last unit is useful. But wouldn’t it be better if the page matched the rest of the Salesforce app? You might be thinking, “That sounds like a lot of work. I probably need a whole team of developers to reverse engineer the Salesforce app’s CSS.”

We’re huge fans of the new user interface that we’ve built—Lightning Experience raises the bar for enterprise user experience. Lucky for you, you can match the look of the Salesforce app and Lightning Experience in your apps without writing a single line of CSS, thanks to the Lightning Design System.

Lightning Design System is quite a mouthful, so we’ll refer to it going forward as SLDS.

SLDS Benefits and Uses

SLDS gives you the tools to create apps consistent with the principles, design language, and best practices of the Salesforce app and Lightning Experience. Let’s dive into what makes SLDS so useful.
  • It provides a unified experience and streamlined workflows when extending existing features or integrating with external systems.
  • It’s specifically designed around user interface patterns common in enterprise apps.
  • It’s continuously updated. As long as you’re using the latest version of SLDS, your pages are always consistent with Lightning Experience.

Sounds pretty exciting. So how do we use SLDS to develop for the Salesforce app? Read on to find out.

SLDS Tags in Visualforce Pages for the Salesforce App

You can use SLDS to build Visualforce pages that match the look and feel of the Salesforce app. To use SLDS, it only takes tweaks in your code and a few things to remember. For the most part, Visualforce code that uses SLDS “just works.”

Let’s get started by using the basic framework for creating a Visualforce page using SLDS.

  • To add SLDS to your page, add the <apex:slds /> tag anywhere on your page. The <apex:slds /> tag imports SLDS stylesheets so you don’t have to do it yourself.
  • Wrap SLDS elements in a scoping class <div class="slds-scope">...</div>. Use the scoping class to ensure that SLDS styling rules don’t conflict with the styling rules for other components.

    Note

    Note

    For more information about use of Visualforce and SLDS components together, see Using the Lightning Design System .

  • To use SLDS SVG spritemap icons, add the attributes xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to the <html> tag of your page.
Here’s a code sample that incorporates these tags. Don’t worry about the details right now. We’ll look at some real code in the next section.
<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" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System Trailhead Module</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>
    <body>

      <div class="slds-scope">
        <!-- your page content goes here -->
      </div>

    </body>
  </html>
</apex:page>
Note

Note

Apex tags such as <apex:pageblock> and <apex:inputField> aren’t supported for use with SLDS.

Create a Visualforce Page Using SLDS

Let’s build a page that uses SLDS. We’re going to style the Latest Accounts page we made in the last unit using SLDS.
  1. Open the Developer Console and click File | New | Visualforce Page. Enter LatestAccountsSLDS for the page name.
  2. In the editor, replace any markup with the following.
    <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" lang="en">
        <head>
          <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge" />
            <title>SLDS LatestAccounts Visualforce Page in Salesforce Mobile</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <!-- Import the Design System style sheet -->
          <apex:slds />
        </head>     
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
             <!-- PRIMARY CONTENT WRAPPER -->
             <div class="myapp">
    
             </div>
             <!-- / PRIMARY CONTENT WRAPPER -->
    
          </div>
          <!-- / REQUIRED SLDS WRAPPER -->
    
          <!-- JAVASCRIPT -->
          <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    This is the skeleton of our updated Latest Accounts page. A lot of the code you see here is necessary for any Visualforce page that uses SLDS.
    • The <apex:slds /> tag allows you to access SLDS stylesheets. This component is an easy alternative to uploading SLDS as a static resource.
    • The <div class="slds-scope"> wrapper is necessary around any SLDS-styled content. SLDS styles only apply to elements contained by it.
  3. Now let’s add some content. Access your account records as a remote object by inserting the following code between the </head> and <body> tags.
    <apex:remoteObjects >
      <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
    </apex:remoteObjects>
  4. Next we add an account-list <div> with vertical padding from the slds-p-vertical--medium class after <div class="myapp">. Our JavaScript will fill this <div> with a list of the most recently accessed accounts.
    <!-- ACCOUNT LIST TABLE -->
      <div id="account-list" class="slds-p-vertical--medium"></div>
    <!-- / ACCOUNT LIST TABLE -->
  5. Finally, add the following JavaScript code before the </body> tag. Looks pretty similar to the JavaScript we wrote in the last unit, right? It’s the same general idea. The only changes here are specific to using markup and styling required by SLDS. Note that in your own code you’ll probably want to put this JavaScript in a separate static resource.
    <script>
    (function() {
      var outputDiv = document.getElementById('account-list');
      var account = new SObjectModel.Account();
    
      var updateOutputDiv = function() {
    
        account.retrieve(
          { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
          function(error, records) {
            if (error) {
              alert(error.message);
            } else {
              // create data table
              var dataTable = document.createElement('table');
               dataTable.className = 'slds-table slds-table--bordered slds-text-heading_small';
    
              // add header row
              var tableHeader = dataTable.createTHead();
              var tableHeaderRow = tableHeader.insertRow();
    
              var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
              tableHeaderRowCell1.appendChild(document.createTextNode('Latest Accounts'));
              tableHeaderRowCell1.setAttribute('scope', 'col');
              tableHeaderRowCell1.setAttribute('class', 'slds-text-heading_medium');
    
              // build table body
              var tableBody = dataTable.appendChild(document.createElement('tbody'))
    
              var dataRow, dataRowCell1, recordName, data_id;
              records.forEach(function(record) {
                dataRow = tableBody.insertRow();
                dataRowCell1 = dataRow.insertCell(0);
                recordName = document.createTextNode(record.get('Name'));
                dataRowCell1.appendChild(recordName);
    
              });
              if (outputDiv.firstChild) {
                // replace table if it already exists
                // see later in tutorial
                outputDiv.replaceChild(dataTable, outputDiv.firstChild);
              } else {
                outputDiv.appendChild(dataTable);
              }
            }
          }
        );
      }
      updateOutputDiv();
    })();
    </script>
    This code accesses account records via a remote object, and the updateOutputDiv() function uses them to render a table within the account-list <div>.
Good work! Now let’s add the Visualforce page to the Salesforce app.

Add the SLDS Visualforce Page to the Salesforce App

Use the same process from the preceding unit to add your styled page to the mobile app.
  1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages, and then enable the page for mobile apps.
    You learned how to enable a page for mobile apps in a previous unit.
  2. Create a tab for the Visualforce page.
    1. From Setup, enter Tabs in the Quick Find box, then select Tabs.
    2. In the Visualforce Tabs section, click New.
    3. In the Visualforce Page drop-down list, select LatestAccountsSLDS.
    4. In the Tab Label field, enter SLDS Latest Accounts.
      Note that the Tab Name is filled in automatically
    5. Click in the Tab Style field and select the Diamond style.
      The icon for this style appears as the icon for the page in the Salesforce app navigation menu.
    6. Click Next, then Next again, then Save.
  3. Add the tab to the Salesforce app navigation menu.
    1. From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce | Salesforce Navigation.
    2. Select the Latest Accounts tab and click Add.
      The Latest Accounts item is added at the bottom of the Selected list.
    3. Click Save.
    The Latest Accounts page after mobile stylingLook at that! Your SLDS Latest Accounts page now fits seamlessly with the rest of the Salesforce app.
    Note

    Note

    We can’t cover all the details of SLDS in this module. We encourage you to take a look at the Lightning Design System module and the Lightning Design System website to learn about the other cool applications of SLDS.

retargeting