Salesforce Lightning Design System

The Salesforce Lightning Design System or SLDS is a collection of resources for designers and developers created by Salesforce. It contains design guidelines to match the Lightning Experience look and feel and also markup and CSS we can grab and use on/off the platform.

Going into the detail, the major benefit of having a design guideline is being able to create a consistent user interface with the Salesforce Lightning Experience principles. In other words, your APP will be:

  • Easy to design and build. Thanks to the markup and other resources like the icons or fonts.
  • Beautiful and usable. It will match the LEX look and feel.
  • Cross-browser compatible.
  • Accessible for everyone.
  • Everywhere suitable. It is ready to be used in visualforce, LWC, Lightning applications or components, off-platform, Android, iOS… It is HTML and CSS, so even an external web will look like LEX.

Let’s say we need to create a data table component, and by any reason, you need to build it from scratch. Create a data table in HTML it is not complicated, all you need is be careful when nesting labels and then a bit of work with the CSS to make your component look&feel like LEX. But with SLDS is even easier. Go to the component you want to create and start having a look at the different options you have.

1.- Component preview.
2.- Different modifiers to change a bit the look of our component.
3.- Button to copy the code generated to the clipboard.

A really good thing is if you start playing with the radio buttons and checkboxes on the right column the code will be regenerated. And so, is a quick way to check what the different CSS classes do. Once you have decided how you want your component to look like, all you need is to press the copy to clipboard button and paste it wherever you need.

To finalize I would like to add some more points to this SLDS summary.

  • <svg />. You are going to find some markups with this label, what is not currently working. But all you need to do is change these line with <lightning:icon /> or <lightningicon />
  • SLDS is not magic. Remember, it is markup and CSS, and it is ready to be added with behaviour, so, do not expect an accordion component to expand and collapse just by pasting the generated code.
  • If you creating a Lightning APP you will need to add the following if you want to inherit the CSS classes from SLDS <aura:application extends=force:slds> ... </aura:application>
  • SLDS gets continuously updated, even more often than Salesforce releases.
  • To use it in visualforce, all you need is to add <apex:slds /> and wrap the code in a container <div class=slds-scope>...</div> . Have a look in trailhead.
  • SLDS can be used also in LWC, as it is only HTML and CSS!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.