Lightning Design System (SLDS)

Lightning Design System (SLDS) – Comprehensive Guide for Salesforce Platform Developer 1

Introduction to Lightning Design System (SLDS)

The Salesforce Lightning Design System (SLDS) is a CSS framework and set of design guidelines created by Salesforce to provide a consistent, modern, and accessible user interface across all Salesforce applications. For the Platform Developer 1 exam, understanding SLDS is essential because it falls under the User Interface domain and is a key component of building Lightning-ready applications.

Why is SLDS Important?

1. Consistent Look and Feel: SLDS ensures that custom components and applications match the native Salesforce Lightning Experience design. This creates a seamless user experience where custom-built UI elements are indistinguishable from standard Salesforce components.

2. No Custom CSS Required (in most cases): SLDS provides ready-to-use CSS classes that handle layout, typography, spacing, colors, icons, and responsive design. Developers do not need to write custom CSS from scratch, significantly reducing development time.

3. Accessibility (WCAG Compliance): SLDS is built with accessibility in mind and follows Web Content Accessibility Guidelines (WCAG). Using SLDS ensures that your applications are accessible to users with disabilities.

4. Cross-Browser Compatibility: SLDS is tested across multiple browsers and devices, ensuring a consistent experience regardless of the user's platform.

5. Responsive Design: SLDS includes a grid system and utility classes that make it easy to build responsive layouts that work on desktop, tablet, and mobile devices.

What Exactly is SLDS?

SLDS is essentially a CSS framework (similar in concept to Bootstrap) specifically designed for the Salesforce ecosystem. It includes:

- CSS Classes: Pre-built utility classes and component-specific classes (e.g., slds-button, slds-card, slds-grid).
- Design Tokens: Named entities that store visual design attributes such as colors, font sizes, spacing values, and more. These tokens ensure consistency and allow for easy theming.
- Component Blueprints: HTML and CSS patterns for common UI components like modals, data tables, cards, tabs, buttons, forms, and more.
- Icons: A comprehensive icon library (utility, standard, custom, action, and doctype icons) that can be used throughout your applications.
- Grid System: A 12-column responsive grid system for building flexible layouts.

How Does SLDS Work?

In Lightning Web Components (LWC):
SLDS is automatically available in Lightning Web Components. You do not need to import or load SLDS manually. You simply use SLDS CSS classes directly in your HTML templates. For example:

<template>
  <div class="slds-card">
    <div class="slds-card__header">
      <h2 class="slds-text-heading_medium">My Card</h2>
    </div>
    <div class="slds-card__body slds-card__body_inner">
      Card content here
    </div>
  </div>
</template>

In Aura Components:
SLDS is also automatically available in Aura components when they extend force:slds or when the application extends force:slds. You can add <aura:application extends="force:slds"> to your application to enable SLDS styling.

In Visualforce Pages:
SLDS is NOT automatically available in Visualforce. To use SLDS in Visualforce, you must include it using the <apex:slds /> tag. Additionally, you should wrap your content in a div with the class slds-scope to scope the SLDS styles and prevent conflicts with existing Visualforce styling. Example:

<apex:page>
  <apex:slds />
  <div class="slds-scope">
    <button class="slds-button slds-button_brand">Click Me</button>
  </div>
</apex:page>

Key SLDS Concepts to Know

1. BEM Naming Convention: SLDS follows the Block-Element-Modifier (BEM) naming convention. Classes follow a pattern like slds-block__element_modifier. For example: slds-button__icon_left. Understanding this helps you read and predict class names.

2. Design Tokens: Design tokens are the visual design atoms of the design system. They are named entities that store specific values like $color-brand-primary or $spacing-medium. In LWC, you can access design tokens through custom CSS properties or by importing them.

3. Utility Classes: SLDS provides utility classes for common needs like margins (slds-m-top_medium), padding (slds-p-around_small), text alignment (slds-text-align_center), truncation (slds-truncate), and visibility (slds-hide, slds-show).

4. The Grid System: The SLDS grid uses slds-grid as the container and slds-col for columns. You can use sizing classes like slds-size_1-of-2 (50% width) or slds-size_1-of-3 (33% width) for responsive layouts.

5. Icons: SLDS icons are SVG-based. In LWC, you use the <lightning-icon> base component to display SLDS icons. In Aura, you use <lightning:icon>. Icon categories include: standard, utility, action, custom, and doctype.

SLDS vs. Custom CSS

A common exam topic is understanding when to use SLDS versus custom CSS:
- Use SLDS whenever possible for consistency and maintainability.
- Use custom CSS only when SLDS does not provide the specific styling you need.
- In LWC, custom CSS is scoped to the component by default (Shadow DOM), meaning styles do not leak in or out.
- You should never override SLDS classes directly. Instead, create your own custom classes.

SLDS in Different Contexts

- Lightning Experience: SLDS is the default styling framework.
- Salesforce Mobile App: SLDS works in the mobile context and provides responsive classes.
- Lightning Out / Standalone Apps: You need to explicitly include SLDS using the static resource or CDN.
- Communities (Experience Cloud): SLDS can be used but may require scoping to avoid conflicts with community themes.

Common SLDS Components You Should Know

- slds-card – Card component for grouping related content
- slds-button and variants (slds-button_brand, slds-button_neutral, slds-button_destructive)
- slds-modal – Modal/dialog pattern
- slds-table – Data table styling
- slds-form – Form layout classes
- slds-grid and slds-col – Grid layout
- slds-page-header – Page header pattern
- slds-spinner – Loading spinner

SLDS and Base Lightning Components

It is important to understand that base Lightning components (like <lightning-button>, <lightning-card>, <lightning-datatable>) already have SLDS styling built in. You do not need to apply SLDS classes to base components. SLDS classes are primarily used when you are building custom HTML markup and want it to look like native Salesforce UI.

---

Exam Tips: Answering Questions on Lightning Design System (SLDS)

1. Remember the Availability Rules: SLDS is automatically available in LWC and Aura (with force:slds). For Visualforce, you must use <apex:slds /> and wrap content in slds-scope. This is a very commonly tested concept.

2. Know That SLDS is CSS-Only: SLDS is a CSS framework, not a JavaScript framework. It provides styling but no behavior. If an exam question mentions adding interactive behavior, SLDS alone is not the answer — you need JavaScript (LWC or Aura controllers).

3. Understand Scoping: In Visualforce, the slds-scope class is used to prevent SLDS styles from conflicting with classic Visualforce styles. This is a frequently tested detail.

4. Base Components vs. SLDS Classes: If a question asks about the best way to create a standard-looking button in LWC, the answer is typically to use the <lightning-button> base component, NOT to create a raw HTML button with SLDS classes. Base components are preferred when available.

5. Design Tokens for Theming: If a question asks about maintaining consistent colors, spacing, or font sizes across components, design tokens are the answer.

6. Do Not Modify SLDS Source: Exam questions may present scenarios where a developer wants to customize SLDS. The correct approach is to create custom CSS classes, never modify the SLDS source files directly.

7. Grid System Questions: If a question asks about creating a responsive layout, look for answers involving slds-grid and slds-col with sizing utilities.

8. Eliminate Wrong Answers: If an answer suggests importing a third-party CSS framework (like Bootstrap) to style Lightning components, this is almost certainly wrong. SLDS is the recommended and supported approach.

9. Static Resources: In some contexts (like Lightning Out or standalone apps), SLDS may need to be uploaded as a static resource. Know that Salesforce provides SLDS as a downloadable package for this purpose.

10. Focus on Practical Scenarios: Exam questions often present a scenario where a developer needs to make a custom component look like the rest of Lightning Experience. The answer will involve using SLDS classes or base Lightning components. Always choose the approach that provides the most consistency with the least custom code.

Summary: SLDS is the cornerstone of Salesforce UI development. For the Platform Developer 1 exam, focus on how SLDS is included in different contexts (LWC, Aura, Visualforce), when to use SLDS classes versus base components, and the role of design tokens and the grid system. Understanding these concepts will prepare you to confidently answer any SLDS-related exam question.