Salesforce lightning design system

12
Lightning Design System By Shermal Warnakula

Transcript of Salesforce lightning design system

Page 1: Salesforce lightning design system

Lightning Design SystemBy Shermal Warnakula

Page 2: Salesforce lightning design system

Lightning Design System?

A collection of Design

Patterns, Components,

and Guidelines for

creating unified UIs on

Salesforce ecosystem.

Page 3: Salesforce lightning design system

Style with Ease

You might have used similar design systems, such as

Twitter Bootstrap or Foundation for building websites.

With the “Lightning Design System” you can build

custom applications with a look and feel that is

consistent with Salesforce core features.

Page 4: Salesforce lightning design system

Key Benefits

Tailored for building Salesforce apps with Salesforce

Lightning look and feel.

Continuously updated.

Accessibility is baked into the CSS framework behind

the components.

The CSS is fully namespaced with the slds- prefix to

avoid CSS conflicts.

Page 5: Salesforce lightning design system

Bundles Four Types of Resources

CSS framework

Icons

Font

Design Tokens - allows you to tailor aspects of the

visual design to match your brand.

Page 6: Salesforce lightning design system

Core Design Principles

The Lightning Experience UI, which the Design System

represents, was crafted using four core design principles.

Clarity

Efficiency

Consistency

Beauty

Page 7: Salesforce lightning design system

How to Setup ?

Install as an unmanaged package - Go to the Design

System downloads page, and install the latest version.

The unmanaged package will contain a single static

resource.

Download the Design System zip from the downloads

page and upload it yourself as a static resource.

Page 8: Salesforce lightning design system

Where Can We Use ?

Visualforce pages<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-

lightning-design-system-vf.css')}" />

Lightning pages and components (Salesforce1,

Lightning Experience)<ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-

system-vf.css" />

Mobile apps accessing Salesforce.

Standalone web apps

Page 9: Salesforce lightning design system

Responsiveness ?

A flexible and powerful “Grid System”, is provided to

construct responsive layouts that scale elegantly across

screen sizes.

Page 10: Salesforce lightning design system

Browser Compatibility

Browser Version

Google Chrome Latest

Mozilla Firefox Latest

Safari Latest

Internet Explorer 11 and above

Page 11: Salesforce lightning design system

References

Information Central :

https://www.lightningdesignsystem.com/

Learn with Experience :

https://developer.salesforce.com/trailhead/en/module/lig

htning_design_system

Page 12: Salesforce lightning design system

Design SystemDemo