Table of Contents

Introduction

Salesforce Lightning Design System is the world’s first living, open-source, enterprise, accessible, Platform-agnostic design system. It is termed with these words because it is an up-to-date design system with is open-source to everyone with all enterprise-level features along with all accessibility standards and also this can be used outside the salesforce.

Salesforce Lightning Design System

SLDS is not just a CSS framework but more than that. In salesforce, we use this framework to make it look great at its every page. And by using this framework everywhere all the pages in the salesforce look similar and beautiful which is why it introduced its own framework.

Platforms

SLDS works on platforms like lightning, visualforce, Heroku, Android, and iOS. As it is an open-source library we can even use it outside the salesforce, we can contribute to the framework, see the code, raise issues. The framework itself was made to be flexible everywhere and by following the guidelines on their documentation it can be more responsive too.

Development Guidelines

There are certain Guidelines for developing the salesforce components or salesforce pages that should be followed for making a component not look like a custom one. These guidelines main purpose is to make standard and custom components look like same, which gives you a rich experience.

What to bring:

Clarity
Efficiency
Consistency
Beauty

Designing Guidelines

These are the guidelines given by salesforce to be followed for various aspects like Data entry, displaying the data, layouts, tables and more. It has its guidelines almost on every action and component on salesforce. We can use these guidelines and make the elements responsive in most of the devices and conditions. As it is a live framework we discussed before the designs we create using these guidelines stay up to date and look vibrant.

Well, how these guidelines work is simply they use .slds namespace in their framework to differentiate from the conventional system.

For example, when you write a normal button format it will be like this,

<button type="button">This is a normal button</button>

Output:

Now let’s try this the LDS way and here it goes,

<button class="slds-button slds-button_brand">Salesforce Button</button>

Output:

So, here is the way to create the button. If you have seen the buttons in salesforce they appear the same. We have the classes created already for everything and we have to just use them.

Here in “slds-button slds-button_brand” the first word indicates that it is a button and the second word indicated the type of button. We have several types like Brand Link, Outline Brand Link, Destructive Link etc, these are fun to try. You can try these instantly on this website lwc-kra9xff8 by anonymous – WebComponents.dev