While developing a Visualforce page with the Visualforce tags, a developer needs to reverse engineer Salesforce CSS to mock with their own custom page, match the Salesforce UI and the Visualforce page is not even responsive at that point of time. Though we can customize the visual force pages using various frameworks we faced many challenges. To overwhelm all these challenges Salesforce has introduced a new framework called Salesforce Lightning Design System (SLDS) which is similar to bootstrap framework.
SLDS is a design framework for building enterprise apps that look like Lightning Experience SLDS includes a sophisticated CSS framework, a collection of graphic assets, and the Salesforce Sans font 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.
Install the Design System as a Static Resource:Upload the Latest Salesforce Lighting App static resource from the below link into your development organization.https://www.lightningdesignsystem.com/resources/downloads/Once the package is installed in Salesforce, it is available as a static resource which can be accessed in our visualforce page during development.Unpack the zip file. Let's delve inside! The contents are as follows:assets/fonts/ - the new "Salesforce Sans" fonticons/ - the Design System’s icon libraryimages/ - other images, such as spinnersstyles/ - contains the base CSS, which defines the components and utilities that make up the Design System.
All the CSS is fully namespaced with the slds prefix.
scss/ - the Design System is generated using the Sass pre-processor. If you would like to customize any of the visual design, such as colours or spacing, you will be working here.Sample Lightning page
SLDS Grid SystemThe Design System grid is based on CSS Flexbox and provides a flexible, mobile-first, device-agnostic scaffolding system. The Design System also includes helper classes that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding.SLDS grid system is responsive, and the columns will re-arrange depending on the screen size. A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window. On a big screen it might look better with the content organized in multiple Columns, whereas on a small screen it would be rearranged into single ColumnsThe Grid System allows you to create responsive pages by defining specific layout variations for small, medium and large screens. These are defined with breakpoints of 480px, 768px and 1024px respectively. By default, a group of sizing helpers is created based on standard grid column spans of 2, 3, 4, 5, 6, and 12.The following example demonstrates the class name position for each breakpoint:
<div class="[default] [small size override] [medium size override] [large size override]">
A real world example would look like this:
<div class="slds-size--1-of-2 slds-small-size--1-of-3 slds-medium-size--1-of-4 slds-large-size--1-of-3">
This will equate to the following width output for your element:
.foo {width: 50%;@media only screen and (min-width: 30em) {width: 33.3333%;}@media only screen and (min-width: 48em) {width: 25%;}@media only screen and (min-width: 64em) {width: 33.3333%;}}
Below are the Sample Screen Shots of a Visualforce page developed using SLDS for various devices.
Desktop:
Ipad:
Iphone:
Finally the new 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. The Design System markup results in pages which have the Lightning look and feel without writing any CSS.