Salesforce Design
Published in

Salesforce Design

SLDS + VS Code = Win!

Analog example of design and development in action

Ever had one of those days where you spent hours getting your Salesforce UI just right? You followed all of the Lightning Design System (SLDS) best practices and recommendations. You carefully placed div elements using the layout manager, converted inline declarations to utility classes, and checked for correct usage of design tokens. You made sure not to add any CSS overrides that could lead your UI to miss out on essential SLDS updates.

Building a UI takes time. Adding that extra layer of validation is essential, but doing it manually can take even more time, and it’s hard not to introduce at least a few mistakes. What if you could spend more of your time writing HTML, CSS, and JS and less of it validating, for lack of a better phrase, SLDS compliance?

Meet SLDS Validator

We wanted to make writing SLDS-compliant markup and CSS a natural part of the development experience. What better way to do that than by providing real-time feedback and suggestions as you write your code in Visual Studio Code (VS Code)?

Introducing the SLDS Validator extension, now available as a part of the Salesforce Extension Pack.

SLDS Validator scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code. Check out how SLDS Validator handles some common markup scenarios:

SLDS Validator in action

We’ve been using this extension internally for a lot of our UI development. Now, it’s time to share it more broadly to help others (like you!) improve their UI development experience. This is still a beta, and we’re updating it continuously. If you find any issues or have suggestions, we’d love to hear from you. File an issue in our Github repo, and one of us will get back to you ASAP.

For a deeper dive into the top issues identified by the SLDS Validator, check out Donia’s excellent article over on the Salesforce Developers blog.

Happy developing!

😀 Ambreen Hasan
🙃 Billy Ma
😆 Donia Robinson
😉 John Earle
😂 Kirupa Chinnathambi
😊 Matt Holland
😁 Sarah Mei
🤩 Will Boyd

Follow us at @SalesforceUX.
Want to work with us? Contact
Check out the
Salesforce Lightning Design System




Let’s talk about the design tools, practices, and mindsets that help build strong customer, employee, and community relationships — serve business and society simultaneously.

Recommended from Medium

UX For Social Good

The making of DaisyDisk. Retrospective.

Types, Questions, and Perception

Designing for “Empty-Nesters”

Stories from my Internship at Swiggy Design

Personas: Understand user goals vis-à-vis business strategy

Someone who is completing the persona based on their notes.

Stepping on the Light

My Bi-weekly Journal — General Assembly UXDI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kirupa Chinnathambi

Kirupa Chinnathambi

Lover of all things animation and the web. You can find my writings and videos at the!

More from Medium

Should designers be part of more hackathon teams?

person writing code

7 Tips To Make Your Scrum Team More Self-Managing

What is a design system?

Journey of DLithe Bootcamp .NET Full Stack Week 2(Jan31-Feb5)