What is Salesforce Lightning Design System (SLDS)?

A design system is a collection of design principles, style guides, and elements that enable developers to focus on how components and applications work, while designers can focus on how the application looks and feels.

The Salesforce Lightning Design System (SLDS) is a trusted, living, platform-agnostic design system that was built from the ground up to provide developers with everything needed to implement the look-and-feel of Lightning Experience and the Salesforce1 mobile application.

SLDS ensures consistency across all components and applications, whether they are written by Salesforce developers, ISV partners, or even Salesforce itself when designing and implementing product features.

Salesforce developed SLDS with four key design principles in mind:

  • Clarity
  • Efficiency
  • Consistency
  • Beauty

These principles are applied to colors, typography, layout, icons and more throughout the accompanying CSS framework.

Developers can implement the design system by including SLDS Cascading Style Sheets (CSS) and icon libraries in components and applications and applying the appropriate CSS classes to component markup.

SLDS also includes CSS style sheets for applying the design system to Visualforce components, Heroku and native iOS applications.

When SLDS was first introduced, adding the style sheets or icon libraries to a Salesforce org required installing an unmanaged package or uploading files as Static Resources and manually upgrading to new versions of the design system as they were released.

As of the Winter ’17 release of Salesforce, SLDS is included out-of-the-box with all Salesforce orgs and no longer requires an explicit reference to the Static Resources from Lightning Components or Applications. You simply reference the appropriate SLDS class names in your component markup and it will be applied automatically, or you can use BaseLightning Components, which apply SLDS implicitly without additional markup.

Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Comment

Your email address will never be published or shared and required fields are marked with an asterisk (*).

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