[SalesForce] Can we use the Lightning Design System in Visualforce pages but have the Lightning Experience disabled

I asked this question to Premier Support but I don't think that they actually know the answer themselves, so am posting here.

Is it possible to use the Lightning Design System in Visuaforce pages in an org but have Lightning Experience disabled? The Lightning Experience is still quite 'beta' really, and so I'm not keen to enable it but I would like to take advantage of the Lightning Design System (because it looks great).

I assume that it is possible to leverage the Lightning Design System in VF pages even with Lightning Experience disabled, but Premier Support told me that it was not possible.

Best Answer

Salesforce Lightning Design system is implemented for Visualforce as a CSS library that you would include in your VF page as a static resource. In the same way you could include any other CSS library as a static resource, you can do the same with SLDS.

As such, there is absolutely no dependency between enabling Lightning Experience and using the raw design system CSS.

The Lightning Design System website gives some quickstarts on using it for Lightning Components, web pages (most likely running on Heroku), and Visualforce. Where it describes how to use it.

Alternatively, you could go get the Trailhead badge which also walks you though using it in a variety of contexts. There is a project, which focuses specifically on using SLDS with Visualforce.

* UPDATE * Based on new features it seems worthwhile to mention some items that make the "problem" of Lightning and SLDS in Visualforce much easier.

To import the SLDS stylesheets manually into your Visualforce page today, you can now use the <apex:slds/> tag in your Visualforce markup. To avoid clashes with the "classic" UI you probably would be best advised to also turn off those stylesheets.

And if you want your Visualforce pageBlock markup to function both in Lightning and in Classic, as of Winter 18 (available very soon) release we have added a new apex:page attribute called lightningstylesheets. Here is a Visualforce page in Lightning: VF Page with PageBlock in Lightning

In Classic: VF Page with PageBlock in Classic

And this is the code: 

<apex:page lightningStylesheets="true" controller="DreamhouseProspects">
  <apex:sectionHeader title="Leads" subtitle="Home"/>    
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockButtons location="top">
        <apex:outputLabel value="Sort: " for="sortList" />
        <apex:selectList value="{! sortOrder}" size="1" id="sortList">
          <apex:selectOption itemvalue="LastName" />
          <apex:selectOption itemvalue="FirstName" />
        </apex:selectList>
        <apex:commandButton value="Sort Table" action="{!sortList}" reRender="leads_list"/>
        <apex:commandButton action="{!URLFOR($Action.Lead.New)}" value="New"/>
      </apex:pageBlockButtons>
      <apex:pageBlockTable value="{! leads }" var="ct" id="leads_list">
        <apex:column headerValue="First Name">
          <apex:outputLink value="/{! ct.Id}">{! ct.FirstName }</apex:outputLink>
        </apex:column>
        <apex:column value="{! ct.LastName }"/>
        <apex:column value="{! ct.Email }"/>
        <apex:column value="{! ct.Phone }"/>
      </apex:pageBlockTable>              
    </apex:pageBlock>
  </apex:form>
</apex:page>

The only things required to make this work are a page that makes use of the core pageBlock tags as the primary way that things are displayed and the use of the lightningStylesheets="true" attribute in the apex:page tag.

Related Topic