trailhead

Get Started with the Design System

Learning objectives

After completing this module you’ll be able to:

  • Style a basic Visualforce page with the Design System.
  • Describe the Design System’s class structure and the Block-Element-Modifier (BEM) syntax.

Create a First Page

Over the course of the rest of this module, we will be building Visualforce pages using the Design System. Let’s create a first Visualforce page and include the design system. We’ll then walk through the test page to explain the Design System class structure.

Create a Visualforce page by going to Setup and then doing a Quick Find for “pages”. Complete the form as follows:

  • Label: Trailhead_SLDS_Basic
  • Name: should auto default to Trailhead_SLDS_Basic
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
<body>

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Salesforce Lightning Design System Trailhead Module
    </p>
    <!-- / MASTHEAD -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">

      <!-- SECTION - BADGE COMPONENTS -->
      <section aria-labelledby="badges">
        <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
        <div>
          <span class="slds-badge">Badge</span>
          <span class="slds-badge slds-theme--inverse">Badge</span>
        </div>
      </section>
      <!-- / SECTION - BADGE COMPONENTS -->

    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->

</body>
</html>
</apex:page>

If you now preview your page, you should see the following:

Basic demo page

Looks like the new Lightning design without having to write any CSS yourself. Pretty nifty, huh?

Oh and don’t get too excited about these Badges counting towards your Trailhead portfolio. They are components from the Design System, not Trailhead badges! We’d love to help you create your own, but the Trailhead police would get upset.

Although the example is very straightforward, it introduces a lot of Design System concepts. We’ll review these before getting into more exciting layouts.

Like all Visualforce pages, the outer wrapper for your markup is the <apex:page> element.

On your html tag, be sure to include the xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" attributes. This is important to enable support for the SVG icon sprite maps within Visualforce. Note: Our example shows the header, sidebar and built-in stylesheets turned off. Currently, if you need to use the Salesforce header or sidebar, you can not specify the extra attributes on the <html> element. In this case, the SVG icons are not supported.

In our <head> section, we’re importing the design system using <apex:slds />, which will load the CSS in the document.

And now into the <body> tag, which contains our first Design System markup. We’ll step through it line by line. Since there’s quite a lot going on, we suggest having the page open in your favorite editor at the same time. Let’s get going.

Every time you use Design System markup in Visualforce, it should be placed inside an outer wrapper <div> with the slds-scope scoping class. Every time. Whether you have a Visualforce header and left nav, or not. Got it? It’ll be in the quiz later.

Next we have a simple mast head <p> tag, with two Design System classes applied to it. The first, slds-text-heading_label, applies Text Heading styling. The second class, slds-m-bottom_small is a spacing utility class to add some padding underneath the heading. What’s with these crazy class names you may ask? Is that double underscore a typo? Read on, all will be explained.

Inside the <section> element we have another heading, this time a <h2>, with the slds-m-vertical_large spacing utility class to add top and bottom padding.

You may be surprised by the need to explicitly add this vertical spacing. It is important to remember that the Design System is focused on the building of applications as opposed to the laying out web pages. Hence, default margins are removed from typography so that the app builder can specify exactly what they need.

Finally, we see our first true Design System component, a Badge component. Actually there are two of them, but who’s counting? Each is created by applying a slds-badge class to a span element. The second Badge has a slds-theme_inverse Theme utility class, to invert the color scheme. Note how multiple Design System classes can be applied to the same element to progressively customize it. In this case applying the Badge style, and then inverting the colors. You’ll see a lot more of that later in the module.

That's all there is to it! Lay out your markup and apply the corresponding Design System classes for the latest Lightning visual design. All without writing any CSS!

All the Design System classes are documented with examples on the Design System website.

Badge documentation

SLDS Class Naming

Before we move on, let’s talk about those underscores you were asking about in the Design System class names. Our CSS uses a standard class naming convention called Block-Element-Modifier syntax (BEM) to make the class names less ambiguous:

  • A block represents a high-level component (e.g. .car)
  • An element represents a descendant of a component (e.g. .car__door)
  • A modifier represents a particular state or variant of a block or element (e.g. .car__door_red)

Now the burning question, why all the underscores? First, they make it easier to see what the CSS rule is being applied to (by separating out block/element and modifier). Furthermore, using underscores means that the block or modifier itself can also contain hyphens or underscores, for example .slds-button__icon_x-small . Give it a go, we think you’ll find it as useful as we do once you get used to it.

Resources

retargeting