SlideShare a Scribd company logo
1 of 3
Download to read offline
Overview of Salesforce Lightning Design System
Salesforce is one of the most popular customer relationship management (CRM) platforms
in the world, and it has been used by businesses of all sizes for years. With its latest release,
Salesforce Lightning Design System, users can now benefit from a more streamlined and
efficient user interface that simplifies the way they interact with data.
The Salesforce Lightning Design System offers a comprehensive set of guidelines,
resources, and code snippets that enable developers to create responsive and consistent
user interfaces quickly. With SLDS, businesses can develop applications that meet their
unique requirements while ensuring consistency with Salesforce's established design
standards.
What is Salesforce Lightning Design System?
Salesforce Lightning Design System (SLDS) is a set of guidelines, design patterns, and
components provided by Salesforce for building user interfaces (UI) in their Lightning
platform. It is a framework that enables developers and designers to create consistent,
visually appealing, and user-friendly interfaces across different Salesforce products and
applications.
SLDS incorporates principles of responsive design, accessibility, and usability to ensure a
seamless experience for users on various devices and platforms. It includes a
comprehensive set of UI components, such as buttons, forms, icons, grids, and navigation
elements, that can be used to build Salesforce applications and customize the user interface
to align with a company's brand identity.
The Lightning Design System provides a unified design language for Salesforce
applications, promoting a consistent look and feel across different functionalities. It
emphasizes modular development, allowing developers to reuse and combine components
to build complex UI elements quickly. SLDS also provides CSS and JavaScript resources to
implement these components effectively.
Wish to make a career in the world of salesforce? Start with HKR'S salesforce online
training !
Some key features and benefits of Salesforce Lightning Design System include:
Consistency: SLDS promotes a consistent user experience across Salesforce applications,
ensuring a cohesive and familiar interface for users.
Efficiency: The modular nature of SLDS components enables developers to build UI
elements quickly by reusing and combining existing components.
Responsiveness: SLDS is designed to support responsive web design, adapting the UI to
different screen sizes and devices.
Accessibility: The Lightning Design System follows accessibility guidelines, making it
easier for developers to create inclusive user interfaces.
Branding and Customization: SLDS allows developers to customize the design and
appearance of Salesforce applications to align with their brand identity.
Community Support: Salesforce provides extensive documentation, resources, and an
active community around SLDS, making it easier for developers to learn and leverage the
design system effectively.
Components of SLDS
Salesforce Lightning Design System (SLDS) provides a wide range of UI components that
can be used to build interfaces in Salesforce applications. These components are built using
HTML, CSS, and JavaScript and follow the guidelines and best practices outlined in the
SLDS documentation. Here are some of the commonly used components:
Buttons: SLDS offers different types of buttons, including standard, icon, and stateful
buttons, to create interactive elements in your UI.
Forms: Components like input fields, checkboxes, radio buttons, selects, and date pickers
are available to create forms for data input.
Icons: SLDS provides a vast library of icons that can be used to represent actions, objects,
and other elements in your application.
Grids: The SLDS grid system allows you to create responsive layouts with columns and
rows to structure your UI elements.
Navigation: Components like menus, tabs, breadcrumbs, and navigation bars help users
navigate through your application.
Modals: SLDS provides modal components that can be used to display overlays or dialogs
for additional information or actions.
Cards: Cards are useful for presenting grouped information or data in a visually appealing
manner. SLDS offers card components with different styles and layouts.
Alerts: Alert components can be used to display important messages, notifications, or errors
to users.
Tables: SLDS provides table components with features like sorting, pagination, and filtering
for presenting tabular data.
Tabs: Tabs allow users to switch between different sections or views within your application.
SLDS provides tab components for this purpose.
Get ahead in your career with our salesforce Tutorial
Implementation of SLDS
Implementing SLDS components involves including the necessary CSS and JavaScript
resources in your project. You can reference the SLDS CSS file and use classes provided by
SLDS to style your HTML elements. The SLDS JavaScript resources, such as SLDS scripts
and the Lightning Design System JavaScript library, can be used to enhance the functionality
of certain components.
Salesforce provides detailed documentation and examples on how to use each component,
along with code snippets and guidelines for customization. The SLDS website
(https://www.lightningdesignsystem.com/) is a valuable resource where you can find the
official documentation, guidelines, and a playground to experiment with different components
and styles.
Additionally, Salesforce also provides a Lightning Design System Developer Guide that
offers in-depth information on implementing SLDS components in different Salesforce
contexts, such as Lightning Web Components, Aura Components, and Visualforce pages.
The guide covers topics like styling, theming, accessibility, and responsive design.
Click here to get frequently asked Salesforce interview questions & answers
Conclusion
In conclusion, the Salesforce Lightning Design System is a powerful tool for developers and
designers alike. With its intuitive interface, extensive documentation, and robust set of
components, it empowers businesses to create stunning user experiences that drive
engagement and loyalty. By adopting this system, organizations can streamline their design
processes, reduce development time, and improve overall efficiency. Whether you're building
a mobile app or a web application, the Lightning Design System offers everything you need
to create beautiful and functional interfaces that truly resonate with your users. So if you
want to take your user experience to the next level, give it a try today!
If you want to know more about SLDS visit this blog Salesforce Lightning Design
System !

More Related Content

Similar to Salesforce Lightning Design System.pdf

Similar to Salesforce Lightning Design System.pdf (20)

What is Difference Between LC and LWC?
What is Difference Between LC and LWC?What is Difference Between LC and LWC?
What is Difference Between LC and LWC?
 
Why Choose Salesforce Development
Why Choose Salesforce DevelopmentWhy Choose Salesforce Development
Why Choose Salesforce Development
 
Lightning Experience: The Next Generation of Salesforce
Lightning Experience: The Next Generation of SalesforceLightning Experience: The Next Generation of Salesforce
Lightning Experience: The Next Generation of Salesforce
 
SFDC Lightning Demo
SFDC Lightning DemoSFDC Lightning Demo
SFDC Lightning Demo
 
Salesforce lightning
Salesforce lightningSalesforce lightning
Salesforce lightning
 
Project CIS5 Presentation.ppt
Project CIS5 Presentation.pptProject CIS5 Presentation.ppt
Project CIS5 Presentation.ppt
 
Project CIS5 Presentation.ppt
Project CIS5 Presentation.pptProject CIS5 Presentation.ppt
Project CIS5 Presentation.ppt
 
Introduction to Lightning for Salesforce Admins
Introduction to Lightning for Salesforce AdminsIntroduction to Lightning for Salesforce Admins
Introduction to Lightning for Salesforce Admins
 
Project CIS5 Presentation.ppt
Project CIS5 Presentation.pptProject CIS5 Presentation.ppt
Project CIS5 Presentation.ppt
 
Salesforce PPT.pptx
Salesforce PPT.pptxSalesforce PPT.pptx
Salesforce PPT.pptx
 
All About Salesforce Lightning
All About Salesforce LightningAll About Salesforce Lightning
All About Salesforce Lightning
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end development
 
Salesforce Lightning
Salesforce LightningSalesforce Lightning
Salesforce Lightning
 
Dreamwares: Lightning Experience
Dreamwares: Lightning ExperienceDreamwares: Lightning Experience
Dreamwares: Lightning Experience
 
How can Salesforce Implementer be used in the digital er1.pdf
How can Salesforce Implementer be used in the digital er1.pdfHow can Salesforce Implementer be used in the digital er1.pdf
How can Salesforce Implementer be used in the digital er1.pdf
 
Classic vs. lightning
Classic vs. lightningClassic vs. lightning
Classic vs. lightning
 
Syncfusion Company Brochure_May2015
Syncfusion Company Brochure_May2015Syncfusion Company Brochure_May2015
Syncfusion Company Brochure_May2015
 
Salesforce as a PaaS - Architecture of Force.com
Salesforce as a PaaS - Architecture of Force.comSalesforce as a PaaS - Architecture of Force.com
Salesforce as a PaaS - Architecture of Force.com
 
Salesforce Summer ’17 Release: Blazing a Trail to Business Productivity |
Salesforce Summer ’17 Release: Blazing a Trail to Business Productivity | Salesforce Summer ’17 Release: Blazing a Trail to Business Productivity |
Salesforce Summer ’17 Release: Blazing a Trail to Business Productivity |
 
cis5-Glauser-Michael-Project-PPT.ppt
cis5-Glauser-Michael-Project-PPT.pptcis5-Glauser-Michael-Project-PPT.ppt
cis5-Glauser-Michael-Project-PPT.ppt
 

More from VishnuGone

More from VishnuGone (20)

Ansible Copy Module.pdf
Ansible Copy Module.pdfAnsible Copy Module.pdf
Ansible Copy Module.pdf
 
Snowflake Time Travel.pdf
Snowflake Time Travel.pdfSnowflake Time Travel.pdf
Snowflake Time Travel.pdf
 
Snowflake Cloning.pdf
Snowflake Cloning.pdfSnowflake Cloning.pdf
Snowflake Cloning.pdf
 
Ansible vs Kubernetes.pdf
Ansible vs Kubernetes.pdfAnsible vs Kubernetes.pdf
Ansible vs Kubernetes.pdf
 
windows vs linux.pdf
windows vs linux.pdfwindows vs linux.pdf
windows vs linux.pdf
 
Linux Operating System.pdf
Linux Operating System.pdfLinux Operating System.pdf
Linux Operating System.pdf
 
Linux Bash.pdf
Linux Bash.pdfLinux Bash.pdf
Linux Bash.pdf
 
Alteryx Vs Knime.pdf
Alteryx Vs Knime.pdfAlteryx Vs Knime.pdf
Alteryx Vs Knime.pdf
 
Pega RuleSet.pdf
Pega RuleSet.pdfPega RuleSet.pdf
Pega RuleSet.pdf
 
What is Apigee.pdf
What is Apigee.pdfWhat is Apigee.pdf
What is Apigee.pdf
 
MuleSoft Anypoint Platform.pdf
MuleSoft Anypoint Platform.pdfMuleSoft Anypoint Platform.pdf
MuleSoft Anypoint Platform.pdf
 
Alteryx Tools.pdf
Alteryx Tools.pdfAlteryx Tools.pdf
Alteryx Tools.pdf
 
SailPoint VS CyberArk.pdf
SailPoint VS CyberArk.pdfSailPoint VS CyberArk.pdf
SailPoint VS CyberArk.pdf
 
What is Apigee.pdf
What is Apigee.pdfWhat is Apigee.pdf
What is Apigee.pdf
 
Alteryx Tutorial Step by Step Guide for Beginners
Alteryx Tutorial Step by Step Guide for BeginnersAlteryx Tutorial Step by Step Guide for Beginners
Alteryx Tutorial Step by Step Guide for Beginners
 
Pega Tutorial.pdf
Pega Tutorial.pdfPega Tutorial.pdf
Pega Tutorial.pdf
 
Sailpoint vs Okta.pdf
Sailpoint vs Okta.pdfSailpoint vs Okta.pdf
Sailpoint vs Okta.pdf
 
Differences Between Power BI vs SSRS
Differences Between  Power BI vs SSRSDifferences Between  Power BI vs SSRS
Differences Between Power BI vs SSRS
 
Power BI Data Modeling.pdf
Power BI Data Modeling.pdfPower BI Data Modeling.pdf
Power BI Data Modeling.pdf
 
Power BI Dashboard.pdf
Power BI Dashboard.pdfPower BI Dashboard.pdf
Power BI Dashboard.pdf
 

Recently uploaded

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Recently uploaded (20)

Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 

Salesforce Lightning Design System.pdf

  • 1. Overview of Salesforce Lightning Design System Salesforce is one of the most popular customer relationship management (CRM) platforms in the world, and it has been used by businesses of all sizes for years. With its latest release, Salesforce Lightning Design System, users can now benefit from a more streamlined and efficient user interface that simplifies the way they interact with data. The Salesforce Lightning Design System offers a comprehensive set of guidelines, resources, and code snippets that enable developers to create responsive and consistent user interfaces quickly. With SLDS, businesses can develop applications that meet their unique requirements while ensuring consistency with Salesforce's established design standards. What is Salesforce Lightning Design System? Salesforce Lightning Design System (SLDS) is a set of guidelines, design patterns, and components provided by Salesforce for building user interfaces (UI) in their Lightning platform. It is a framework that enables developers and designers to create consistent, visually appealing, and user-friendly interfaces across different Salesforce products and applications. SLDS incorporates principles of responsive design, accessibility, and usability to ensure a seamless experience for users on various devices and platforms. It includes a comprehensive set of UI components, such as buttons, forms, icons, grids, and navigation elements, that can be used to build Salesforce applications and customize the user interface to align with a company's brand identity. The Lightning Design System provides a unified design language for Salesforce applications, promoting a consistent look and feel across different functionalities. It emphasizes modular development, allowing developers to reuse and combine components to build complex UI elements quickly. SLDS also provides CSS and JavaScript resources to implement these components effectively. Wish to make a career in the world of salesforce? Start with HKR'S salesforce online training ! Some key features and benefits of Salesforce Lightning Design System include: Consistency: SLDS promotes a consistent user experience across Salesforce applications, ensuring a cohesive and familiar interface for users. Efficiency: The modular nature of SLDS components enables developers to build UI elements quickly by reusing and combining existing components. Responsiveness: SLDS is designed to support responsive web design, adapting the UI to different screen sizes and devices.
  • 2. Accessibility: The Lightning Design System follows accessibility guidelines, making it easier for developers to create inclusive user interfaces. Branding and Customization: SLDS allows developers to customize the design and appearance of Salesforce applications to align with their brand identity. Community Support: Salesforce provides extensive documentation, resources, and an active community around SLDS, making it easier for developers to learn and leverage the design system effectively. Components of SLDS Salesforce Lightning Design System (SLDS) provides a wide range of UI components that can be used to build interfaces in Salesforce applications. These components are built using HTML, CSS, and JavaScript and follow the guidelines and best practices outlined in the SLDS documentation. Here are some of the commonly used components: Buttons: SLDS offers different types of buttons, including standard, icon, and stateful buttons, to create interactive elements in your UI. Forms: Components like input fields, checkboxes, radio buttons, selects, and date pickers are available to create forms for data input. Icons: SLDS provides a vast library of icons that can be used to represent actions, objects, and other elements in your application. Grids: The SLDS grid system allows you to create responsive layouts with columns and rows to structure your UI elements. Navigation: Components like menus, tabs, breadcrumbs, and navigation bars help users navigate through your application. Modals: SLDS provides modal components that can be used to display overlays or dialogs for additional information or actions. Cards: Cards are useful for presenting grouped information or data in a visually appealing manner. SLDS offers card components with different styles and layouts. Alerts: Alert components can be used to display important messages, notifications, or errors to users. Tables: SLDS provides table components with features like sorting, pagination, and filtering for presenting tabular data. Tabs: Tabs allow users to switch between different sections or views within your application. SLDS provides tab components for this purpose. Get ahead in your career with our salesforce Tutorial
  • 3. Implementation of SLDS Implementing SLDS components involves including the necessary CSS and JavaScript resources in your project. You can reference the SLDS CSS file and use classes provided by SLDS to style your HTML elements. The SLDS JavaScript resources, such as SLDS scripts and the Lightning Design System JavaScript library, can be used to enhance the functionality of certain components. Salesforce provides detailed documentation and examples on how to use each component, along with code snippets and guidelines for customization. The SLDS website (https://www.lightningdesignsystem.com/) is a valuable resource where you can find the official documentation, guidelines, and a playground to experiment with different components and styles. Additionally, Salesforce also provides a Lightning Design System Developer Guide that offers in-depth information on implementing SLDS components in different Salesforce contexts, such as Lightning Web Components, Aura Components, and Visualforce pages. The guide covers topics like styling, theming, accessibility, and responsive design. Click here to get frequently asked Salesforce interview questions & answers Conclusion In conclusion, the Salesforce Lightning Design System is a powerful tool for developers and designers alike. With its intuitive interface, extensive documentation, and robust set of components, it empowers businesses to create stunning user experiences that drive engagement and loyalty. By adopting this system, organizations can streamline their design processes, reduce development time, and improve overall efficiency. Whether you're building a mobile app or a web application, the Lightning Design System offers everything you need to create beautiful and functional interfaces that truly resonate with your users. So if you want to take your user experience to the next level, give it a try today! If you want to know more about SLDS visit this blog Salesforce Lightning Design System !