Can we use the salesforce lightning design system with leagacy visualforce pages without use of javascript or remote object access directly? I mean can we directly use slds static resources in visualforce pages and tags.


Yes, there is a basic example in this trailhead unit:

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

  <title>Salesforce Lightning Design System Trailhead Module</title>
  <apex:stylesheet value="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />


  <div class="slds">    

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

    <div class="myapp">    

      <section aria-labelledby="badges">
        <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
          <span class="slds-badge">Badge</span>
          <span class="slds-badge slds-theme--inverse">Badge</span>
      <!-- / SECTION - BADGE COMPONENTS -->    

    <!-- / PRIMARY CONTENT WRAPPER -->    

  <!-- / REQUIRED SLDS WRAPPER -->    

  • Ok. But in the same trailhead in the unit 4 under the heading ""Populating a Data Table with Dynamic Data"" its written that *** in this release the Design System doesn't support built-in Visualforce components — the <apex:*>, <chatter:*> and other components you know and love — for laying out pages and accessing data. That's important to note. Don’t expect to apply the Design System to your legacy Visualforce pages and have them instantly transform into the most beautiful UI on the Internet.*** Mar 22 '16 at 19:31
  • I'm using slds within my visualforce page. Does it have some design limitations If I directly use slds without using remote objects to access the salesforce object using apex controllers Mar 22 '16 at 19:34
  • @PankajAndhale from what I've read it is more difficult to achieve the new look in the older Visualforce technology. Take a look at this unit here: developer.salesforce.com/trailhead/lex_dev_visualforce/… - have you thought about using lightning out and adding components to your page instead?
    – Jenny B
    Mar 22 '16 at 21:17

You can, but seeing as VF does the html rendering for you. You would have to use javascript to find the elements in the DOM and add the class names to the elements to get your styling. The ids of your elements are dynamically built when VF renders the HTML and they are not user friendly ids to go searching through the DOM for.

I would suggest remote objects and javascript.

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.