Create a New Visualforce Page

Create a Visualforce Page

What You’ll Do

  • Create a simple Visualforce page to test that the Design System is working

Step 1: Create a Page

  1. In your org, navigate to Setup.
  2. In the left sidebar, in the Quick Find box type pages.
  3. In the sidebar, click Visualforce Pages and then New.

Complete the form as follows:

  • For Label: Trailhead_SLDS_Contacts
  • For Name: (should default to Trailhead_SLDS_Contacts)
  • Click Save

Step 2: Add the Initial Markup

After you've created the page, use your favorite authoring tool to include the following markup in the page:

Tip: You click Copy above any code snippet in Trailhead to easily copy and paste code.

<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>
    <apex:remoteObjects >
    <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
    </apex:remoteObjects>
    <body>
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
        <!-- MASTHEAD -->
        <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p>
        <!-- / MASTHEAD -->
        <!-- PAGE HEADER -->
        <!-- / PAGE HEADER -->
        <!-- PRIMARY CONTENT WRAPPER -->
        <div class="myapp slds-p-horizontal_medium">
          <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
        </div>
        <!-- / PRIMARY CONTENT WRAPPER -->
        <!-- FOOTER -->
        <!-- / FOOTER -->
      </div>
      <!-- / REQUIRED SLDS WRAPPER -->
      <!-- JAVASCRIPT -->
      <!-- / JAVASCRIPT -->
    </body>
  </html>
</apex:page>
Note

Note

The <apex:slds /> tag in the head of the document: that’s the piece that imports the Design System styles and assets in your Visualforce page

The outer <div class="slds-scope"> wrapper: it is important that you wrap all your Lightning Design System markup in this wrapper. The Design System styles only apply to elements contained inside of it.

Step 3: Preview

Save your page, and click the Preview button. You should see a simple header that says, “Salesforce Lightning Design System Visualforce Workshop”.

It might not look like much now, but this page serves as a great foundation for the rest of the project.

Over the course of the rest of the project, we will be extending this page markup step by step with additional Design System components. For reasons of brevity, we will not be explaining each Design System component class structure in depth. However, we will provide links to further documentation on the Design System website.

Preview of Visualforce page after adding initial markup