Introduction to Salesforce Lighting Design System (SLDS).

Hello There !

Before Developing my first page with salesforce lighting design system, there were several question buzzing my mind, out of that first question that will pops up in every developers mind is “Why to build/develop a page with Salesforce Lighting design system ??”. After designing and developing my first page I got the below reasons….

  • Lighting is the future – Salesforce promoting Lightning as next platform for building web and mobile apps.
  • Using the Lightning Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel.
  • Lightning is also much faster than the Salesforce Classic interface and it’s tailored to work wherever you do: on desktop browsers, tablets, the Salesforce1 mobile app, even smart watches.
  • Visualforce elements are page-centric and most of their operations are done on the server, rendering the page and controlling the logic of both user and data interaction, where as this modern approach allows Lightning framework  to respond much more quickly to user interactions on the client (be it your desktop browser, mobile browser, the Salesforce1 mobile app, or a standalone custom app), where most of the operation is done.
  • As long as you’re using the latest version of the Lightning Design System, your pages are always up to date with Salesforce UI changes.
  • With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.
  • 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.
  • The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
  • All CSS selectors are prefixed with .slds- to prevent any collisions, so you can use other CSS framework as well.
  • The Lightning Design System is a design framework for building enterprise apps that looks similar to Lightning Experience. It includes a sophisticated CSS framework, a collection of graphic assets, and the Salesforce Sans font. We can use the Lightning Design System to build pages and apps that look gorgeous and perfectly match the Lightning Experience user interface.
  • If we find limitations in  Lightning Design System, we can always use other frameworks like Bootstrap for some or all components.

To capture lightning in a bottle, Need to take care of following Points :


Example :

<svg aria-hidden="true" class="slds-icon slds-icon--x-small">;
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>

Replace href path with Visualforce URLFOR syntax,

<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
	<use xlink:href="{!URLFOR($Resource.LightningDesignSystem,'assets/icons/utility-sprite/svg/symbols.svg#check')}" ></use>
  • Design System doesn’t support built-in Visualforce components — the <apex:*>
    ,<chatter:*> and other components you know and used to — for developing pages and accessing data. So don’t get shocked when you apply the Design System to your legacy Visualforce pages and it will not transform into the most beautiful UI.
  • Difference between VF and SLDS – 


  • If you started using the Design System, keep in mind that it is a living design system and receives frequent updates. I will recommend that you regularly update so you have the latest version.
  • If something Still not working? AAmmmmmm… I recommend opening the browser’s Web Developer console when you are coding. The errors that appear here are often useful in diagnosing issues.
  • For Microsoft Internet Explorer (MSIE), the Design System supports only version 11 as well as Microsoft Edge
    • If you are using MSIE, make sure to use a recent version and include the svg4everybody script in your page.

IMPORTANT NOTE For Developers : SVG sprite maps supports latest versions of Google Chrome, Safari and Firefox. To use SVG spritemap image icons with Microsoft Internet Explorer 11 you will need to download and Add a small script called svg4everybody to static resource. After you Add svg4everybody, include it in your pages, and call it in a tag. Please refer to the full instructions on the svg4everybody website for more details.


  • The icons are supplied both as individual PNGs and SVGs, as well packaged up inside SVG sprite maps. Sprite maps are recommended technique for including icons in pages. The advantages of SVG sprite maps over traditional icon fonts include more fine-grained CSS control and easier positioning in components, as well as better re-sizability of vector-based SVGs.
  • Relatively new technology and Salesforce Safe harbor rules applies.

Where You Can Use the Design System – 

  1. When you have Requirement to create page that should work on all the devices starting from desktop to all the mobiles, tabs and IPad running on IOS, Windows, Android platform.
  2. Mobile App vf page.
  3. Standalone web apps served by Heroku or a similar platform.

Explore the Amazing Design System Library Here and start creating gorgeous and perfectly match Lightning Experience user interface 😀


Happy Learning ! Thank you.

4 thoughts on “Lightning is the Future …. Making the Move to Salesforce Lighting Design System (SLDS)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s