The Lightning Design System helps you to build a custom application extending the standard Lightning Experience. It maintains the same layout, style, iconography, etc.

Awesome? Yes, it is!

The Design System is an open source project on GitHub; it is available to everyone in order to provide a unified experience when extending standard features!

Developers can build custom interfaces using Visualforce framework; it includes a tag-based markup language and a set of server-side “standard controllers” that make basic database operations. Developers can associate to the Visualforce page their own logic with a custom controller written in Apex.

If Visualforce pages use standard components, their look matches Salesforce Classic, whether users are running in Lightning Experience or in Salesforce Classic.

It’s using the Design System that you can leverage Lightning look and feel!

In order to show you an example of how to extend the User Experience, I built a custom Visualforce page.

Salesforce Lightning Design System is implemented for Visualforce as a CSS library that you would include in your VF page as a static resource.

First of all, it’s necessary to download this library:

  1. Go to https://tools.lightningdesignsystem.com/css-customizer
  2. Generate the Design System files (insert the name of your company in ‘Scoping Class’ input box)
  3. Download it
  4. Upload downloaded zip file in Salesforce as a static resource

Best practices recommend changing the name of this static resource as SLDSxxx where xxx is the version number.

Now you can create your Visualforce page including css into your page: to add a stylesheet that’s been uploaded as a static resource named “SLDSxxx”, add the following code to your page:

To load a custom stylesheet only when your page is running in Lightning Experience you can use the following code:

Let’s build our first page using Lightning Design System

Create a Visualforce page by going to Setup and then doing a Quick Find for “pages”.

After completing the form, start to make your page:

1. LOAD STYLESHEET

Note: Substitute ‘COMPANYNAME’ with the name of your Company that you used in  ‘Scoping Class’ input box when you were generating the css.

2. INSERT A TITLE

Lightning Design System Title

3. INSERT THE MENU

Lightning Design System Menu

4. INSERT A CARD

Lightning Design System Card

5. INSERT ANOTHER TITLE

Lightning Design System Title

6. INSERT A SECTION

Lightning Design System Section

7. INSERT INPUT FIELDS

Lightning Design System Input Fields

 

8. INSERT ANOTHER SECTION

Lightning Design System Section

9. INSERT A PICKLIST

Lightning Design System Picklist

10. INSERT TEXT AREA

Lightning Design System Text Area

11. CLOSE TAGS

 

In conclusion, if you preview your page, you should see the following:

 

LDS

 

 

The Lightning Design System website gives some quickstarts on using it for Lightning Components, web pages (most likely running on Heroku), and Visualforce.

You could get the Trailhead which walks you through using it in a variety of contexts.

Developers can enjoy creating their own logic to control the visualforce page… Learn about custom apex controllers following this Trailhead!

News about Lightning Design System are expected in Spring ’17 Release… Updates are upcoming!

Support us with a small donation:

  • LTC Address: La5f6W1rPr5VHFGCrCmPJ3sSa2AiwKZJbU
  • BTC Address: 1FG1j42MUze8jiW7JbgNaUMZxZeu7M1b4f
  • Ripple Address: rPVMhWBsfF9iMXYj3aAzJVkPDTFNSyWdKy     Tag: 562614972
  • ETH Address: 0x0940958167ca9cbd6409999957a011be7907d904
(Visited 3,176 times, 1 visits today)
Massimiliano Avena
Massimiliano Avena

Massimiliano is a Salesforce Native (Salesforce administrator and developer certified) with a great passion for new digital technologies. His enthusiasm and energy are driving him to love challenges and to deepen the most hidden secrets of Salesforce. He is looking forward to sharing his point of view and the solutions he finds with the Web Community

Leave a Comment