Salesforce lightning design system
Embed Size (px)
Transcript of Salesforce lightning design system
Lightning Design SystemBy Shermal Warnakula
Lightning Design System?
A collection of Design
and Guidelines for
creating unified UIs on
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.
Tailored for building Salesforce apps with Salesforce
Lightning look and feel.
Accessibility is baked into the CSS framework behind
The CSS is fully namespaced with the slds- prefix to
avoid CSS conflicts.
Bundles Four Types of Resources
Design Tokens - allows you to tailor aspects of the
visual design to match your brand.
Core Design Principles
The Lightning Experience UI, which the Design System
represents, was crafted using four core design principles.
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
Download the Design System zip from the downloads
page and upload it yourself as a static resource.
Where Can We Use ?
Lightning pages and components (Salesforce1,
Mobile apps accessing Salesforce.
Standalone web apps
A flexible and powerful Grid System, is provided to
construct responsive layouts that scale elegantly across
Google Chrome Latest
Mozilla Firefox Latest
Internet Explorer 11 and above
Information Central :
Learn with Experience :