1. In the first case, let's develop a Visualforce page with some form elements. We have a form with an output label and input text; let's save and preview it. The output should look as follows:

2. Our Visualforce form has no styling; it is just plain Visualforce page. Let's apply the Salesforce Lightning Design System style sheet by using a simple component—apex:slds. Save it again, and you will see the following preview:

3. We are applying a Salesforce Lightning style sheet to a Visualforce page, using the following components—slds-card, styleClass="slds-input", slds-button, and slds-button-group, and for the button, we are using slds-button_success, slds-button_brand, and slds-button_destructive.
4. Now, go to lightningdesignsystem.com, click on GET STARTED, and go to Components, Buttons. You can refer to the multiple examples of different types of buttons that can be used in your Visualforce pages.

5. You can use class to add different kinds of buttons; for example, <button class="slds-button slds-button_destructive">Button</button>. Take a look at the following code:

<apex:page >
 <apex:slds />
<apex:form >
       <div class="slds-card" style="padding:2%">
         <apex:outputLabel value="Enter Account Name"></apex:outputLabel>
         <apex:inputText styleClass="slds-input"/>
         <apex:outputLabel value="Enter Contact Name"></apex:outputLabel>
         <apex:inputText styleClass="slds-input"/> <br/> <br/>
         <div class="slds-button slds-button-group">
         <apex:commandButton styleClass="slds-button slds-button_success" value="Submit"/>
         <apex:commandButton styleClass="slds-button slds-button_brand" value="Search"/>
         <apex:commandButton styleClass="slds-button slds-button_destructive" value="Abort"/>
         </div>
      </div>
  </apex:form>
</apex:page>

6. Within the button group, you have three buttons. If you remove the button group, that is, <div class="slds-button slds-button-group">, then you will end up with three separate buttons. Save it, and take a look at the following screenshot:

7. With the Lightning Design System, Salesforce has made it very simple for Visualforce developers to make Visualforce pages that are exactly like Lightning pages, as indicated by the preceding screenshot.
8. In the second case, we will make the Visualforce details page look like a Lightning page. We will create a new Visualforce page and we will add the Visualforce Markup as follows:

<apex:page>
  <apex:slds />
  <apex:detail />
</apex:page>

9. With the <apex:slds/> component added, the Visualforce details page would look similar to a Lightning page.

10. In the third case, the Visualforce page saves data to Salesforce; this is an account creation Visualforce page that looks like a Lightning page. Let's create another page and we will use the following code in place of the Visualforce Markup:

<apex:page standardController="Account">
 <!-- <apex:slds /> -->
  <apex:form >
    <apex:pageBlock title="Account Edit">
     <apex:pageBlockButtons >
      <apex:commandButton value="Submit" action="{!Save}"/>
      <apex:commandButton value="Cancel" action="{!Cancel}"/>
     </apex:pageBlockButtons>
     <apex:pageBlockSection title="Account Info">
      <apex:inputField value="{!Account.Name}"/>
      <apex:inputField value="{!Account.Type}"/>
      <apex:inputField value="{!Account.Rating}"/>
      <apex:inputField value="{!Account.Industry}"/>
      <apex:inputField value="{!Account.Phone}"/>
      <apex:inputField value="{!Account.WebSite}"/>
     </apex:pageBlockSection>
     <apex:pageBlockSection title="Billing Address">
      <apex:inputField value="{!Account.BillingStreet}"/>
      <apex:inputField value="{!Account.BillingCity}"/>
      <apex:inputField value="{!Account.BillingPostalCode}"/>
      <apex:inputField value="{!Account.BillingState}"/>
      <apex:inputField value="{!Account.BillingCountry}"/>
     </apex:pageBlockSection>
     
     <apex:pageBlockSection title="Shipping Address">
      <apex:inputField value="{!Account.ShippingStreet}"/>
      <apex:inputField value="{!Account.ShippingCity}"/>
      <apex:inputField value="{!Account.ShippingPostalCode}"/>
      <apex:inputField value="{!Account.ShippingState}"/>
      <apex:inputField value="{!Account.ShippingCountry}"/>
    </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

11. We have deactivated <apex:slds/>, so you will be able to see it, just like you would see a normal Visualforce page, as shown in the following screenshot:

12. Once we apply SLDS, the styling will be visible. If you save it, it should look exactly like a Lightning Experience page. Take a look at the following screenshot:

13. In the forth case, we can display records using SLDS, in order to make them look like a Lightning page. A Visualforce developer uses the standard controller and record set variable to display records. Let's create a page and comment out <apex:slds/>. Take a look at the following screenshot:

14. We will then add styles by uncommenting <apex:slds/>. Take a look at the following code:

<apex:page standardController="Account" recordSetVar="ShahAccounts">
 <apex:slds />
 <apex:form >
  <apex:pageBlock title="Records in Lightning Style" >
    <apex:pageBlockButtons >
      <apex:commandLink value="First" action="{!First}"/> | &nbsp;
      <apex:commandLink value="Previous" action="{!Previous}"/> | &nbsp;
      <apex:commandLink value="Next" action="{!Next}"/> | &nbsp;
      <apex:commandLink value="Last" action="{!Last}"/> 
    </apex:pageBlockButtons>
          <apex:pageBlockTable value="{!ShahAccounts}" var="Acc">
             <apex:column value="{!Acc.Name}"/>
             <apex:column value="{!Acc.BillingState}"/>
             <apex:column value="{!Acc.Rating}"/>
             <apex:column value="{!Acc.Industry}"/>
             <apex:column value="{!Acc.WebSite}"/>
          </apex:pageBlockTable>
  </apex:pageBlock>
 </apex:form>
</apex:page>

15. By referencing <apex:slds/>, a single Visualforce component, we are referencing the Salesforce Lightning Design System styles in Visualforce pages. Now, let's take a look at adding other SLDS components to Lightning pages. In the next recipe, we'll cover adding SLDS components to Lightning.