Create a Visualforce Page for the Salesforce Mobile App Using SLDS

Let’s create a Visualforce page that displays your recently accessed accounts and is styled with the Lightning Design System (SLDS) and add it to the mobile navigation menu.

First, let’s create the Visualforce page.
Open the Developer Console and click File | New | Visualforce Page. Enter SLDSPage for the page name.

In the editor, replace any markup with the following.

1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
2
3  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
4    <head>
5      <meta charset="utf-8" />
6        <meta http-equiv="x-ua-compatible" content="ie=edge" />
7        <title>SLDS LatestAccounts Visualforce Page in Salesforce Mobile</title>
8        <meta name="viewport" content="width=device-width, initial-scale=1" />
9
10      <!-- Import the Design System style sheet -->
11      <apex:slds />
12    </head>
13
14    <apex:remoteObjects >
15      <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
16    </apex:remoteObjects>
17
18    <body>
19
20      <!-- REQUIRED SLDS WRAPPER -->
21      <div class="slds-scope">
22
23         <!-- PRIMARY CONTENT WRAPPER -->
24         <div class="myapp">
25
26           <!-- ACCOUNT LIST TABLE -->
27             <div id="account-list" class="slds-p-vertical--medium"></div>
28           <!-- / ACCOUNT LIST TABLE -->
29
30         </div>
31         <!-- / PRIMARY CONTENT WRAPPER -->
32
33      </div>
34      <!-- / REQUIRED SLDS WRAPPER -->
35
36      <!-- JAVASCRIPT -->
37      <script>
38      (function() {
39        var outputDiv = document.getElementById('account-list');
40        var account = new SObjectModel.Account();
41
42        var updateOutputDiv = function() {
43
44          account.retrieve(
45            { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
46            function(error, records) {
47              if (error) {
48                alert(error.message);
49            } else {
50              // create data table
51              var dataTable = document.createElement('table');
52              dataTable.className = 'slds-table slds-table--bordered slds-text-heading_small';
53
54              // add header row
55              var tableHeader = dataTable.createTHead();
56              var tableHeaderRow = tableHeader.insertRow();
57
58              var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
59              tableHeaderRowCell1.appendChild(document.createTextNode('Latest Accounts'));
60              tableHeaderRowCell1.setAttribute('scope', 'col');
61              tableHeaderRowCell1.setAttribute('class', 'slds-text-heading_medium');
62
63              // build table body
64              var tableBody = dataTable.appendChild(document.createElement('tbody'))
65
66              var dataRow, dataRowCell1, recordName, data_id;
67              records.forEach(function(record) {
68                dataRow = tableBody.insertRow();
69                dataRowCell1 = dataRow.insertCell(0);
70                recordName = document.createTextNode(record.get('Name'));
71                dataRowCell1.appendChild(recordName);
72
73              });
74              if (outputDiv.firstChild) {
75                // replace table if it already exists
76                // see later in tutorial
77                outputDiv.replaceChild(dataTable, outputDiv.firstChild);
78              } else {
79                outputDiv.appendChild(dataTable);
80              }
81            }
82          }
83        );
84      }
85      updateOutputDiv();
86      })();
87      </script>
88      <!-- / JAVASCRIPT -->
89    </body>
90  </html>
91</apex:page>

The <apex:slds /> tag allows you to access SLDS stylesheets. This component is an easy alternative to uploading SLDS as a static resource and using it in your Visualforce pages.
The <div class="slds-scope"> wrapper is necessary around any SLDS-styled content. SLDS styles only apply to elements contained inside of it.

This page is also mobile-friendly. Let’s add the page to the Salesforce mobile menu.
Enable the page for mobile apps.
1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
2. Click Edit next to the SLDSPage Visualforce page in the list.
3. Select Available for Lightning Experience, Experience Builder sites, and the mobile app.
4. Click Save.
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 SLDSPage.
4. In the Tab Label field, enter SLDS Page.
  
  Notice that the Tab Name field 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 mobile navigation menu.
6. Click Next, then Next, then Save.
Add the tab to the mobile navigation menu.
1. From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce Navigation.
2. Select the SLDS Page tab and click Add.
  
  The SLDS item is added at the bottom of the Selected list.
3. Click Save.

Visualforce latest accounts page styled with the Lightning Design System.