Hello There ! Welcome Back 🙂
Today, we are gonna learn how to use the Lightning Design System to beautify your Visualforce Pages.
So, first things first. What is the Lightning Design System ?
The Lightning Design System is collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS. In fact using the new Design System markup results in pages which have the Lightning look and feel without writing any CSS to create the world’s best enterprise app experiences.
The Design System bundles four types of resources:
- The CSS framework
- Icons – PNG and SVG (both individual and spritemap) versions of the Salesforce action, custom, doctype, standard, and utility icons.
- Font – the Cute ‘Salesforce Sans’ (My Personal Favourite)
- Design Tokens
You can use the Design System across a range of technology stacks:
- Visualforce pages but, only HTML markup because the Design System is not yet compatible with
<apex>tags, but it might be compatible in the future.
- Lightning pages and components
- Mobile apps
- Standalone web apps
Awesome, Right ? Lets get started.
In this tutorial, we are only going to focus on how to use Lightning Design System(SLDS) with Visualforce Pages.
Here are some important points to keep in mind when using SLDS with Visualforce Pages:
- All your Design System markup needs to be contained within a
<div class="slds">as outer wrapper.
- To use the SVG spritemap icons, add the attributes
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"to the
<html>element (the html tag).
Step 1: Getting the Lightning Design System
The best and the easiest way to get the LDS into your org is by installing an unmanaged package found on its website here. The package creates a static resource of the SLDS in your org. And once you are done, you can access the SLDS in your visualforce page just like any other static resource, like this:(Depricated)
1) Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
I am using “slds” as a scoping class in my case.
2) The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “LDS”.
3) Upload the zip file as your Static Resource.
4) And once you are done, you can access the SLDS in your visualforce page just like any other static resource, as ahown below:
Step 2: Creating Our First Visualforce Page Using The Lightning Design System
A huge library of components offered by the Design System can be found here. We will be using a Page header, Form and a Button Component. First, add the ststic resource reference into your visualforce page as shown above in Step 1, Second, Add a
<html> element with the attributes as shown below, this is mainly because we are gonna use SVG icons from the SLDS icon library.
Third, and the most important step, Add a
<body> element and a
<div> element with its class as your scoping class as shown below:
Now, lets add A Page Header and a Form component, copy and paste the code below into the
<div> created above and save. and your whole code should look like this:
And your page should look similar to this:
So, what did we do here ? We created a visualforce page using various components and modifiers
- Page Header : The outer
<div>has the class
slds-page-headerwhich applies page header style. Inside that we have a two column Grid System. The first grid column contains two elements with Text heading utility classes. It has two modifier classes applied,
slds-align--middle. The first,
slds-no-flex, is one of the Design System layout utilities and removes flexbox from the column so it does not resize.
slds-align-middleis an alignment utility which adjusts the vertical placement of the column contents so they align with the taller column to the left.Inside the second column, we have a Button component with the class
slds-button: “New Account” which has a modifier class,
slds-button--neutral, applying minimal styling.
- Input Form : Two wrappers. First, a
<div>wrapper adds page structure. Inside this is a second wrapper element, a
slds-container--small. These three classes create a white, boxed, small, area to keep things nice and tidy. The title in the
<legend>tag adds a title at the top of the box. The
idattribute corresponds to the
aria-labelledbyattribute on the
<section>element for accessibility. Now the Form, The Design System provides several form layouts including horizontal, stacked, and inline. Here, we apply a vertical stacked layout to the
slds-form--stackedclass. Each label and input pair are placed within a wrapper div with the
slds-form-elementto provide optimal spacing. Inside the wrapper, the
<label>element has a
<input>field is placed inside another wrapper
slds-form-element__control, again to provide optimal spacing. The
<input>field itself has the
So there it is, we just learnt how to design beautiful visualforce pages without writing a single line of CSS. Awesome, Right?
You can also learn more about the Design System in this Great Trailhead Module Here.
Explore the Amazing Design System Library Here and create beautiful pages 😀
If you like the content, give it some sharing 🙂
Happy Coding 🙂
For more Salesforce Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Thank you, See you in the next one & Peace 😀
Stay update with our latest posts by subscribing to our newsletter. It is free!