The Salesforce User Experience team has come up with a great UI framework called Lightning Design System. The intention is to build application, visualforce pages with this framework which will comply with the new Salesforce lightning look and feel. And the best part is that you don’t need to play with CSS.
Now you probably started thinking why I should go for this new Lightning Design System when I have Twitter Bootstrap or Foundation with which also I can achieve the same. The reason is very simple and they are as follows –
- With the use of this new Lightning Design System, your application or visualforce page will comply with the new Salesforce look and feel.
- It is a new design system and it is getting improved every day. So as long as you are referring the latest version of design system, you are getting most out of this new framework.
- The CSS is fully namespaced with slds- prefix which will avoid CSS conflicts.
- CSS Framework: This will contain UI components, such as page headers, form elements, buttons, grid layout system. This will come up with a single purpose helper class which will assist with spacing, sizing and other visual adjustments.
- Icons: Includes action, custom, standard and utility icons both in PNG and SVG format.
- Font: Salesforce designed a new font – Salesforce Sans font. This font is available here.
- Design Tokens: These are simple variables which will help you design pages, application matching your brand.
- Visualforce pages. (You don’t need Lightning Experience enabled in your org for this).
- Lightning pages and components
- Mobile apps.
- Standalone web apps.
Let’s start preparing our environment, so that we can play around.
- Click on Design System CSS Customizer Tool.
- Choose the Salesforce release and scoping class. You need to remember the class name as you are going to refer the same during visualforce page development.
- Once done, upload the zipped file as static resource in Salesforce. Please name it SLDSXXX where XXX is the version. The day when I am writing this blog post, the latest version is 2.0.3. So my static resource name is SLDS203.
Let’s now understand the important stuffs here –
- Line# 3: To use Salesforce Lightning Design System, you need to make sure that you are including the below attribute in html tag, which will enable support for SVG icon sprite maps within Visualforce.
- Line# 2: We are turning off header, sidebar and built in stylesheet. With this turned on, you can’t add extra attribute in html tag(specified above), which means SVG will not be supported.
- Line# 6: This is the step/way how you are including lightning design system stylesheet from static resource. This is very important to make sure lightning design system CSS stuffs are available in your visualforce page.
- Line# 10: To use Lightning Design System markup in visualforce page, it should be placed inside an outer wrapperwith scoping class you created using CSS Customizer tool. In my case, the name of the scoping class is: “suddeb“.
- Don’t worry about Line# 11 for the time being. I will explain the same in my next post.