Lightning Experience: Create a pixel perfect Visualforce page using Salesforce Lightning Design System
Lighting Design System is a new CSS framework introduced by Salesforce to create faster and beautiful pages on Salesforce App Cloud (Salesforce 1). With the release of Winter'16 and starting with Dreamforce 15, Salesforce Lightning Experience will be available generally. New Salesforce Lightning experience is a new completely transformed user experience on Salesforce platform. It is built using Lightning framework (Aura), a lightweight javascript framework.
So, the new lightning experience is going to available generally, Salesforce has released a small but efficient css framework called as Salesforce Lightning Design System. In short SLDS. This css framework is similar bootstrap but have advantages over it if you are working on Salesforce platform.
Lighting Design System Advantages:
- The Lightning Design System is a pure CSS framework that you can use with any front-end development framework.
- It can be used with any other javascript or css framework without any conflict or dependency.
- Completely follow Salesforce front-end design pattern and guidelines. It helps in providing consistent user experience throughout the Salesforce native interface and custom applications.
- Lightweight on pages, uses svg graphics to save loading time.
- Compatible with Visualforce, Lightning pages and html pages.
Getting Started with Lightning Design Experience:
Here is a simple demo page built in Visualforce to show how the new Lightning Design System can be leveraged on Visualforce. By using few css classes a fully responsive page can be built.
In Salesforce mobile app, the same visualforce page automatically fits to perfect size as:
Only by single CSS responsive pages can be create and used across all devices.
Looking for source code?
Source code of above demonstration page can be found on Github:Lightning Design System Examples.
CSS framework covers almost all components which would be required in webpage development but still advanced components are in prototype only. In addition there are few twiks still needed in CSS frameworks to make it perfect but eventually those will be fixed later. Overall implementation is smooth because of structured documentation and examples.
