The SLDS is a robust, flexible, and comprehensive system for implementing the Lighting Experience style in your apps
SLDS can be used in Lightning Components, Visualforce and even in plain markup
Debugging
We covered only the most primitive debugging techniques. Learning to debug your Lightning Components apps, using several different sophisticated tools for doing so, is something that will pay dividends, in the form of hours of your life back, and hair not pulled out.
In particular, we recommend learning Chrome’s rich DevTools suite, and the Salesforce Lightning Inspector that works within it. Apex developers will also want to learn about the debugging tools available for Apex, many of them directly in the Developer Console.
- Google Chrome DevTools
- Salesforce Lightning Inspector Chrome Extension
- Lightning Components Debugging
What is the name of the open-source framework that Lightning Components is based on?
- The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It’s a modern framework for building single-page applications engineered for growth.
- The framework supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Apex on the server side.
Using the new Design System(SLDS) markup results in pages which have the Lightning look and feel without writing any CSS
The Design System bundles four types of resources to help you build applications.
CSS framework — Defines the UI components, such as page headers, labels, and form elements, a grid layout system, and a single-purpose helper classes, to assist with spacing, sizing, and other visual adjustments.
Icons — Includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.
Font — Typography is at the core of our product. We’ve designed the new Salesforce Sans font from the ground up to give our product a distinct visual voice and personality, and we’re making it available to you as part of the Design System.
Design Tokens — These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.
Where You Can Use the Design System
The new Design System makes it straightforward to build Lightning-compliant Salesforce apps across a range of technology stacks.
- Visualforce pages accessing Salesforce data via remote objects or JavaScript remoting. The Design System is not yet compatible with <apex> tags, but watch this space.
- Lightning pages and components made available to Salesforce1 and Lightning Experience
- Mobile apps accessing Salesforce through the Mobile SDK or another API
- Standalone web apps served by Heroku or a similar platform
For example, the Visualforce version of the CSS is located at assets/styles/salesforce-design-system-vf.min.css inside the static resource. To access it in Visualforce you would therefore use the following syntax:
<code><apex:stylesheet value="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
</code>
First SLDS Example
<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" />
<apex:stylesheet value="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="REPLACE_WITH_NAME_OF_CUSTOM_SCOPING_CLASS">
<!-- 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>
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.
<code><!-- REQUIRED SLDS WRAPPER -->
<div class="REPLACE_WITH_NAME_OF_CUSTOM_SCOPING_CLASS">
...
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</code>
Every time you use Design System markup in Visualforce, it should be placed inside an outer wrapper <div> with the scoping class you created using the CSS Customizer tool above. Every time. Whether you have a Visualforce header and left nav, or not. Got it? It’ll be in the quiz later.SLDS Class Naming
Before we move on, let’s talk about those double hyphens 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 descendent 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 the double hyphens and 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 double rather than single hyphens and underscores means that the block or modifier can itself 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.
What is a Grid System?
The Design System grid is based on CSS Flexbox and provides a flexible, mobile-first, device-agnostic scaffolding system. The Design System also includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding.
How to use the Grid System
The grid system is based on two key building blocks: the grid wrapper (specified with the slds-grid class) and the columns within it (specified with the slds-col or the slds-col--padded classes). Here's an example:
To start, add the slds-grid class to an outer wrapper element. Then inside it add the required number of columns by adding the slds-col class to the child elements. We’ll use <div> elements in this case. For example, here is a simple grid with three columns:
<div class="slds-grid">
<div class="slds-col">Column 1</div>
<div class="slds-col">Column 2</div>
<div class="slds-col">Column 3</div>
</div>
By default, the columns are sized relative to their contents. In this simple example, we should therefore see three identically spaced columns because they hold equal an amount of content. If more content was added to one of the columns, it would grow relative to the others.
You can also specify the sizes of the columns manually using the sizing helper classes. These use a slds-size--X-of-Y format where X represents a fraction of the total space Y. For example, slds-size--1-of-2 represents a width that is 50% of the available space. Using the manual sizing class helpers, you can specify column ratios across the following grids – 2, 3, 4, 5, 6, and 12.
<!-- BASIC GRID EXAMPLE -->
<div class="slds-grid">
<div class="slds-col slds-size--4-of-6">Column 1</div>
<div class="slds-col slds-size--1-of-6">Column 2</div>
<div class="slds-col slds-size--1-of-6">Column 3</div>
</div>
Design System is Primarily for building applications
Adding Data to the Mix
Let’s face it, web applications aren’t that exciting unless they contain some data. This unit is all about making our list view real and populating with some sample data from your developer org.
We’ll be using JavaScript Remote Objects to access Salesforce data but you could just as well use JavaScript Remoting. Note that Apex tags are not yet supported by the Design System, however the Trailhead unit on Visualforce visual design considerations explains options for styling legacy code to look like the new Lightning UI.
The JavaScript in this unit is outside the bounds of the Design System but it will help bring some of our key components to life and show how they are used. Plus it’ll make things that much more fun.
Populating a Data Table with Dynamic Data
As we noted above, in this release the Design System doesn’t support built-in Visualforce components — the <apex:*>, <chatter:*> and other components you know and love — for laying out pages and accessing data. That’s important to note. Don’t expect to apply the Design System to your legacy Visualforce pages and have them instantly transform into the most beautiful UI on the Internet.
For now, use Remote Objects, JavaScript Remoting or the REST API to access Salesforce data from your Visualforce pages based on Design System markup.
Creating Avatar
An Avatar is created by wrapping your <img /> element in a <span> element with the class slds-avatar. Additional sizing helper classes can be applied, for example slds-avatar--large
An avatar can be circular or a rounde rectangle, depending on usage. The default is a rounded rectangle and requires .slds-avatar as the base class. Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the .slds-avatar--circle class. Four additional classes are available for sizing.
<span class="slds-avatar slds-avatar--x-small">
<img src="/assets/images/avatar1.jpg" alt="meaningful text" />
</span>
Media Objects
A common pattern for including images in web apps is to include an image and text side by side. The Design System has a component to make this super easy, the Media Object.
The base class of the Media Object component is slds-media. It can be applied to any container element, here we use a <div>. Inside the container, we provide a figure (the image) and a body (the content).
The figure, i.e. our avatar, is contained inside a <span> with the class slds-media__figure.The avatar image is specified with a standard <img /> element. You could also include an icon here (see below).
The body is a <div> with class slds-media__body. This wraps the header text we used earlier.
The icons are supplied both as individual PNGs and SVGs, as well packaged up inside SVG sprite maps. Each of the above icon categories has its own sprite map under /assets/icons. Sprite maps are our recommended technique for including icons in pages. The advantages of SVG sprite maps over traditional icon fonts include more fine-grained CSS control and easier positioning in components, as well as better resizability of vector-based SVGs. This final advantage is a boon for responsive design. Vector-based images make clean art at any size.
PLEASE NOTE: Current versions of Google Chrome, Safari and Firefox already support SVG sprite maps. To use SVG spritemap image icons with Microsoft Internet Explorer 11 you will need to download a small script called svg4everybody. After you download svg4everybody, add the svg4everybody.js script as a static resource, include it in your pages, and call it in a <script> tag. Please refer to the full instructions on the svg4everybody website for more details. The advantages of using this icon technique (as outlined in the previous paragraph) more than make up for this extra step.
SVG sprite maps are also why we had you add the xmlns and xmlns:xlink attributes to your <html> element. The reason for this is to configure the SVG and xlink namespaces within Visualforce. Again, a tiny bit of work for a big payoff.
