Using the Salesforce Lightning Design System

It’s easy to forget that there was a time before Bootstrap - a time when web developers had to painstakingly set up their own grids and rules for styling. When Bootstrap came along, it made developers so much more productive. In just a few seconds you could spin up a decent looking user interface and then get back to writing valuable application logic.

Today, Salesforce developers are lucky because there is an even more tailored version of Bootstrap for Salesforce that allows Salesforce devs build user interfaces and experiences which are consistent with the Salesforce design aesthetic. It’s called the Salesforce Lightning Design System. It was built by Salesforce UX. More importantly, it continues to be maintained by Salesforce UX. This means that whenever the Salesforce platform goes through UI updates or changes, you can rest assured that your app will automatically continue to remain aesthetically compatible.

The Lightning Design System is hosted on GitHub and is open source so you can contribute back to it. It can be used with Lightning, Salesforce1, Visualforce, and Heroku. We even use it for our main user interface for Blue Canvas.

Aesthetics

There are four main design principles behind the Lightning Design System: clarity, beauty, efficiency and consistency. Just like Bootstrap, the Lightning Design System provides cross-browser compatible CSS, icons, font and design guidelines, and semantic and accessible component markup. It even has it’s own typography known as Salesforce Sans.

The design system also offers a list of background colors and text colors and font sizes to use.

Components

Also like Bootstrap, the Lightning Design System provides components and CSS that you can quickly use to build visually appealing apps. The system is about more than just CSS though. It includes the javascript that allows you to build some more complex functionality into your user experience. Some of our favorites include:

Activity Timeline

Ever wanted to make a dashboard or steam of events in a way that looked the way that the Salesforce dashboard does? You can do that with the Activity Timeline component. You can then include various next action items for a user like a Call, Email, Event or Task.

Modals

Salesforce provides pre-built modals that you can use to provide important information to your users.

Datepicker

How many times have you fiddled with clunky date-pickers only to wish there was an easier way to make it look and perform better? The Salesforce Lightning Design system has you covered.

Walkthrough

The Lightning Design system is about more than color schemes and typefaces. It is about freeing you to create great applications with great users experiences. The Walkthrough component is a great example of this as it allows you to build a better onboarding, product announcement and training experience for new users.

Rich Text Editor

The Rich Text Editor allows you to provide users with powerful textareacomponents without having to roll a lot of your own javascript. There are quite a few more components available as well.

Design Tokens

One of the toughest things for any designer is ensuring that your app design stays consistent and scalable. The more you build, the more complex your design becomes. And if you’ve just hardcoded values throughout your CSS making updates and changes is going to painful. Plus, if Salesforce makes changes to their UI, you will have to manually ensure that everything gets update.

Design tokens are the answer to this problem. They are “named entities that store visual design attributes.” You can use them instead of hard-coded pixel values or hex values.

And it’s not just background color, but also line-height, spacing, opacity, font, font-size, z-index and more.

How to Use the Lightning Design System

There are a number of ways to install the Lightning Design system including npm, Bower, and good old fashion CSS files. As we can see in this Trailhead tutorial, the fastest way to start playing with the Lightning Design System is to create a new VisualForce page and add the following code:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />


<apex:slds />
</head>
<body>


<div class="slds-scope ">


<p class="slds-text-heading--label slds-m-bottom--small">
Salesforce Lightning Design System Trailhead Module
</p>



<div class="myapp">


<section aria-labelledby="badges">
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>


</div>


</div>


</body>
</html>
</apex:page>

Now let’s say we want to add another component (note we’re just going to show styling here - not the whole backend). Let’s add a table. Add this code somewhere to the page:

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Confidence">Confidence</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Amount">Amount</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Contact">Contact</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
</td>
</tr>
</tbody>
</table>

Now click Quick Save and Preview. You should now see the Lightning Design System styled table. Note, if you go to your Blue Canvas dashboard, you will see how Blue Canvas automatically picks this change up and commits it into Git history. So now you have have a full Salesforce Metadata backup and audit trail for what specifically has changed about this code over time. This is useful if you ever need to rollback or do a compliance audit.

The Lightning Design System is a great way to scale out your design so that it’s easier to maintain, while also ensuring that you are always complying with best practices and Salesforce design aesthetics. It allows you to save a lot of time and headache. We use the Lightning Design System at Blue Canvas and recommend it to all developers working on Salesforce applications. We also recommend that you get your Lightning Design System code under source control so that you can keep track of how your design is changing over time and rollback to previous states as needed.

‍

Table of Contents