Salesforce Lightning Design System (SLDS)

Introduction

SLDS stands for Salesforce Lightning Design System which is a standard CSS library provided by salesforce which is used to make your lightning components UX friendly and responsive.

Reference : https://www.lightningdesignsystem.com/

SLDS provides access to the icons, color palettes, and font that the lightning experience developers use to create Lightning Experience, so that we can replicate the same UI in our custom components.

The BEM Naming Convention

SLDS follows the BEM (block element modifier) naming convention for ease of use and understandability. Let’s take a car for example, and see how we can use the BEM to represent a car component :

Block

A block refers to the main entity or thing, in our case which is a car. So BEM would refer to a car as ‘.car’ Then all the properties will be stored under this ‘.car’ class to represent the car entity.

Element

An element represents the part of the block and is separated by two underscores after the entity name. So if we want to represent the door of a car, we will do it like this : ‘.car__door’.

If we need to represent a sub-part of more details then we use a single dash instead of using another underscore, for example, if we wanna represent the mirror on a car door we will do it with ‘.car__door-mirror’ instead of using ‘.car__door__mirror’. Sometimes if we need to specify more specific properties, we also use double dashes like : ‘.car__door–rearview’.

Modifier

A modifier is used to represent the variation in the element which is separated by one underscore. So if our car door is red in color then we do something like : ‘.car__door_pink’.

If the car itself is red in color then it would be represented as ‘.car_red’.

So finally if we want to represent a green car with black mirrors we would apply it with this BEM naming : ‘.car_green car__door-window_black’. That is, multiple properties can be separated by a space.

Applying CSS to a Lightning App

By default if you use a lightning app to preview your lightning component, SLDS would not be applied to your component. If we need to add SLDS support to our lightning app we need to specify ‘extends=”force:slds”’ in the app definition.

After doing this, the standard CSS is applied to all the components being used in the lightning app. The ‘extends’ keyword is used to extend and inherit the standard SLDS library in the app.

NOTE: We don’t need to do anything in the actual lightning components when we use them in the lightning UI via the app builder because the lightning UI automatically applies SLDS to the components. We only need to do this in the lightning app when previewing the lightning components.

Using SLDS

While building lightning components, you need to reference the SLDS to make your component beautiful and look like the standard lightning UI. So let’s say we are building a form component, we can build it simply like this :

<aura:component>
    
    <lightning:input label="Name"/>
    
    <lightning:input label="Subject"/>
    
    <lightning:input label="Address"/>
    
</aura:component>

Which will output something like this :

But we can use SLDS and change the markup like this :

<aura:component>
    
    <div aria-labelledby="newexpenseform">
        
        <fieldset class="slds-box slds-theme--default slds-container--small">
            
            <form class="slds-form--stacked">
                
                <lightning:input label="Name"/>
                
                <lightning:input label="Subject"/>
                
                <lightning:input label="Address"/>
                
            </form>
            
        </fieldset>
        
    </div>
    
</aura:component>

Which will then output this :

This will make our markup more standard lightning UI like and it will add responsiveness to our page! Because all the SLDS classes are responsive and support mobile view as well automatically.