Lightning Web Components – Lightning Design System Questions

The Lightning Design System (LDS) provides a comprehensive set of guidelines and components for creating consistent, accessible, and responsive user interfaces in Salesforce. These questions cover LDS fundamentals, responsive layouts, utility classes, accessibility features, customization techniques, and best practices for creating professional-looking LWC applications. Understanding LDS is essential for building user interfaces that align with Salesforce's design principles.

Lightning Design System (LDS) - Q&A

Q1. What is the Lightning Design System (LDS)?
Ans: Salesforce's design framework that provides: - CSS framework for consistent UI - Pre-built components matching Salesforce aesthetics - Responsive grid system - Accessibility (a11y) compliant markup - Design tokens for theming
Q2. How do you include LDS in LWC components?
Ans: Two methods: 1. Automatic inclusion (default for LWC):
2. Manual import (for standalone use):
```
/* CSS */
@import 'salesforce-ux/design-system/scss/index.scss';
```

Q3. What are design tokens and how are they used?
Ans: Named variables for styling:

/* In CSS */
.title {
  color: var(--lwc-brandPrimary);
  font-size: var(--lwc-fontSizeLarge);
}

/* In JS */
import { LightningElement } from 'lwc';
import { token } from 'lightning-design-system';

export default class MyComponent extends LightningElement {
  get customStyle() {
    return `background-color: ${token('brandPrimary')}`;
  }
}

Q4. How do you implement responsive layouts?
Ans: Using LDS grid system:


  
    Mobile: 100%, Desktop: 50%
  
  
    Mobile: 100%, Desktop: 50%

Q5. What are utility classes and provide examples?
Ans: Helper classes for common styling:

Q6. How do you create a modal/popup using LDS?
Ans: Modal pattern:


  
    
      Title
    
    Content

Q7. How do you style LWC components with LDS?
Ans: Best practices: - Use SLDS classes directly in templates - Scope custom styles to components - Leverage design tokens Example:
```
...

/* myComponent.css */
.custom-card {
  border-left: 4px solid var(--lwc-brandPrimary);
}
```
Q8. What are the accessibility features in LDS?
Ans: Built-in a11y includes: - ARIA attributes - Keyboard navigation - Color contrast ratios - Screen reader support - Focus management Example accessible button:
Q9. How do you implement icons in LWC using LDS?
Ans: Icon usage patterns:
```
  
```
Q10. How do you customize LDS styles?
Ans: Safe customization approaches: 1. CSS Overrides (with stronger specificity)
```
.slds-card {
  border-radius: 0;
}
```
2. Design Tokens (recommended)
```
:host {
  --slds-c-card-radius-border: 0;
}
```
3. Utility Classes (no CSS needed)

Q11. How do you create a data table with LDS?
Ans: Table markup:


  
    
      Name
    
  
  
    
      Acme Corp

Q12. What are the LDS form styling best practices?
Ans: Form patterns:
```
  Name
  
    
  




  Error message
```
Q13. How do you implement navigation with LDS?
Ans: Navigation components:
```
  
    Parent
  




  
    Tab 1
  
```
Q14. How do you test LDS compliance in components?
Ans: Testing strategies: 1. Visual Regression Testing: - Compare screenshots against LDS references 2. DOM Inspection: ```javascript const element = shadowRoot.querySelector('.slds-button'); expect(element).toHaveClass('slds-button_brand'); ``` 3. Accessibility Audits: - Use tools like axe-core - Verify ARIA attributes

Name
Acme Corp

Q15. How do you implement dark mode with LDS?
Ans: Theming approach:

/* Using design tokens */
:host {
  background-color: var(--lwc-colorBackgroundAlt);
  color: var(--lwc-colorTextDefault);
}

/* Theme toggle */
toggleTheme() {
  const htmlElement = document.documentElement;
  htmlElement.setAttribute('data-theme', 
    htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
  );
}

Q16. What are the LDS spacing utilities?
Ans: Consistent spacing scale:
```
 /* 0.25rem */
    /* 1rem */


 /* 1.5rem */
```
Q17. How do you implement mobile-first designs?
Ans: Responsive patterns:
```
  
    Mobile: 100%, Tablet+: 33%
  
```

Back to LWC Home