lightning design system

Learn About Lightning Design System in Salesforce

What is the Salesforce Lightning Design System? Should I use it? 

It's easy to forget the days before Bootstrap when web developers had to painstakingly craft their own grids and styling rules. When Bootstrap came along, developer productivity skyrocketed. In a matter of seconds, you can create great-looking user interfaces and recreate valuable application logic.

The Salesforce developer is lucky these days because there is an even more customized version of his Bootstrap for Salesforce that allows the Salesforce developer to create a user interface and experience that matches his Salesforce design aesthetic. It's called the Salesforce Lightning Design System. Created by Salesforce UX. More importantly, it remains managed by Salesforce UX. This means your app automatically maintains aesthetic compatibility as the Salesforce platform updates and UI changes.

Lightning Design System is hosted on GitHub and it is open source so you can contribute. Available for Lightning, Salesforce1, Visualforce, and Heroku. 

Aesthetics

Behind the Lightning Design System are four main design principles: clarity, beauty, efficiency, and consistency. Like Bootstrap, the Lightning Design System provides cross-browser compatible CSS, icons, fonts, and design guidelines as well as semantic and accessible component markup. It even has its own typography known as Salesforce Sans.

The theme system also provides a list of backgrounds and text colours and font sizes to use. 

dont miss out iconDon't forget to check out: How to Configure Lightning Sales Path Salesforce

Components

Like Bootstrap, the Lightning Design System provides components and CSS that you can quickly use to create visually stunning applications. But this system is more than just CSS. It contains JavaScript that can be used to build more complex functionality into the user experience. Some of our favourites are: 

Activity Timeline

Ever wanted to create a dashboard or event stream that looks like a Salesforce dashboard? You can do this using the Activity Timeline component. Then you can include various next-action items for the user such as calls, emails, events, tasks, etc. 

Modals

Salesforce provides prebuilt modals that you can use to present important information to your users. 

Datepicker

How many times have you messed with a clunky date picker just wishing there was an easier way to make it look and work better? Lightning Design system has you covered. 

Walkthrough

The Lightning Design System is more than just colour schemes and fonts. Freedom to build great applications with great user experiences. The walkthrough component is a great example. This allows us to improve the onboarding, product launch, and training experience for new users. 

Rich Text Editor

The Rich Text Editor allows you to give your users a powerful text area component without a lot of custom JavaScript. Several other components are also available. 

dont miss out iconCheck out another amazing blog by Mohit here: OAuth 2.0 Client Credentials Flow | Salesforce Developer Guide

Design Tokens

One of the most difficult tasks for designers is maintaining app design consistency and scalability. The more you build, the more complex the design. Also, if you only have hardcoded values in your CSS, it's a pain to update or change them. Also, when Salesforce makes changes to its UI, I have to manually make sure everything is updated.

Design tokens are the answer to this problem. They are "named entities that  

Is used to store visual design attributes". Can be used in place of hard-coded pixel or hex values.

Not only background colour but also line height, spacing, opacity, font, font size, z-index, etc. 

The Lightning Design System is a great way to extend and maintain your designs while always adhering to Salesforce's best practices and design aesthetics. This will save you a lot of time and Challenges. Blue Canvas uses the Lightning Design System and recommends it to all developers working on Salesforce applications. We also recommend that you put your Lightning Design System code under source control. This allows you to track design changes over time and revert to previous states if necessary. 

Responses

Popular Salesforce Blogs