Salesforce Lightning Design System 21% - 13 Questions Flashcards
What aspect of systems design allows you to build for multiple uses, viewpoints, and structures?
Scalability
The foundation of systems design
Recognizing that the relationships between elements are more important than the individual elements.
Example of a macropattern?
Creating a record in Salesforce
It is repeatable, fits multiple record types, and represents a high-level interaction.
Placeholders in the SLDS style
sheet
Styling hooks
Six interaction states
Default Focus Hover Disabled Pressed Active
Part of an element that people recognize and associate with
the actions they can take
Affordances (Envelope for email, etc)
Design tokens
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
The two types of dialogs in the Lightning Design System
Modal dialog
Non-modal dialog
Component Blueprints
Framework agnostic, accessible HTML and CSS used to create components in conjunction with Salesforce implementation guidelines
BEM Naming conventions
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 {}
Salesforce Icon Types
Utility icons
Object icons
(Standard object icons & Custom object icons)
Action icons
Doctype icons
Product icons
Utility icons
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.
Standard Object icons
(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.
Action icons
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.
Doctype icons
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.
Product icons
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.
Custom Object icons
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.
Informational Icons
Icon buttons and standalone avatars—convey important information that surrounding text doesn’t
Decorative Icons
Icons and images add no relevant information or functionality
Styling hooks naming convention
COMPONENT_ELEMENT_CATEGORY_PROPERTY_ATTRIBUTE_STATE.
button-sizing-width-small-hover
Component + Category + Property + Attribute + State
Styling Hooks
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;
}
Styling Hooks
var(…)
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);
Styling Hooks
–sds
Declaring a custom property requires that the name begins with double hyphens (–). sds is a namespace reserved for Salesforce’s design system.
Styling Hooks
-c
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.
