The Salesforce Lightning Design System (SLDS) helps you to create rich enterprise applications that adheres to Salesforce design guidelines and CSS frameworks. It helps developers in making their apps look and feel like the native Salesforce Lightning Interface.
Implementing in Lightning Apps & Components
By default, the Lightning Design System is included automatically for Lightning Components running in the Lightning Experience and Salesforce mobile application. Earlier you had to add the SLDS zip as a static resource for using it in Lightning Components which is no longer necessary.
Lightning Design System stylesheets and design tokens can be enabled in Lightning Out, Lightning Components for Visualforce, and Lightning Application using the following methods:Lightning Out automatically includes the current version of the Lightning Design System onto the page that’s using Lightning Out. Usage is as shown below:
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
<aura:dependency resource=”c:testComponent”/>
</aura:application>
Similarly in Lightning Components for Visualforce (LC4VF), Extending from ltng:outApp adds the SLDS resources to the page to allow your Lightning components to be styled with it as shown in the example below.
lcvfTest.app
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
<aura:dependency resource=”ui:button”/>
</aura:application>
lcvfPage.vfp
<apex:page>
<apex:includeLightning />
<div id=”testLC” />
<script>
$Lightning.use(“c:testLightningVF”, function() {
$Lightning.createComponent(“ui:button”,
{ label : “Load!” },
“lightning”,
function(cmp) {
// do some stuff
});
});
</script>
</apex:page>
Lightning applications get Lightning Design System styles and design tokens automatically if they extends force:slds as shown below:
<aura:application extends=”force:slds”>
<!– application content –>
</aura:application>
All these three methods help us to keep our lightning apps up to date and consistent with the Lightning Design System enhancements.
Implementing in Visualforce
In Visualforce, Lightning Design System can be included by simply adding the attribute lightningStyleSheets=”true” to the <apex:page> tag.
We can also customize Lightning Experience things in the page, using the Design System CSS in Visualforce by adding <apex:slds /> to the page and wrapping the code in a container as following:-
<div class=”slds-scope”>
<!–page content–>
</div>
Another method is to implement SLDS is to create a CSS file with a custom scoped outer wrapper. Salesforce does not recommend this, but still supports this as there are cases where there will be need to use a static resource and include in a Visualforce page. First we need to identify a scoping class name to be used, a name related to your company name, for avoiding duplication with the page components.
Once it is confirmed, go to https://tools.lightningdesignsystem.com/css-customizer and enter the scoping class name in the provided input field. Then choose the desired Salesforce release version from the pick list and click the Generate button. The tool will generate the scoped files for both the Visualforce and Lightning Components environments. You can download the file and store it as a static resource to use in your visualforce pages.
Conclusion
In this blog, we have discussed different approaches to include Salesforce Lightning Design in Lightning Apps, Components and Visualforce pages to make them look and feel like native Salesforce Lightning Interface.
To know more about Suyati’s expertise on Lightning Platform, please write to services@suyati.com.
