I went to download the SLDS to check if there is a new version but “
Salesforce.com : Design System Unmanaged Package deprecated
“. Ohhhhhh…. what does not mean ??? Will we not be able to use Lightning any more ? Ahhh no , there is a different route now to use our cool Salesforce Lightning Design System (SLDS).
You were earlier downloading the unmanaged package and referring the static resource in your pages directly as :
<apex:stylesheet value="{!URLFOR($Resource.SLDS103, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
SLDS103: you would replace your static resource name here.
and you will start your visualforce page’s first DIV tag as class=”slds” ( <div class=”slds”>).
But now on wards we, may not need to install anything if we are building in an Org where Lightning Experience is already enabled or we are building a page, component for Salesforce 1 app. If you are using classic user interface and need some visualforce pages to look like lightning you will need to follow the below steps.
- Go to the link : https://tools.lightningdesignsystem.com/css-customizer
- Enter the scope name you would like (in this example I am using getthekt)
- Click on “Generate & Download”
- You will get a zip file containing all the required files
- Upload it as static resource (for example I have uploaded the generated file as SLDSGETTHEKT)
This is how the link looks like :
Now, while coding the VF page we will use the same stylesheet tag, i.e
<apex:stylesheet value=”{!URLFOR($Resource.SLDSGETTHEKT, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}” />
Note : the name of the resource you uploaded and the div tag will start with the name that you gave for the scope, i.e instead of class=”slds” , you will write class=”getthekt” (as per example here)
So, my sample page would look like :
<apex:page standardController="account"> <apex:stylesheet value="{!URLFOR($Resource.SLDSGETTHEKT, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> <!-- <div class="slds"> This will no more work--> <div class="getthekt"> <!-- this will work --> <div class="slds-section-title--divider" style="font-size:20px;font-weight:bold;">{!account.name}</div> <apex:outputText escape="false" value="{!account.Project_Work_Active__c}" ></apex:outputText> <div class="slds-section__title">Website</div><h6 class="slds-text-heading--small" >{!account.website}</h6> <div class="slds-section__title">Phone</div> <h2 class="slds-text-heading--small" >{!account.phone}</h2> <div class="slds-section__title">Revenue</div><h2 class="slds-text-heading--small" >{!account.annualRevenue}</h2> </div> <div > <section class="slds-clearfix"> <div class="slds-float--right"> <div class="slds-section__title">Country</div> <p>{!account.Billingcountry}</p> </div> </section> </div> </div> </apex:page>
Leave a Reply