Introducing Salesforce Lightning Design System

Introducing ‘ Salesforce Lightning Design System ’ Series

Salesforce Lightning Design System is the series where We would share the key practical examples to create your own Lightning page and share the examples to convert your existing Visualforce pages to Lightning page using Lightning Design System.So stay tuned and enjoy our series for Lightning.

Background & Blog Contributors

Dev Shukla and I had worked together on lightning project for couple of months and We decided to start a blog series to share our learning and experiments with “Lightning Lovers”.Many thanks to Dev Shukla for his contributor to this blog series.You can connect with Dev at twitter and check more about him here.

Introduction To Lightning Design System (SLDS)

The Salesforce User Experience team has been working hard to bring Enterprise UX into the 21st century, and is proud to present the Lightning Design System. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS. In fact using the new Design System Markup results in pages which have the lightning look and feel without writing any CSS.

Lightning Design System is quite a mouthful, so we’re referring to it here as the “Design System”.

You might have used other similar design systems, such as Twitter Bootstrap or Foundation for building websites. The key benefits of this Design System are:

It’s tailored for building Salesforce apps. Using the Design System markup and CSS framework results in UIs that reflect the salesforce Lightning look and feel. The focus on building applications is an important ane to keep in mind. The Design System does not over-enforce defaults such as padding and margins, in contrast to some other frameworks which are focused on building marketing pages. The Design System lets you easily specify the exact layouts you require, whilst conforming to the new Lightning UI.
It’s continuously updated.as long as you’re using the latest version of the Design System, your pages are always up to date with Salesforce UI changes.
Accessibility is baked into the CSS framework behind the components.
The CSS is fully namespaced with the slds- prefix to avoid CSS conflicts.

The Design System bundles four types of resources to help you build applications.

CSS Framework – Defines the UI components, such as pages headers, labels, and form elements, a grid layout system, and a single-purpose helper classes, to assist with spacing, sizing, and other visual adjustments.
Icons – Includes PNG and SVG (both individual and spritemap) versions of our action, custom doctype, standard, and utility icons.
Font – Typography is at the core of our product. We’ve designed the new Salesforce Sans font from the ground up to give our product a distinct visual voice and personality, and we’re making it available to you as part of the Design System.
Design Tokens – These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.

The Design System is built around the capabilities of modern browsers and has some minimum browser requirements.Modern versions of chrome, Safari, and Firefox are fully tested. For Microsoft Internet Explorer (MSIE), the Design System Supports only version 11 as well as Microsoft Edge. Users of earlier versions of MSIE might encounter issues such as missing icons.

Core Design Principle

The Lightning Experience UI, which the Design represents, was crafted using four core design principles. We encourage you to keep them in mind as you develop your applications.

Clarity – Eliminate ambiguity. Enable people to see, understand, and act with confidence. The new UI has reduced clutter so that users can easily find the information they need.
Efficiency – Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster. For instance, the new Lightning UI buttons improve the prominence of calls to action.
Consistency – Create familiarity and strengthen intuition by applying the same solution to the same problem. For example, the new UI enforces one button style across all contexts.
Beauty – Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship. Can a UI ever be beautiful? We think so!

Where you can use the Design System

The new Design System makes it straightforward to build Lightning-compliant salesforce apps across a range of technology stacks.

Visualforce pages accessing Salesforce data via remote objects or JavaScript remoting. The Design System is not yet compatible with tags, but watch this space.
Lightning pages and components made available to Salesforce1 and Lightning Experience.
Mobile apps accessing Salesforce through the Mobile SDK or another API
Standalone web apps served by Heroku or a similar platform.

Module Prerequisites

The rest of the module includes some fun hand-on technical work. Before you dive in, review the following prerequisites:

You must have access to a Salesforce Developer account.
The example pages assume that you have some knowledge of web development (HTML,CSS,JavaScript,Jquery) and Salesforce administration.
The module focuses on using the Design System within Visualforce pages, so it’s beneficial to have some experience with that technology. But although the code examples are specific to Visualforce, you can reuse them in other stacks with minor customization.

We would also suggest you to go through this awesome Trailhead module – Lightning Design System so that you are familiar with Lightning Design System.