Visualforce got an update!

One of the coolest updates within the Spring ’17 release notes I found was the ability to now natively use the Lightning Design System directly inside Visualforce without needing to upload or reference a static resource.

Why is this cool? Simple. You don’t contribute to the overall limit of how much space your static resources take up and you benefit from always having the latest version of the Lightning Design System incorporated into your pages.

In this release Salesforce has added the new apex:slds tag.

Getting started

To get started we need to set up the basic structure of our Visualforce page.

<apex:page>

   <apex:slds />

</apex:page>

Notice anything? We only included the new apex:slds tag and we’re ready to start using all of the new goodness in Visualforce!

The new $Asset global variable

There is also a new $Asset global variable which has been introduced to help reference assets within your Visualforce page, such as including icons from the Lightning Design System.

To access the assets within the Lightning Design System we need to use the URLFOR in the same approach as we would do when accessing assets inside a static resource.

{!URLFOR($Asset.SLDS, 'assets/icons/action/add_contact_60.png')}

Going custom

If you’re building a Visualforce page with a custom structure or look and feel then you will most likely will have set applyBodyTag or applyHtmlTag attributes to false on the apex:page tag.

When either of these attributes are set to false you will need to add a CSS class name to the body called “slds-scope”. Without this your page will not use the Lightning Design System and you will most likely end up with a page looking straight out of the 90’s.

no-scope

Applying the slds-scope CSS class magically transforms the above with the same structure into the following:

with-scope

Below is an example of how to correctly set your page up:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" applyBodyTag="False" applyHtmlTag="False">
<html>
<head>
<apex:slds />
</head>
<body class="slds-scope">
...Lightning Design System Ready...
</body>
</html>
</apex:page>

Start using the new look!

It’s super easy to include the new Lightning Design System in your pages and rather simple enough to upgrade your existing Visualforce pages to incorporate the new design.

Check out the support page for more information.