UI Development using Salesforce Lightning Design System

Creating a friendly and responsive UI is indeed the dream of every software product company. Whether it's a simple blog or a huge web based application, they all need a user friendly and a simple but attractive user interface.

The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows. It adheres to CSS best practices and conventions.

Lightning design system keep four core principles in mind when making design decisions at Salesforce:

• Clarity: Eliminate ambiguity. Enable people to see, understand, and act with confidence.
• Efficiency: Streamline and optimise 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.

It's better than the classical approach and makes it easier to build responsive applications for any device. Yes! that's right, same web code can be used for mobile or tab as well. The namespacing of the classes are done in a specific manner, i.e., writing .slds-button (adds pre written beautiful css to your button class) instead of .button which allows you to integrate the Lightning Design System (SLDS) with your own bespoke CSS or to integrate it with an application that uses the modified Salesforce Bootstrap framework previously used as you wean your application away from it. We can even change or specify the state of the component by adding these naming conventions in the "<div>" class ex: slds-is-selected, slds-is-active etc..

Henceforth, the dev efforts are reduced and we get a simple yet responsive and attractive UI with the same portable code running on web and mobile as well.

src: