2

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.

Improve this question

2 Answers 2

Reset to default
3

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

<head>
  <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')}" />
</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

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

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">    

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

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

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

</body>
</html>
</apex:page>
Improve this answer
3
  • 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.***
    – Pankaj Andhale
    Commented Mar 22, 2016 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
    – Pankaj Andhale
    Commented Mar 22, 2016 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
    Commented Mar 22, 2016 at 21:17
1

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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .