17

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.

18

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.

  • 4
    Peter, One of the points of using tag libraries like the apex:... ones is that the tags emit the detailed markup (such as CSS styles) consistently without the programmer having to mark up every instance. When will Visualforce have a "SLDS" option to do this (that is automatically turned on when Lightning Experience is turned on)? – Keith C Nov 16 '15 at 11:23
  • 1
    I agree 100%, @KeithC. Or better yet, enable pageBlockXXX to just automatically look like either UI depending on context. That's what I hope for. I don't have an answer to when, or how, only that I understand the UX team is looking at how to solve this problem going forward. – pchittum Nov 16 '15 at 11:27
  • 1
    @KeithC I just updated this answer with a new feature relating to SLDS and Visualforce. – pchittum Sep 20 '17 at 16:18
  • @pchittum How about adding lightningStylesheets="{ ! CONTAINS($User.UIThemeDisplayed,'Theme4') }" to make it clear that this tag allows dynamic change from lightning to classic look. – Christian Szandor Knapp Sep 20 '17 at 21:24
  • @ChristianSzandorKnapp smells of overkill to me...or at least German over engineering. ;-) But give it a try. Maybe it'll catch on! :-) – pchittum Sep 20 '17 at 21:52
3

Lightning design system is all about the standard css framework which define the UI inside Salesforce so yes it is possible to include that in visualforce pages without enabling Lightning Experience enabled.

You can follow below steps

  1. Add Lightning design system css into your org as static resource and include that in your page.

  2. Include css into your page and wrap items around slds class

<apex:page sidebar="false" standardStylesheets="false"> 
<apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>

<div class="slds">
 <div class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture" role="alert">
 <span class="slds-assistive-text">Info</span>
 <h2>Success Message</h2>
</div>
</div>
</apex:page>
0

Of course you can.

Upload the SLDS zip file as a static resource in your org.

Refer the CSS in your visualforce page using

<apex:stylesheet value="/resource/SLDSXXXX/assets/styles/salesforce-lightning-design-system-ltng.css"/>

You can create a custom scoped class while generating the zip. This needs to be applied to a div which wraps your SLDS design VF page code. If you dont need a custom scoped class,wrap the contents using an outer div with class "slds".

In case your visualforce page is having version 39.0 or higher, you could skip all this and can just include a tag in your markup to include the SLDS in your page.

Please note that if you wrap SLDS with standard classic tags like pageblock or pageblocksection, its design will be overwritten with SLDS design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.