The Lightning Design system

A real-world application involves UI widgets such as lists, tables, cards, modal, and many more. For its Lightning Experience UI, Salesforce uses a common design pattern, which is an open source project known as the Lightning Design System. You can read more about the Lightning Design System, and the patterns and components provided from the official documentation located at https://www.Lightningdesignsystem.com.

Lightning Components can use the styles provided by the Lightning Design System. Let's modify our HelloWorld component to display HelloWorld in a card format, using the card components provided by the Salesforce Lightning Design System (SLDS).

Creating a simple card component using SLDS 

Let's open the Helloworld application we have built so far again and modify it to include the SLDS:

1. To open the existing Lightning Component, in Developer Console, use File | Open Lightning Resource, search for the HelloWorld component, and select Open Selected.
2. Copy the code that is in the SLDS card component from SLDS (https://www.Lightningdesignsystem.com/components/cards/).
3. Paste the markup as it is on the HelloWorld component file. You will get an error, as shown in the following screenshot:

Error when you try using SVG tags in component markup

4. The error is because of the SVG tag (we will see how to use SVG tags in later chapters). Let's remove the highlighted portion for now to allow the save operation. The complete code for the component is as follows:

<aura:component >
  <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="JavaScript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
            <span class="slds-text-heading_small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button_neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div>
  <footer class="slds-card__footer">Card Footer</footer>
</article>
</aura:component>

5. Also, to make sure SLDS is imported into the shell application for testing, we will need to extend the application to use the force:slds base component. Let's modify our HelloworldApp as follows:

<aura:application extends="force:slds">
    <c:HelloWorld />
</aura:application>

6. Let's preview the application and see the SLDS card in the browser. The following screenshot shows the results rendered on the browser:

If you drag these components into the Lightning App Builder, the SLDS will be automatically imported by Salesforce, but for the application created using <aura:application> use extends="force:slds".

The preceding is a simple demonstration of how to use the Salesforce SLDS in Lightning Component Framework. The Lightning Component framework is pretty powerful and provides many components and patterns. As a designer, you can build a complete application using the component set provided. Through this book, as we move ahead, we will use the SLDS extensively to build the UI for our components.