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

There are a handful of trailhead modules / projects for learning about the Lightning Design System

Examples:

  • https://developer.salesforce.com/trailhead/project/slds-lightning-components- workshop
  • https://developer.salesforce.com/trailhead/project/workshop-lightning-design-system- visualforce
  • https://developer.salesforce.com/trailhead/module/lightning_design_system

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.

Written by James Loghry, DCS Architect & Salesforce MVP

If you would like to learn more about Lightning Design System, James will be presenting several sessions on Lightning Components, including how to utilize the Lightning Design System and Lightning Components together.

Follow James Loghry on twitter and livecoding.tv.

Additional information on DCS Salesforce Design and Development available on our Salesforce Development page.

Facebooktwittergoogle_plusredditpinterestlinkedinby feather
Facebooktwitterlinkedinby feather

No Comment

Comments are closed.

You may also like

Lube-Tech

Case Study: Lubrication Technologies Solution: Salesforce Sales Cloud Lubrication Technologies, Inc. (Lube-Tech) is an innovative lubricants ...
Read More
Industrial Turf Equipment

Case Study: Industrial Turf Equipment Solution: Salesforce Service Cloud Global provider of innovative turf, landscape, rental ...
Read More