A deep dive into the 4 primary elements of SLDS

The Salesforce Lightning Design System (SLDS) is an open-source CSS framework that helps Salesforce developers build impeccable lightning components. The SLDS helps you build lightning experience applications with the help of icons, color palettes, styling fonts, etc. It is built and maintained by the Salesforce UX itself. You can use SLDS with lightning experience, Visualforce, Heroku, and even off-platform! Before diving deep into SLDS, let’s first understand a design system.

What is a Design System?

A design system makes up your product. From grids and layouts to full-fledged components, a design system puts them all together. It is a collection of documentation, design standards, reusable code components, and toolkits that efficiently help developers build various experiences.

It is not just a component library or a style guide. Instead, both these terms are sub-components of a design system. It comes with a series of component libraries and style guides that can be used in several combinations to achieve numerous styling and design metrics. 

Why should you use a design system though? Because it saves your time and effort. It does feel like adding an additional layer to your tech stack, but it makes your work efficient. Using design systems can be a great decision if your component is scalable, needs consistent branding, and requires visually cohesive features.

Salesforce Lightning Design System

The SLDS is a framework that helps Salesforce developers build applications and components that are consistent with the lightning experience brand. That too without writing any CSS code. It has four character traits:

1. Open- source

2. Living

3. Accessible

4. Implementation-agnostic

The SLDS is an open-source CSS framework that is constantly upgrading. This makes it the world’s first living design pattern. Every new release of the Salesforce platform backs a set of new features for SLDS too. 

Although it is designed specifically to support Salesforce lightning development, it is also a platform-agnostic or implementation-agnostic design system. This means you can use SLDS with any choice of the tech stack, be it within or outside Salesforce.

SLDS can be used with lightning pages and components, visualforce pages, mobile applications, etc.

Primary Elements of SLDS

SLDS offers a design pattern that helps developers and designers build components that feel, look, and sound like the Salesforce lightning experience. To achieve this consistency and brand recognition of Salesforce experience, SLDS is built on top of four primary elements:

1. Design tokens

2. Utilities

3. Guidelines

4. Blueprints

1. Design Tokens

The heart pumps blood throughout the human body and keeps it alive. The same can be said for design tokens. Tokens are the heart of a design system as these are the values that construct and maintain it. These make up the data from color to object styles and typography to animations, basically everything.

Tokens give you the capability to define every design metric with some value. For example, representing a color with an RGB value, an animation as Bezier coordinates, transparency, opacity as a number, etc. This gives you the power to define every design aspect with flexibility.

Design tokens need not be inculcated manually as these are directly embedded into component libraries. In Salesforce, design tokens are represented in the following ways:

1. Aura components:  t(brandDark)

2. CSS preprocessor:  $brand-dark

3. Custom CSS properties:  –lwc-brandDark

To make development and designing easy, tokens enable the use of variables instead of hard-coded values. For example – 

Using variables instead of hex code: 

1. Define a color value in a variable

// Background Color

–lwc-colorBackground: rgb(243,242,242); 

2. Use it throughout the component

.my-firstWidget {

 background-color: var(–lwc-colorBackground);

}

.my-secondWidget {

  background-color: var(–lwc-colorBackground);

}

Say you had to set the same background color for several components, how’d you do it efficiently? Using design tokens!

2.  Utilities

The utilities are classes that modify a single CSS property or trait. These are mostly used to take charge of single-use combinations. You can embed the utility class directly to the HTML element to apply a single utility trait or even a combination of utilities.

Although utility combinations are not often required, they can be done at the cost of complexity. In case there are a set of utilities that are used a lot, you can turn them into a single component for further use.

Utilities in the SLDS consist of grids, layouts, borders, alignment, media objects, etc. One great example is the grid utility. It comes up with a set of utility classes that help you create flexible and device-agnostic layout designs. In Salesforce, the SLDS grid utility is the first go-to option for designing app layouts.

To compose a grid in your lightning component, you can put “slds-grid” to an HTML element and add any number of “slds-col” to add columns. 

Note: You can add up to 12 columns to your grid.

HTML Snippet:

<div class=”slds-grid slds-gutters”>

   <div class=”slds-col”>

<span>1</span>

   </div>

   <div class=”slds-col”>

<span>2</span>

   </div>

   <div class=”slds-col”>

<span>3</span>

   </div>

</div>

3. Design Guidelines

What you design and how you design matters the most, and this is where guidelines help you. The SLDS design guidelines focus upon the Salesforce consistent design. These guidelines are a list of best practices and instructions that you must follow while designing components to match the look and feel of the Salesforce platform.

The design guidelines reflect upon four core principles:

1. Clarity: Whatever you design must be clear to the end-user and they must be allowed to act in confidence.

2. Efficiency: Every designed component must work efficiently. It includes streamlining and optimizing the workflows for better and faster operation.

3. Consistency: The proposed design must be consistent throughout devices. Every screen size should host the same look and feel.

4. Beauty: The whole aspect of designing is based on beauty and user experience. A beautifully designed component tells people that their attention and time are worth the investment.

Let us understand design guidelines better with examples: 

• Page Loading: Page loading indicators are widgets that help users understand that the process is running and the system will display the data soon. Salesforce, across the platform, uses a Spinner in case of page loading. It is an animated SVG or GIF that is blue in color.
  In case of a Lightning Card or Modal pop-ups, place the spinner at the center of the container, horizontally and vertically. Remember not to place it over a text or visual.

• Toggles: There are certain guidelines for using a toggle too. For example, use a toggle only if its value, true or false, can be saved independently. That is, it does not affect other fields’ values. It is also advised to use toggles where its semantic aligns with the Salesforce on/off model.

4. Component Blueprints

We’ve already discussed how SLDS is a platform-agnostic or implementation-agnostic design system. Component blueprints are the elements that make this possible. 

Component Blueprints are a collection of accessible HTML, CSS, framework-agnostic guidelines, and attributes. These are used to design lightning components concerning the relevant guidelines. You can easily use these with whichever web technology. For example – you can use these blueprints to develop React or NodeJS components.

Similarly, you can use the Lightning Base Component implementation of blueprints for Salesforce. The base components form a big chunk of SLDS.

Lightning Base Components

These are the base UI components for the Salesforce lightning experience. The lightning base components are developed from the direct implementation of component blueprints. As these are base components, you might not get 100% coverage of your required functionalities.

However, these do cover all your basic component needs, and if you need more of that, you can always create LWCs (Lightning Web Components) to deliver out-of-the-box functionalities. 

For example, Blueprint for Alerts looks like this-
<div class=”slds-notify slds-notify_alert” role=”alert”>…</div>
Alert notifications need to have role = “alert”, This shows that inside this div is something that needs the user’s immediate attention.

Similarly, if you want to display badges, you have six options: Default, dark, light, success, error, and warning badge. Say you want the Success badge, include ‘.slds-badge .slds-theme_success’

Conclusion

SLDS as a design system is equipped with wholesome blueprints, guidelines, and pre-built attributes. This makes the process of developing and designing Salesforce lightning experience components super-easy and straightforward.

The platform-independent approach of SLDS makes it one of the most flexible and easy-to-use design systems ever. 

Need any help with Salesforce implementation, we can help.