Salesforce Lightning Design System

Salesforce Lightning Design System is a set of design guidelines, a CSS framework, and HTML markup prototypes of Lightning Components for building great experiences on the Salesforce platform. We design Lightning components by defining custom CSS classes or by applying predefined classes from the Salesforce Lightning Design System (SLDS).

Salesforce Lightning Design System(SLDS) guidelines represent an entirely new design language for Salesforce.com applications and include concrete best practices with reusable visual and interaction design patterns o produce an excellent and consistent user experience. Salesforce Lightning Design System is available at www.lightningdesignsystem.com.

SLDS was developed using Syntactically Awesome Stylesheets(Sass) preprocessor. SLDS includes User Interface Libraries that contain documents OOTB components and component examples rendered from real markup and CSS and accessible and semantic markup. For every Salesforce org, SLDS are automatically included and available to Lightning components that running in Salesforce mobile, Lightning experience, and Lightning Communities.

Loading Salesforce Lightning Design System (SLDS).

In this SLDS tutorial, we have to learn how to load the SLDS stylesheet from a Lightning application. To load, we must add extends = "force:slds" to our <aura:application> tag.

Example:-

<aura:applicaiton extends="force:slds">
   <h1> Welcome to crmsalesforcetraining.com</h1>
</aura:application>

We also need to extend force:slds in Lightning Out and Lightning Components for Visualforce pages. SLDS contains CSS style Classe that enables users to visualize HTML markup as a series of components. W use SLDS only for visualization and we should add additional Javascript to handle user interactivity to fully implement SLDS prototype components that have not already added to the <lightning> namespace.

How to apply SLDS Classes

Salesforce Lightning Design System CSS uses a standard class naming convention called “Block-Element-Modifier”(BEM).

  • Block represents high-level components. (Example:- slds-button)
  • Elements represent a descendent of a component.(Example:- slds-button_icon)
  • Modifier represents a different state of a block or element. (example: slds-button_neutral).

SLDS not only included a number of classes to replicate the look and feel of the native Lightning Experience components, but also to handle typography, positioning, user interactions and many more.

SLDS Block Tag Example

<aura:component>
    <div style="width:450px; height:450px;border:1px solid black; margin:5px;"
class="slds_align_absolute-center">
        centered content
    </div>
</aura:component>

SLDS Icons

SLDS has over 200 icons that we can use in our Salesforce Lightning applications. All these SLDS icons are grouped into five categories, they are

  • Action
  • Standard
  • Custom
  • Utility
  • Doctype

Check all the SLDS icons here : https://www.lightningdesignsystem.com/icons/

In Salesforce Lightning component, if we want to use SLDS Icons we must refer to categoryname:iconname. Let us learn how to add an icon with an example.

Here we are going to deploy the add_contact action icon within a lightning:card component, syntax would be the following as shown below

<lightning:card
	iconName="action:add_contact" title="Add Contact information">
    <div class="slds-p-horizontal_medium">
    </div>
</lightning:card>

Scroll to Top