Salesforce Lightning Design System 21% - 13 Questions

Question 1

What aspect of systems design allows you to build for multiple uses, viewpoints, and structures?

Answer 1

Scalability

Question 2

The foundation of systems design

Answer 2

Recognizing that the relationships between elements are more important than the individual elements.

Question 3

Example of a macropattern?

Answer 3

Creating a record in Salesforce

It is repeatable, fits multiple record types, and represents a high-level interaction.

Question 4

Placeholders in the SLDS style

sheet

Answer 4

Styling hooks

Question 5

Six interaction states

Answer 5

Default
Focus
Hover
Disabled
Pressed
Active

Question 6

Part of an element that people recognize and associate with

the actions they can take

Answer 6

Affordances (Envelope for email, etc)

Question 7

Design tokens

Answer 7

Named entities that store visual design attributes

We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development

Question 8

The two types of dialogs in the Lightning Design System

Answer 8

Modal dialog

Non-modal dialog

Question 9

Component Blueprints

Answer 9

Framework agnostic, accessible HTML and CSS used to create components in conjunction with Salesforce implementation guidelines

Question 10

BEM Naming conventions

Answer 10

block, element, modifier

.block {}
.block__element {}
.block–modifier {}

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form .block as a whole.

.block–modifier represents a different state or version of .block.

.site-search {} /* Block /
.site-search__field {} / Element /
.site-search–full {} / Modifier */

In Summer ‘21 the “–” is being replaced by “_”
.block {}
.block__element {}
.block_modifier {}

Question 11

Salesforce Icon Types

Answer 11

Utility icons

Object icons
(Standard object icons & Custom object icons)

Action icons

Doctype icons

Product icons

Question 12

Utility icons

Answer 12

simple, single-color glyphs that identify labels and actions across form factors.

They can be paired with text or used alone, and can be any color.

They have no background shape.

Question 13

Standard Object icons

Answer 13

(e.g., Accounts, Leads, Opportunities, and Cases) come with Salesforce

Each object icon is made up of a white glyph on a squircle (square + circle = square with rounded corners). Object icons use a specific, limited color palette.

Question 14

Action icons

Answer 14

are touch-device specific icons that appear next to an item—for example, a page header or card—to let users take action in a specific context.

Each action icon is made up of a white glyph on a colored circle.

Action icons use a specific, limited color palette.

Question 15

Doctype icons

Answer 15

represent document file formats.

Each doctype icon is made up of a white glyph representing its file type, on a background resembling a piece of paper with a folded corner.

Question 16

Product icons

Answer 16

represent applications using product logos.

On the desktop, they’re used only in the app launcher and at the top left of each Salesforce application window.

On mobile-device home screens, they launch the corresponding mobile app.

Product icons are full color and use official product color palettes.

Question 17

Custom Object icons

Answer 17

are a unique set of icons used to create custom objects.

Each object icon is made up of a white glyph on a squircle (square + circle = square with rounded corners). Object icons use a specific, limited color palette.

Question 18

Informational Icons

Answer 18

Icon buttons and standalone avatars—convey important information that surrounding text doesn’t

Question 19

Decorative Icons

Answer 19

Icons and images add no relevant information or functionality

Question 20

Styling hooks naming convention

Answer 20

COMPONENT_ELEMENT_CATEGORY_PROPERTY_ATTRIBUTE_STATE.

button-sizing-width-small-hover
Component + Category + Property + Attribute + State

Question 21

Styling Hooks

Answer 21

Styling hooks use CSS custom properties which make it easy to customize component styling and express your brand.

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

Question 22

Styling Hooks

var(…)

Answer 22

This is a CSS function that enables you to use the stored value of a CSS custom property.

It accepts two arguments: a CSS custom property and an optional fallback value.

var(–sds-c-badge-color-background, #ECEBEA);

Question 23

Styling Hooks

–sds

Answer 23

Declaring a custom property requires that the name begins with double hyphens (–). sds is a namespace reserved for Salesforce’s design system.

Question 24

Styling Hooks

-c

Answer 24

This identifier indicates that the custom property is a component-level customization. It is specific to the component it resides in and does not affect unrelated components.