Lightning Design System

Salesforce Developers: Get Your Creative On!

Throughout the years I’ve worked on my share of programmatic solutions ranging from internal time card applications, processing and streaming presentations, high throughput and robust middleware integrations as well as high profile community oriented sites. The common denominator of those projects? Loathing the fact of having to make applications pretty and usable. It seems like browsers are constantly changing; CSS is changing, a new JavaScript framework is being introduced. Recently, Salesforce has aimed to simplify this process by introducing the Aura framework along with a whole new CSS framework called the Lightning Design System.

At a basic level, the Lightning Design System is a “collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem.” (https://www.lightningdesignsystem.com/faq). The collection not only consists of design elements, such as responsive CSS tiles and SVG icons shown above but also design tokens and CocoaPods for native iOS development. It is truly a holistic design solution for Salesforce developers.

Getting Started

If you’re interested in getting started with the Lightning Design System, you can simply include the CSS files as part of a static resource within Salesforce, or use the install link to install an unmanaged package here: https://www.lightningdesignsystem.com/getting- started/visualforce

Cautions

If you’re considering using the Lightning Design System for your next project, there are a few caveats that you should be aware of. First and foremost, the Lightning Design System is a collection of CSS and design components, but it lacks javascript support. This means for components like the date picker and lookups, you’ll need to implement your own functionality that works with the CSS layout. Second, SVG support isn’t quite where it should be. You’ll more than likely need to modify your Visualforce and Lightning components to work with the SVG icons along with testing them across all browsers for compatibility.