A Quick Tour of the Lightning Design System

On March 2nd, version 1.0.0 of the Lightning Design System was released. Seemed to us like a great time to take a quick tour of the system and a few of the core features available.

Let’s start with a brief introduction.

Introducing the Lightning Design System

The Lightning Design System is a CSS framework that gives you all of the power of the Salesforce user interface without having to do any re-engineering. The design system consists of the following pieces:

  • Design Guidelines: The design principles that Salesforce adheres to when building their products. There are a variety of topics covered such as aesthetic guidelines (color palette, typography), suggested layouts, and recommendations for dealing with complex input.
  • Resources: The assets (fonts, icons, images and styles) that make up the Salesforce user interface, specifically Lightning Experience.
  • Web Components: Dozens of HTML components that are built with design system resources. Many of them are ready to use and can be pasted directly into your application code.
  • Native Components: An iOS library that brings the design system assets to your native iOS applications.

Best of all, the Lighting Design System is open source! Repositories are available on GitHub. You can even contribute by creating an issue, forking a repository and submitting a pull request.

Now let’s take a peek under the hood and check out some of the design system components…

The following examples assume the Lightning Design System resources have been downloaded and extracted to your application directory.


Fonts

The Salesforce Sans fonts (TrueType and web fonts) are packaged with the design system and are ready to use in your application. Here is a snippet of CSS that imports a few of the web fonts as a user-defined font family called SalesforceSans:

<style type="text/css">
    @font-face {
        font-family: "SalesforceSans";
        src: url("/assets/fonts/webfonts/SalesforceSans-Regular.woff2");
    }
    @font-face {
        font-family: "SalesforceSans";
        src: url("/assets/fonts/webfonts/SalesforceSans-Bold.woff2");
        font-weight: bold;
    }
    @font-face {
        font-family: "SalesforceSans";
        src: url("/assets/fonts/webfonts/SalesforceSans-Italic.woff2");
        font-style: italic;
    }
</style>

And here’s what these fonts look like in action:

The SalesforceSans-Regular font.
The SalesforceSans-Bold font.
The SalesforceSans-Italic font.


Icons

The design system is packaged with many of the icons that you see in the Salesforce user interface. They are available as individual PNG files at 33x33 and 65x65 resolutions, individual SVGs, or via a single SVG sprite map that contains all of the icons in a single file. It is a best practice to use the sprite map and reference the exact icon inside of an HTML SVG element.

Icons are categorized by type. There are five icon groups:

  1. Actions – Things a user can do, like download a file, follow a record, edit a record, etc.
  2. Document Types – These are visual representations of common file types such as Word, Excel and PDF.
  3. Standard icons – The icons that are used to represent standard Salesforce objects, like Account and Case.
  4. Custom icons – Icons for user created objects.
  5. Utility – Miscellaneous icons that share a common color scheme. There is some overlap here between the action icons and utility icons.
A few action icons:
The standard account icon in various sizes:
A download button using a utility icon:  


Using the svg tag, you can link to an icon in the sprite map by supplying the corresponding style and icon name. You can also use size modifiers to upscale or downscale the icon image. An example:

<div class="slds">
    <svg aria-hidden="true" class="slds-icon slds-icon-action-new-contact slds-icon--large">
        <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_contact"></use>
    </svg>
</div>

There are dozens of icons available for use, check the documentation for the full list.

Grids

A key feature of the Lightning Design System is a mobile-first grid for designing layouts that look good on any device. Design system grids follow the principles established in Flexible Layouts and can take care of the work that would have formerly required another mobile-first framework such as Twitter Bootstrap.

Columns

Let’s start with a simple example of a two-column grid:

<div class="slds">
    <div class="slds-grid">
        <div class="slds-col">A grid column</div>
        <div class="slds-col--padded">A grid column with some padding</div>
    </div>
</div>

This snippet illustrates the two basic components of any grid: a container div (slds-grid) and the columns (slds-col). Now let’s spice it up a bit by using sizing helpers and breakpoints to make it responsive.

Sizing Helpers

Sizing helper classes tell the browser how much of the available container space should be occupied by a given column. This is done using an “X-of-Y” syntax, which reads as “takes up X amount of a total available space of Y”. For example, if the first column in a two-column grid has a size “1-of-3”, the column will occupy 33% (1 divided by 3) of the available space in the container (typically the grid div).

Breakpoints

Breakpoints can be added to sizing helpers to specify behavior for small, medium and large sized displays. A default helper with no breakpoint is required, and should be the first one specified in the class attribute. Additional breakpoints should be added to the class attribute in order of size ranging from smallest to largest. Breakpoints are optional and you do not need to override every breakpoint. For example, if you choose to override medium, you do not need to override small; you do, however, need to provide a default breakpoint.

Here is the code for a two-column grid that stacks until the container reaches the medium breakpoint size, at which point the columns appear side-by-side:

<div class="slds">
    <!--
      The slds-grid class is applied to the container div.
      The slds-wrap class allows us to specify size adjustments on child columns for responsive behavior.
    -->
    <div class="slds-grid slds-wrap">
        <!--
          Each column in the grid is padded using slds-col--padded.
          Should the display size exceed medium (768px), each column will occupy 50% (1-of-2) of the available container space.
        -->
        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="firstName">First Name</label>
              <div class="slds-form-element__control">
                <input id="firstName" class="slds-input" type="text" placeholder="First name goes here..." />
              </div>
            </div>
        </div>
        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="lastName">Last Name</label>
                <div class="slds-form-element__control">
                    <input id="lastName" class="slds-input" type="text" placeholder="Last name goes here..." />
                </div>
            </div>
        </div>
    </div>
</div>

Here’s what it looks like in action. Go ahead and resize the window, you should see the stacking behavior (assuming you have at least a medium-sized display):


Conclusion

We’ve only scratched the surface of what’s available in the Lightning Design System. Aside from the documentation, Trailhead is an excellent resource for getting up to speed in a variety of contexts, including Lightning Components and Visualforce. With so much available for developers to take advantage of, it’s never been easier to build beautiful applications.