Salesforce lightning design system

Deep dive into Salesforce Lightning - March Meetup Slides

1. Lightning Design System
By Shermal Warnakula

2. Lightning Design System?
A collection of Design
Patterns, Components,
and Guidelinesfor
creating unified UIs on
Salesforce ecosystem.

3. 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.

4. 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 namespacedwith the slds-prefix to
avoid CSS conflicts.

5. Bundles Four Types of Resources
CSS framework
Icons
Font
Design Tokens-allows you to tailor aspects of the
visual design to match your brand.

6. Core Design Principles
The Lightning ExperienceUI, which the Design System
represents, was crafted using four core design principles.
Clarity
Efficiency
Consistency
Beauty

7. How to Setup ?
Install as an unmanaged package -Go to the Design
Systemdownloads page, and install the latest version.
The unmanaged package will contain a single static
resource.
Download the Design System zip from thedownloads
pageand upload it yourself as a static resource.

8. Where Can We Use ?
Visualforcepages
<apex:stylesheetvalue="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce -
lightning-design-system-vf.css')}" />
Lightning pagesand components (Salesforce1,
Lightning Experience)
<ltng:requirestyles="/resource/SLDS100/assets/styles/salesforce-lightning-design-
system-vf.css" />
Mobile appsaccessing Salesforce.
Standalone web apps

9. Responsiveness ?
A flexible and powerful “Grid System”, is provided to
construct responsive layouts that scale elegantly across
screen sizes.

10. Browser Compatibility
Browser Version
Google Chrome Latest
Mozilla Firefox Latest
Safari Latest
Internet Explorer 11 and above

11. References
Information Central :
https://www.lightningdesignsystem.com/
Learn with Experience :
https://developer.salesforce.com/trailhead/en/module/lig
htning_design_system

12. Design System
Demo