Salesforce Apex Hours :- Introduction to lightning components
Salesforce lightning design system
-
Upload
salesforcecom-developer-community -
Category
Software
-
view
373 -
download
2
Transcript of Salesforce lightning design system
Lightning Design SystemBy Shermal Warnakula
Lightning Design System?
A collection of Design
Patterns, Components,
and Guidelines for
creating unified UIs on
Salesforce ecosystem.
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.
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.
Bundles Four Types of Resources
CSS framework
Icons
Font
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.
Clarity
Efficiency
Consistency
Beauty
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.
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
Responsiveness ?
A flexible and powerful “Grid System”, is provided to
construct responsive layouts that scale elegantly across
screen sizes.
Browser Compatibility
Browser Version
Google Chrome Latest
Mozilla Firefox Latest
Safari Latest
Internet Explorer 11 and above
References
Information Central :
https://www.lightningdesignsystem.com/
Learn with Experience :
https://developer.salesforce.com/trailhead/en/module/lig
htning_design_system
Design SystemDemo