Demand Chain is one of Minneapolis / St. Paul Business Journal’s Companies on the move!

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.


Written by James Loghry, Demand Chain, 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.


Contact Us Now!

Looking for a trusted Salesforce Partner to help you get results? You’re in the right place! We would love to hear from you!

Contact Us
Facebooktwittergoogle_plusredditpinterestlinkedinby 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