Adding Lightning design system to visualforce page

Migrating visualforce page to lightning experience is more common nowadays. Not only new changes are created using the lightning design system in visualforce page but converting the legacy visualforce page to new lightning design system is mandatory when you work with lightning experience. 

An easy way to add lightning design system to your visualforce page is by adding the <apex:slds> tag in your visualforce page. Make sure you have made the standardStylesheets="false", so that both the style system wont conflict.

<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 </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">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Salesforce Lightning Design System in Visualforce.
    </p>
    <!-- / MASTHEAD -->

    <!-- PAGE HEADER -->
    <!-- / PAGE HEADER -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <!-- / PRIMARY CONTENT WRAPPER -->

    <!-- FOOTER -->
    <!-- / FOOTER -->

  </div>

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

Cheers !!!

Have a good day yes

Reference links:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_slds.htm

https://trailhead.salesforce.com/en/projects/workshop-lightning-design-system-visualforce

Rating: 
Average: 5 (2 votes)