Build with Components

Learning Objectives

After completing this unit, you’ll be able to:

• Explain what the grid system does.
• Demonstrate intentionality in using components.
• Articulate the value of styling hooks.

Layouts and the Grid 

You’ve got an understanding of what SLDS is all about, and the four elements that comprise the system. Now it’s time to get building!

Let’s start with layouts. Layouts are the most fundamental part of any design composition, big or small. The SLDS grid system can help you achieve pretty much any layout you can think of. Understanding how to use the grid system is your first key to unlocking great user experiences.

Mobile First

The SLDS grid system is a CSS framework (based in CSS Flexbox) that offers a flexible, mobile-first, device agnostic layout system. That’s kind of a mouthful, so let’s boil it down: With the SLDS grid system, you can create awesome layouts on any device, and any platform, all with the mobile-first methodologies in mind.

What do we mean by mobile first? 

Mobile first is the concept of building your interfaces first with the smallest viewport in mind, and then scaling your design up at certain breakpoints to respond to larger screens.

For SLDS, this means adding sizing class prefixes for those breakpoints. SLDS utilizes small, medium, and large keywords to designate responsive breakpoints for mobile, tablet, and desktop.

As always, looking at some code will help make things clearer. Here’s the bare minimum code you need to use the SLDS grid.

<div class="slds-grid">
 <div class="slds-col">
  <p>Main Content Goes Here</p>
 </div>
</div>

The grid system is composed of at least two structural elements.

1. The grid container, which utilizes the `slds-grid` class (first line of code).
2. Its child element, slds-col (second line). A grid container can have multiple child columns. Adding multiple children, each with a slds-col modifier class, is how we unlock the power of the grid system.

Let’s make our grid a bit more life-like by adding a second column to the layout.

<div class="slds-grid">
 <div class="slds-col">
  <p>Main Content Goes Here</p>
 </div>
 <div class="slds-col">
  <p>Sidebar Content Goes Here</p>
 </div>
</div>

On a mobile device, the output would look something like this, with two columns of content side by side.

OK! That’s a baby step closer to something we might actually want to build. But it’s kind of cramped on a mobile device. This is where responsive design helps out. 

First, let’s add the class `slds-wrap` on the grid element where we want a row-based break in the content. We also need to set the default sizing for the columns by adding the class `slds-size_1-of-1`.

<div class="slds-grid slds-wrap">
 <div class="slds-col slds-size_1-of-1">
  <p>Main Content Goes Here</p>
 </div>
 <div class="slds-col slds-size_1-of-1">
  <p>Sidebar Content Goes Here</p>
 </div>
</div> 

<div class="slds-grid slds-wrap">
 <div class="slds-col slds-size_1-of-1 slds-large-size_3-of-4">
  <p>Main Content Goes Here</p>
 </div>
 <div class="slds-col slds-size_1-of-1 slds-large-size_1-of-4">
  <p>Sidebar Content Goes Here</p>
 </div>
</div> 

Here’s how it looks on desktop and mobile layouts.

And there’s so much more you can do with the SLDS grid system, including:

• Responsive column reordering (handy with complex layouts)
• Grid nesting
• Alternate layouts
  • Right to left
  • Top down/bottom up
• Alignment modifiers, and more

This TDX 2018 talk goes in-depth on grids—it’s well worth a watch or two… after you complete this module. ;-) 

Blueprints, Components, and LWCs

As you recall from Unit 1, blueprints are one of the four key elements that SLDS is based upon. Component blueprints are framework agnostic, accessible HTML and CSS used to create components. 

First things first, imprint this rule onto your brain: Be intentional about building new components. Follow this guide to decide when to build a new component.

1. Use an existing LWC component from the component library
2. If no base component can be customized appropriately, create a new component starting from a blueprint

Among the many reasons to use preexisting components is that we’ve baked accessibility into our components. Blueprints provide good recommendations for accessibility but also require additional development to make fully accessible. Accessibility is a critical part of any development work, so make sure to be smart and intentional about any and all customizations or composing you do. Trailhead Accessibility modules are a great place to learn more. We want your brilliant designs and productivity-boosting workflows to benefit as many people as possible!

Use Lightning Web Components

Lightning Web Components are the easiest way to bring your layouts to life with interactive UX components like buttons, form inputs, toggles, and more. Full documentation for Lightning Web Components is on the Salesforce Developer website. 

Let’s look at Lightning Web Components in action by adding a few elements to our layout. We’ll render a Tabset in the main area, and a Card in the sidebar. And we don’t even need to write any code to do it—we just copy and paste from the online documentation.

Here’s the Tabset component (`<lightning-tabset>`) pasted into our example code.

<div class="slds-grid slds-wrap">
 <div class="slds-col slds-size_1-of-1 slds-large-size_3-of-4">
  <lightning-tabset>
   <lightning-tab label="Item One">
    One Content !
   </lightning-tab>
   <lightning-tab label="Item Two" title="2nd tab extended title">
    Two Content !
   </lightning-tab>
   <lightning-tab label="Item Three">
    Three Content !
   </lightning-tab>
  </lightning-tabset>
 </div>

And the Card component (`<lightning-card>`):

<div class="slds-col slds-size_1-of-1 slds-large-size_1-of-4"> 
 <lightning-card title="Hello">
  <lightning-button label="New" slot="actions">
  </lightning-button>
  <p class="slds-p-horizontal_small">
   Card Body (custom component)
  </p>
  <p slot="footer">Card Footer</p>
 </lightning-card>
</div>

.my-css  {
  /**
   * No styling hooks
  */
}

The SLDS styled button (.slds-button) uses styling hooks to define the properties that can be modified. By adding this custom class to the base component, and defining the new values, the hooks give our styled buttons a custom purple background to express our brand.

.my-css {
--slds-c-button-brand-color-background: #BB00FF;
--slds-c-button-brand-color-background-hover: #8700B8;
--slds-c-button-brand-color-border: #BB00FF;
--slds-c-button-brand-color-border-hover: #8700B8;
}