SLDS + VS Code = Win!

Image for post
Image for post
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:

Image for post
Image for post
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

Salesforce Design

A collection of stories, case studies, and ideas from…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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