Introduction to the Salesforce Lightning Design System
The Salesforce Lightning Design System (SLDS) helps you build applications with the look and feel of Lightning Experience without writing a single line of CSS. SLDS is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create Lightning Experience.
Lightning Experience UI Core Principles
The Lightning Experience UI, which SLDS represents, was crafted using four core design principles. We encourage you to keep them in mind as you develop your applications.
Clarity — Eliminate ambiguity. Enable people to see, understand, and act with confidence.
Efficiency — Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
Consistency — Create familiarity and strengthen intuition by applying the same solution to the same problem.
Beauty — Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.
Benefits of SLDS
SLDS gives you the tools to create apps consistent with the principles, design language, and best practices of Lightning Experience. Here are the benefits that make SLDS so useful:
It provides a unified experience and streamlined workflows when extending existing features or integrating with external systems.
It doesn’t over-enforce defaults such as padding and margins.
It’s continuously updated. As long as you’re using the latest version of SLDS, your pages are consistent with Lightning Experience.
It includes accessibility in the CSS framework.
It works with other CSS frameworks, like Bootstrap.
You can use the Lightning Design System (SLDS) to build Visualforce pages that match the look and feel of the Salesforce mobile app. To use SLDS, it takes some tweaks in your code and a few things to remember. For the most part, Visualforce code that uses SLDS works without issue.
The Lightning Design System (SLDS) includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.
Let’s create a Visualforce page that displays your recently accessed accounts and is styled with the Lightning Design System (SLDS) and add it to the mobile navigation menu.
Responsive design is a web design method aimed at creating online user interfaces that provide the best viewing experience, including easy reading and navigation, on various screen sizes.
j