Getting Started With Lightning Design System for Visualforce

Getting Started With Lightning Design System for Visualforce

Raghavendhra Yarlagadda's photo
Raghavendhra Yarlagadda
·

5 min read

Table of contents

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 a 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. Using the new Design System markup results in pages that 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? Let's 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:

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)

New Method:

  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 shown 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 static 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, let's 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

  1. Page Header : The outer <div> has the class slds-page-header which 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-no-flex and 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-middle is 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.

  2. Input Form : Two wrappers. First, a <div> wrapper adds page structure. Inside this is a second wrapper element, a <fieldset> with classes: slds-box, slds-theme--default, and 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 <legend> element’s id attribute corresponds to the aria-labelledby attribute 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 <form> with the slds-form--stacked class. Each label and input pair are placed within a wrapper div with the slds-form-element to provide optimal spacing. Inside the wrapper, the <label> element has a slds-form-element__label class. The <input> field is placed inside another wrapper <div> with class slds-form-element__control , again to provide optimal spacing. The <input> field itself has the slds-input class.

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 :)

Salesforceslds